Double Sorting Icon

[Tatiana]

Hi,

 I am using the Q32001 version of the controls and .NET Framework 4.5. Here is my situation. I have a grid and a client side event OnCommand that does some staff for grouping and ungrouping (and only that!). Everything is working as expected. However, when I sort the datain the grid the double sorting icon appers. If I remove the ClientEvent-OnCommand event handler, the problem goes away. In the handler there is no code related to sorting what so ever.

Could you please explain what I have this problem and how to fix it?

Thank  you,

Tatiana

[Antonio Stoilkov]

Hello Tatiana,

You could try resolving your issue by placing the provided code below in the RadGrid OnCommand method. If you issue still persist you could take a look at the attached page and observe if there are any differences at your end.

function Command(sender, eventArgs)
{
    if (eventArgs.get_commandName() == "Sort")
    {
        eventArgs.set_cancel(true);
    }
}

All the best,
Antonio Stoilkov
the Telerik team

[Tatiana]

Hi Antonio,

Your example shows how to cancel sorting. I do not want to cancel sorting. I just want to have only 1 sorting icon to appear instead of 2. And even when I tried what you suggested the sorting was not performed because it was canceled but there was still the sorting icon.

Thank you,
Tatiana

[Antonio Stoilkov]

Hi Tatiana,

You could try the code provided below in order to observe if your issue will be resolved.

function getElementsByClassName(className, tag, elm)
{
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all) ? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for (var i = 0; i < length; i++)
    {
        current = elements[i];
        if (testClass.test(current.className))
        {
            returnElements.push(current);
        }
    }
    return returnElements;
}

function pageLoad()
{
    setTimeout(function ()
    {
        var headers = getElementsByClassName("rgHeader", "th", document.body);
        for (var i = 0; i < headers.length; i++)
        {
            var ascSort = getElementsByClassName("rgSortAsc", "input", headers[i]);
            var descSort = getElementsByClassName("rgSortDesc", "input", headers[i]);

            if (ascSort.length > 1)
            {
                ascSort[1].parentNode.removeChild(ascSort[1]);
            }
            if (descSort.length > 1)
            {
                descSort[1].parentNode.removeChild(descSort[1]);
            }
        }
    }, 100);
}

If your problem still persists you could open a formal ticket and attach a sample project showing the unwanted behavior so we could further investigate and advise you with the best possible solution.

All the best,
Antonio Stoilkov
the Telerik team

[Tatiana]

Hi Antonio,

Thank oyu for the reply and the code. It's working, but it's working partially. And I will explain what I mean by that. First, I got a grid on page without sorting. First, I sorted asc a column - no double icon. Good. Next, I sorted the column again. It's sorted decs. Still, no double icon. Good. After that, I clicked on the column's header again to remove the sorting. And I had  double icons.

I hope my explanation makes sence.

Thank you,
Tatiana

[Antonio Stoilkov]

Hello Tatiana,

I have modified the code in order to cover the described scenario. You could take a look if the code will fix the currently experienced behavior.

function getElementsByClassName(className, tag, elm)
{
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all) ? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for (var i = 0; i < length; i++)
    {
        current = elements[i];
        if (testClass.test(current.className))
        {
            returnElements.push(current);
        }
    }
    return returnElements;
}

function pageLoad()
{
    setTimeout(function ()
    {
        var headers = getElementsByClassName("rgHeader", "th", document.body);
        for (var i = 0; i < headers.length; i++)
        {
            var header = headers[i];
            var ascSort = getElementsByClassName("rgSortAsc", "input", header);
            var descSort = getElementsByClassName("rgSortDesc", "input", header);

            var startIndex = header.className.indexOf("rgSorted") === -1 ? 0 : 1;
            for (var i = startIndex; i < ascSort.length; i++)
            {
                ascSort[i].parentNode.removeChild(ascSort[i]);
            }
            for (var i = startIndex; i < descSort.length; i++)
            {
                descSort[i].parentNode.removeChild(descSort[i]);
            }
        }
    }, 100);
}

Regards,
Antonio Stoilkov
the Telerik team

[Tatiana]

Hi Antonio,

I just examined your code and noticed that in the pageLoad() function you have the loops with i inside the loop with i. I am wondering if it suppose to be like that (I am not sure this is going to work).

Thank you,

Tatiana

[Tatiana]

Hi Antonio,

I was able to modify your pageLoad() function to handle all of the situations.
Here is the updated code:

function pageLoad() {
     setTimeout(function () {
          var headers = getElementsByClassName("rgHeader", "th", document.body);
          for (var i = 0; i < headers.length; i++) {
               var ascSort = getElementsByClassName("rgSortAsc", "input", headers[i]);
               var descSort = getElementsByClassName("rgSortDesc", "input", headers[i]);
               if (ascSort.length > 1) ascSort[1].parentNode.removeChild(ascSort[1]);
               if (descSort.length > 1) {
                    descSort[1].parentNode.removeChild(descSort[1]);
                    if (ascSort.length == 1) ascSort[0].parentNode.removeChild(ascSort[0]);
               }
          }
     }, 100);
}

Your code was very helpful. Thank you very much!!

However, my question is right now if it was expacted behaviour (double sorting icons) or not. If not, would it be fixed with the next version of the controls. Currently I am using ASP.NET AJAX Q3 2011 with the .NET Framework 4.5.

Thank you,

Tatiana

[Antonio Stoilkov]

Hello Tatiana,

The experienced behavior is not expected and should be investigated. However, we have been not able to replicate the issue on our side. In order to further investigate you could open a formal ticket and attach a modified project which shows the unwanted behavior.

All the best,
Antonio Stoilkov
the Telerik team