Start Building Professional
Web Apps Today

Dynamic Smart Rendering Sorting Bug

In my code below, you can see that I am setting my initial widths for each column, then using "*" to indicate using the remaining width for the first column.

Now, using Smart Rendering with Dynamic Loading and server-side filtering & sorting, when the sort indicator is displayed, if the list is NOT filling the box (that is, no scrollbar), then the indicator is positioned correctly. However, if the list DOES have a scrollbar, then the indicator is too far right by the width of the scrollbar.

If I fully define the width of each column and factor in 20 pixels for the scrollbar, it seems to work properly (but looks funny when there is no scrollbar).

You can see the problem demonstrated in the 50K record example here:
http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/loading_big_datasets/50000.html

Click on the "Code" column to sort, and you will see the sort indicator shown in the scrollbar column. On my grid, the indicator is in the wrong place on ANY column. In the 50K example, the indicator is in the right place when sorting on the "Name" column, and I'm not sure why, but it must have something to do with the "*" placement.

var mygrid;
mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.enableMultiline(false);
mygrid.setImagePath("../dhtmlx/dhtmlxGrid/codebase/imgs/");
mygrid.setHeader("Agency,City/ST,Contact Name/Phone/Email,Student<br>Count", "", ["text-align:left;","text-align:left;","text-align:left;","text-align:center;"]);


mygrid.setInitWidths("*,130,250,70");


mygrid.setColAlign("left,left,left,center");
mygrid.setColTypes("link,ro,ro,link");
mygrid.setColSorting("server,server,server,server");
mygrid.setSkin("light");
mygrid.init();
mygrid.enableSmartRendering(true);
var gridQString;
gridQString = "/H1Ems/siteadmin/adm_Agency.php?mode=RenderData&FltAgencyType=Starts+With&FltAgencyName=";
mygrid.loadXML(gridQString);

function sortGridOnServer(ind,gridObj,direct){
    alert('In sortGridOnServer ind:' + ind + ' direct: ' + direct);
    alert('Calling: ' + gridQString+(gridQString.indexOf("?")>=0?"&":"?")+"orderby="+ind+"&direct="+direct);
    mygrid.clearAll();
    mygrid.loadXML(gridQString+(gridQString.indexOf("?")>=0?"&":"?")+"orderby="+ind+"&direct="+direct);
    mygrid.setSortImgState(true,ind,direct);
    return false;
}
mygrid.attachEvent("onBeforeSorting",sortGridOnServer);

Which version of grid you are using? Version 1.6 has known issue with sort image positioning in case of auto-size columns.
As fast solution, change the code of sortGridOnServer as 

  mygrid.loadXML(gridQString+(gridQString.indexOf("?")>=0?"&":"?")+"orderby="+ind+"&direct="+direct,function(){
          mygrid.setSortImgState(true,ind,direct); 
  }); 

It must resolve issue.

dhtmlxGrid v.2.0 Standard edition build 81009/81107

And your code snippets DOES fix the issue - thanks!