Sorting an SData base grid in the SalesLogix web client

In the SalesLogix 7.5.4+ web client the “editable grid” control that allows for inline editing and the like is based on a client side SData feed to bind and control updates.  An example of this is on the Sales Order Product’s tab.  This grid is actually rendered completely client side using dojo and its DataGrid implementation.  Because of this you can add client side scripting to work with the underlying grid and do things with it, like control sorting.

Working with the grid client side on a quick form is a bit of a pain as when the quick form is converted to a user control it is split into a ascx file with the normal controls rendered, along with any of the server code  on the form.  The grid itself only exists in the ascx form in the form of a placeholder where the dojo grid is loaded into.  All of the client script regarding the grid is built and deployed into a separate js file that can not be modified.  This means if you want to be able to add your own code you need to either create a stand alone js file that is accessed from the ascx file, or by injecting javascript within the ascx file.  It is this later option I am going to walk through today.

The easiest place to inject client script is on the quick form  load event.  Using the Scriptmanager.RegisterClientScriptBlock we can add code that is injected client side onto the page.  There is a bit of a hiccup in this though because depending on if the tab is active or not when the page loads, the client script loading can behave differently I will talk about how to handle this too.

Lets take a look at how to add the javascript code to do what we need.

First  we need to identify the name of the grid control as it exists in the DOM.  You can find the name of the grid by looking at the deployed file and searching for the empty div markup that is in the ascx that exists as the placeholder for the dojo grid.  It also seems like there is a standard naming convention for it which is the name of the quick form + the Control Id of the grid.  So for instance on the SalesOrderProducts quick form, it has a grid control called grdItems so the deployed grid DOM id is called “SalesOrderProductsgrdItems”.  Again we can look in the deployed file and find the empty div to get this, here is what it looks like:

<div id=”SalesOrderProductsgrdItems” style=”width:100%;” class=””>
    <div id=”SalesOrderProductsgrdItems_Grid” style=”width:100%;height:25px;”></div>
</div>

We want the name of the outer div, not the inner one. Now that we know the ID we can use that in a javascript code block to get the grid instance and manipulate it:

var grid = dijit.byId(‘SalesOrderProductsgrdItems’);

Now that we have an instance of the grid, we can do something like sort by a particular column:

grid.sortInfo = 5;
grid.sort();

Now the sortInfo is an index of the column you want to sort on.  Note that there are some hidden columns in the grid that are not rendered on the screen, so what you think is the first column may not be.  You might need to play around with the number to see which one is sorting.  You will be able to tell as a visual arrow representation will appear on the column heading of the grid column that has been sorted.

So a complete function can be written like:

dojo.require(‘dojox.grid.DataGrid’);   
function doGridSortCode() {
var grid = dijit.byId(‘SalesOrderProductsgrdItems’);
grid.sortInfo = 5;
grid.sort();
}

Notice I am including a command to include the dojo Datagrid library so my dijit.byId works. 

So now we have a function that will sort a grid, but how do we call it?  Well in my case I want to sort whenever the page opens.  You certainly could call this code from a client side click event of a button or something, but lets look at the page load:

What I will do is use the jQuery $(document).ready function.  We need it here because this function runs after dojo has rendered the controls.  Basically it runs after the DOM has finished being constructed by the browser.  However there is one more hurdle to overcome because of the async postback loads of tabs.  The solution is to use a recursive function within the ready function.  The recursive function simply checks to see if the dojo grid exists yet using the dijit.byId.  If it doesn’t it calls itself again until it does:

function wireSO(){
if(!dijit.byId(‘SalesOrderProductsgrdItems’)) setTimeout(function() { wireSO() }, 50);
else doGridSortCode();
}

So now we have a function that checks if the grid is there, if not it waits 50 milliseconds and then checks again.  if it is there it runs our function from earlier to sort the grid.

Finally we just need to add our recursive function in the ready function (and the pageLoad so it works on postbacks):

function pageLoad(){wireSO();}
$(document).ready (function () {
wireSO();}); 

So now that we have our client side code we can build a string variable in server side code containing it all and then register it on the page.  So in a quick form load action we can do something like:

string script = @”
dojo.require(‘dojox.grid.DataGrid’);   
function doGridSortCode() {
var grid = dijit.byId(‘SalesOrderProductsgrdItems’);
grid.sortInfo = 5;
grid.sort();
}

function wireSO(){
if(!dijit.byId(‘SalesOrderProductsgrdItems’)) setTimeout(function() { wireSO() }, 50);
else doGridSortCode();
}


function pageLoad(){wireSO();}

$(document).ready (function () {
wireSO();});”;               
                   
ScriptManager.RegisterClientScriptBlock(this.Page, GetType(), “FXSortGrid”, script, true);

There you have it!

ABOUT THE AUTHOR

Kris Halsrud

Kris Halsrud is a Senior Analyst / Developer for Customer FX Corporation.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) news and product updates!

You have Successfully Subscribed!