Cell class is missed after applying filter

[tonvenParticipant]

Hi. I have a Date column, which has cellclassname: colorClass, which applies different colors to cells based on business requirements.
But when I apply filter for a different column, the colorClass is lost for a Date column. As I understand it happens because cellclassname is binded to a row number.

How can I fix it?

Vladimir.

[tonvenParticipant]

Here is my cellclassname:

var colorClass = function (row, columnfield, value)
        {
            var data = $("#jqxgrid").jqxGrid('getrenderedrowdata', row);
            var today = dateToISO(dateNow());
            var formattedFristDate = $.jqx.dataFormat.formatdate(value, 'yyyy.MM.dd');
            if (formattedFristDate.length === 10 || formattedFristDate.length === 19)
            {
                formattedFristDate = dateToISO(formattedFristDate);

                var formattedVarslingDate;
                if (data && data.varselFrist != null)
                {
                    formattedVarslingDate = $.jqx.dataFormat.formatdate(data.varselFrist, 'yyyy.MM.dd');

                    if (today >= dateToISO(formattedVarslingDate) && formattedFristDate > today)
                    {
                        return 'yellowZone';
                    }
                };

                if (formattedFristDate <= today)
                {
                    return 'redDangerZone';
                }
            }

            return "";
        };

When I filter data and in a grid I can see only 1 row, this function still gets that row = 2.

[tonvenParticipant]

As I figured out the problem is in my custom sorting function. If I disable custom sorting, then it will work and row will get correct row id. He is my custom row function:

var customsortfunc = function (column, direction)
        {
            var sortdata = [];
            var data = $("#jqxgrid").jqxGrid('source').loadedData;
            if (direction === 'ascending' || direction === 'asc') direction = true;
            if (direction === 'descending' || direction === 'desc') direction = false;
            $("#jqxgrid").jqxGrid('beginupdate');
            for (var j = 0; j < fordelingSaker.length; j++)
            {
                sortdata.push(fordelingSaker[j]);
            }
            $("#jqxgrid").jqxGrid('resumeupdate');
            var tmpToString = Object.prototype.toString;
            Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
            if (direction !== null)
            {
                if (column === 'saksnummer')
                {
                    sortdata.sort(sortIterationOne);
                } else
                {
                    sortdata.sort();
                }
                if (!direction)
                {
                    sortdata.reverse();
                }
            }

            source.localdata = sortdata;
            $("#jqxgrid").jqxGrid('databind', source);
            Object.prototype.toString = tmpToString;
        }

In which way should I use custom sorting to update row id?

P.S. Sorry for spamming questions.

[HristoParticipant]

Hello tonven,

In your code missing declaration about “sortIterationOne”.
Also we do not have “resumeupdate” method.
You maybe know this example but I would like to review this:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customsorting.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[tonvenParticipant]

Hi Hristo, I have change resumeupdate to endupdate, it didn’t help. After all I deleted it. Here is my sortIterationOne function:

function sortIterationOne(a, b)
    {
        var t = String(a).toLowerCase();
        var tc = String(b).toLowerCase();
        var index = t.indexOf("/");
        var index2 = tc.indexOf("/");
        var aa = t.substring(0, index);
        var bb = tc.substring(0, index2);
        var an = parseInt(aa);
        var bn = parseInt(bb);

        var number = an > bn ? 1 : (an === bn ? 0 : -1);
        if (number === 1 || number === -1)
        {
            return number;
        } else
        {
            index = t.indexOf("/");
            index2 = tc.indexOf("/");
            aa = t.substring(index + 1, t.length);
            bb = tc.substring(index2 + 1, tc.length);
            an = parseInt(aa);
            bn = parseInt(bb);
            return an > bn ? 1 : -1;
        }
    };

I saw that example and followed it, as you can see from my code.
Also I have another problem, which I think is connected with this one.
Whenever I check “Plukk” checkbox and sort another column right after, the checked elements become unchecked again.
I think that a reason for such behaviour is that “colour” class of date and checked “plukk” checkbox are both not a part of a ViewModel.
Can this be a reason for such behaviour and how can I fix it?
Thank you.

[HristoParticipant]

Hello tonven,

We try to simulate this scenario but looks ok.
Please, provide us an example that demonstrate this issue. (better in https://www.jseditor.io/ or https://fiddle.jshell.net/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts