Setting a Default Sort in an Editable SData DataGrid in the Infor CRM Web Client

When using the Editable (SData) DataGrid on forms in Application Architect, you have options for specifying the sort for the grid by setting the sort properties for a column. It is also possible to programmatically set the default sort for an Editable DataGrid as well if needed.

First of all, to set the sort for the editable grid in Application Architect, you simply need to set the sort for the column in the columns editor. Note, you can’t just set “IsSortable” for the column or even the SortField alone, you must also specify a “Sort Direction” for this to get added to the generated code as the default sort for the grid.

For this example, we will modify the AccountTickets form to make the ticket list sort my ReceivedDate in descending order.

There’s a few reasons why you might want to do this in code at runtime instead of setting it in AA. First of all, since the sort os set in the columns collection, you can only specify a sort for a column that appears in the grid. Second, and a bigger deal, is that if you want to sort by more than one column, setting it in AA will add the sorts based on the order the columns appear in the grid (so you lose control over first sort by X asc and then by Y desc unless you rearrange the columns in this order).

Let’s take a look at some code to do this at runtime. Add a LoadAction to the AccountTickets form and select “C# Snippet Action”. Then in the code, you’ll add the following:

ScriptManager.RegisterClientScriptBlock(this, GetType(), "grid_Script", @"
require(['dojo/aspect', 'Sage/UI/GridView'], function (aspect, GridView) {	
    aspect.before(GridView.prototype, 'createGridView', function() {
        if (this.id == 'AccountTicketsgrdTickets') { 
            this.sort = [{attribute: 'ReceivedDate', descending: true}];
        }
    });
});
", true);

Here’s what that code is doing. Basically, the javascript code that is generated for an Editable datagrid creates a Sage.UI.GridView widget that is placed on the page. What we are doing is hooking up some code to fire before the base GridView widget gets created. That is hooked up for any GridView on this page, not just *this* GridView. So, we’ll check the ID of the GridView to make sure it matches the one we’re wanting to modify (in this case, the grid on the AccountTickets form). To find out what the editable grid’s actual ID is (it’s not something you’ll see in Application Architect). You can guess it, it’s usually the form name + the control name in AA. However, it’s better to open the js file that gets created when you build & deploy. For the AccountTickets form, you can find a file named “AccountTickets.js” in the deployment folder under SlxClient\SmartParts\Account folder. In that file, you’ll see a line that says id : ‘AccountTicketsgrdTickets’ – that is the ID you’ll want to use. Once we know our code is firing before the GridView gets created for the AccountTickets grid, we’ll simply set the sort attribute for the grid for the ReceivedDate property (using desc order). That’s it. Now when the grid get’s it’s data, it will use this sort.