Start Building Professional
Web Apps Today

problems with custom sorting

Hello there!

I have problems when i try to sort my date format. Format is dd.mm.yyyy (x), where x is the amount of projects, which started at this date. The column is sorted exactly, but i have to click twice on the header so that it starts sorting. Only problem now is, that if it is sorting descending and the sorting arrow shows it ascending, the first item in the grid moves to last row in the grid because program thinks it has to sort ascending. Another strange thing is, that when i try to do an alert in my custom_sort function, it doesnt appear. So i think its not executed at all, although it is sorting correctly, very strange.

I wrote already a mail to your support team, but didnt get anything back. So i post my code another time, maybe you could test it and help me with my problem. Would be appreciated very much as i have to fix this.


Here is the initialization of the grid:

function initStartDateGrid()
{
myGridbox = new dhtmlXGridObject('gridbox');
myGridbox.setImagePath(documentRoot+"/include/dhtmlx/imgs/");
myGridbox.setSkin("gray");
myGridbox.enableColumnAutoSize(true);
myGridbox.setHeader("Start Date, ProjectNr, Status, Site, Product, Cell, Short Description, Owner, End Date, Mod. Date");
myGridbox.setInitWidths("115,120,50,150,150,150,280,175,71,71");
myGridbox.enableResizing("true,true,true,true,true,true,true,true,true,true");
myGridbox.setColAlign("left,left,center,left,left,left,left,left,left,left");
myGridbox.setColTypes("tree,link,img,ro,ro,ro,ro,ro,calendar,calendar");
myGridbox.setColSorting("sort_custom,str,str,str,str,str,str,str,date,date");
//myGridbox.setCustomSorting(sort_custom,1);
myGridbox.setDateFormat("d.m.y");
myGridbox.enableAlterCss("gridEven","GridUneven");
myGridbox.setEditable(false);
myGridbox.init();
try
{
myGridbox.setOnLoadingEnd(loadingEnd);
}
catch(e){}
myGridbox.setOnLoadingStart(showLoading);
window.s_col=1;
myGridbox.enableSmartXMLParsing(true);
startDateReloadGrid();
}

function startDateReloadGrid()
{
myGridbox.clearAll();
myGridbox.kidsXmlFile = "ajax/getStartDateList.php";
myGridbox.loadXML("ajax/getStartDateList.php");
}

Here is the custom sort function:

function sort_custom(a,b,order)
{
dateA = a.slice(3,13).split(".");
dateB = b.slice(3,13).split(".");
yearA = dateA[2];
monthA = dateA[1];
dayA = dateA[0];
yearB = dateB[2];
monthB = dateB[1];
dayB = dateB[0];

if (yearA == yearB)
{
if (monthA == monthB)
{
if (order == "asc")
{
return dayA <= dayB ? 1 : -1;
}
else
{
return dayA > dayB ? 1 : -1;
}
}
else
{
if (order == "asc")
{
return monthA < monthB ? 1 : -1;
}
else
{
return monthA > monthB ? 1 : -1;
}
}
}
else
{
if (order == "asc")
{
return yearA < yearB ? 1 : -1;
}
else
{
return yearA > yearB ? 1 : -1;
}
}
}

And the xml-data which is generated by a PHP script:

<?xml version="1.0" encoding="iso-8859-1"?>

<rows parent='p0'> <row id="s01.12.2007" xmlkids="1">

<cell image="spacer.gif"><![CDATA[<b>01.12.2007 (10)</b>]]></cell>

<cell><![CDATA[<img src="../../images/spacer.gif">]]></cell>

<cell><![CDATA[/docnum/images/spacer.gif]]></cell>

<cell></cell>

<cell></cell>

</row>

<row id="s01.01.2008" xmlkids="1">

<cell image="spacer.gif"><![CDATA[<b>01.01.2008 (11)</b>]]></cell>

<cell><![CDATA[<img src="../../images/spacer.gif">]]></cell>

<cell><![CDATA[/docnum/images/spacer.gif]]></cell>

<cell></cell>

<cell></cell>

</row>

<row id="s21.02.2008" xmlkids="1">

<cell image="spacer.gif"><![CDATA[<b>21.02.2008 (1)</b>]]></cell>

<cell><![CDATA[<img src="../../images/spacer.gif">]]></cell>

<cell><![CDATA[/docnum/images/spacer.gif]]></cell>

<cell></cell>

<cell></cell>

</row>

<row id="s05.03.2008" xmlkids="1">

<cell image="spacer.gif"><![CDATA[<b>05.03.2008 (1)</b>]]></cell>

<cell><![CDATA[<img src="../../images/spacer.gif">]]></cell>

<cell><![CDATA[/docnum/images/spacer.gif]]></cell>

<cell></cell>

<cell></cell>

</row>

</rows>

I dont have any idea what i could try or do in another way because im pretty new to these things. Maybe i did something wrong and you could tell me.

Thx a lot

While mostly correct, your custom routine has potential problem ( related to how HTML content in tree preserved )
Please try to use next function as sorting routine

    function sort_custom(a,b,order)
    {
        dateA = a.replace(/<[^>]*>/g,"").slice(0,10).split(".");
        dateB = b.replace(/<[^>]*>/g,"").slice(0,10).split(".");
       
        dateA= dateA[0]*1+dateA[1]*40+dateA[2]*500;
        dateB= dateB[0]*1+dateB[1]*40+dateB[2]*500;
       
        return  ((dateA > dateB)?1:-1)*((order == "asc")?1:-1);
    }

Thx for your answer. Unfortunately, this function is not working too. Did you try this function on your machine? And if so, did it work? Could it be then that my DHTML source files are not correct? It is not showing an alert("somewhat") within the sort function at all. Very strange...

>>Could it be then that my DHTML source files are not correct?
Please try to check you code with js files from sample, which was sent by email.

Hi,
I'm busy with the same kind of problem:
I have a "customdate" column which looks in the xml file like this:

<cell><![CDATA[<font style="FONT: 10px Arial, Verdana;">2008-08-09<br>2008-08-17</font>]]></cell>

Now I want to sort this column by a customsort function. Nearly the same like the original poster had:

function customdate=function(a,b,order){
    dateA = a.replace(/<[^>]*>/g,"").slice(0,10).split("-");
    dateB = b.replace(/<[^>]*>/g,"").slice(0,10).split("-");
    if (dateA[0]==dateB[0]){
        if (dateA[1]==dateB[1]) return (dateA[2]>dateB[2]?1:-1)*(order=="asc"?1:-1);
        else return (dateA[1]>dateB[1]?1:-1)*(order=="asc"?1:-1);
    } else return (dateA[0]>dateB[0]?1:-1)*(order=="asc"?1:-1);
}

mygrid.setColSorting("str,str,str,customdate,str,str,str,int,str");


I just want to sort for the first date in each row. Due to the format y-m-d  I had to change the array order.
However, if I add this funtion, nothing happens. Even the Grid is not loading. Nothing is shown at all.
I can't see any syntax mistake here? Any idea where the problem may be??

Thanks in advance!
--
ragsna

There is a typo in your code, the correct one will be
       function customdate(a,b,order){....

All other is correct, the sorting works in necessary way when such function assigned as sorting method.

Thanks for info.
But that didn't solve the problem.
At least the table is now loading but if I click for sorting, nothing happens with the data.

function sort_custom(a,b,order){
    dateA = a.replace(/<[^>]*>/g,"").slice(0,10).split("-");
    dateB = b.replace(/<[^>]*>/g,"").slice(0,10).split("-");
    if (dateA[0]==dateB[0]){
        if (dateA[1]==dateB[1]) return (dateA[2]>dateB[2]?1:-1)*(order=="asc"?1:-1);
        else return (dateA[1]>dateB[1]?1:-1)*(order=="asc"?1:-1);
    } else return (dateA[0]>dateB[0]?1:-1)*(order=="asc"?1:-1);
}

But one thing is even strange:

If I use this:
mygrid.setColSorting("str,str,str,sort_custom,str,str,str,int,str");
then the table is at least loaded.

When I use this :
mygrid.setCustomSorting(sort_custom,3);
The table is not loaded.

Do I have to load any additional js file?
I checked the examples, but there is nothing mentioned.

So still any idea what the problem can be?

BR
--
ragsna

You need not include any additional js files. 
Working sample, with same js code, sent by email.