Client-Side Sorting

[Gianni DeRosa]

I am trying to use the ClientEvent OnCommand to develop custom client-side sorting based on the data type of the column being sorted.  How do I actually accomplish this?  Firing sender.get_masterTableView().sort(mysortexpression); causes an endless loop since the OnCommand event is fired.  Here is my code

function

 

SORT(sender, args) {

 

args.set_cancel(

true); //cancels postback

 

 

if (args.get_commandName() == "Sort") {

 

var

 

sortexp = new Telerik.Web.UI.GridSortExpression();

 

sortexp.set_fieldName(args.get_commandArgument());

sortexp.set_sortOrder(2);

 

 

sender.get_masterTableView().sort(sortexp

);//this causes an endless loop

 

 

}

Thanks

 

[Pavlina]

Hi Gianni,

With client side databinding, the sort command will trigger a client side event, which would allow you to pass the correct data. The following online example contains a fully functional implementation of the functionality in question, including sorting:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Roatin Marth]

Pavlina, the link you posted does not do client-side sorting. It issues a web service method call, which returns new rows in sorted order.

Gianni, the grid does not support pure client-side sorting. You have to implement it yourself. You have a start there by listening for the "sort" command. The next step would be to get the data items of the grid, sort them, then rebind the grid to it via dataBind() on the master table view.

[Gianni DeRosa]

_onCommand: function(sender, args) {
        this._refreshCount = args.get_commandName() == "RebindGrid";

        //Numeric Sorting Fix
        if (args.get_commandName() == "Sort") {
            var mt = sender.get_masterTableView();
            var columns = mt.get_columns();
            var dtype;
            var sortExpressions = sender.get_masterTableView().get_sortExpressions();
            for (var x = 0; x < columns.length; x++) {
                dtype = columns[x]._data.DataTypeName;
                if ((columns[x]._data.DataField == args.get_commandArgument()) && (columns[x]._data.ColumnType == "GridBoundColumn") && (dtype == "System.Double" || dtype == "System.Decimal" || dtype == "System.Int16" || dtype == "System.Int32" || dtype == "System.Int64")) {
                    var sortExp = new Telerik.Web.UI.GridSortExpression();
                    sortExp.set_fieldName(args.get_commandArgument());
                    sortExpressions = sender.get_masterTableView().get_sortExpressions();
                    //image fix
                    var id1 = String.format("{0}__{1}__SortAsc", mt.get_id(), args.get_commandArgument());
                    var id2 = String.format("{0}__{1}__SortDesc", mt.get_id(), args.get_commandArgument());
                    //
                    if (sortExpressions.get_count() == 0) {
                        sortExp.set_sortOrder(1);
                        //image fix
                        if ($get(id1)) $get(id1).style.display = "";
                        if ($get(id2)) $get(id2).style.display = "none";
                    }
                    else {
                        var expression = sortExpressions._array[0];
                        var sortOrder = expression.get_sortOrder();
                        if (sortOrder == 2) {
                            sortExp.set_sortOrder(0);
                            //image fix
                            if ($get(id1)) $get(id1).style.display = "none";
                            if ($get(id2)) $get(id2).style.display = "none";
                        }
                        if (sortOrder == 1) {
                            sortExp.set_sortOrder(2);
                            //image fix
                            if ($get(id1)) $get(id1).style.display = "none";
                            if ($get(id2)) $get(id2).style.display = "";
                        }
                    }
                    sortExpressions.clear();
                    sortExpressions.add(sortExp);
                }
            }
        }
        //

        this._dataBind();
    },

I have gotten it to work by checking the command name when onCommand is fired.  From that point I am getting the Table View and looping through each column to determine the datatype - if it is numeric then I am sorting by Desc by default.  The complete code is above for reference.

[Pavlina]

Hi Gianni,

Thank you for sharing your solution in this forum thread - thus you can help other community members who are trying to implement similar solution.

Please, do not hesitate to contact us if other questions or problems arise.

Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[isaac]

I'm trying the same thing and I was following your example to get my rad grid to sort on the client side. My JavaScript function isn't working 100 percent. I don't understand what the first line is doing, and the last line fails. The grid is originally bound on the server side but I want to sort on the server side. Here is my function.

            function Sort(sender, args) {
                this._refreshCount = args.get_commandName() == "RebindGrid";

                var tableView = sender.get_masterTableView();
                var sortExpressions = tableView.get_sortExpressions();
                var fieldName = sortExpressions.getItem(0).get_fieldName();
                var sortOrder = sortExpressions.getItem(0).get_sortOrder();
                var newSortExpression = new Telerik.Web.UI.GridSortExpression();
                newSortExpression.set_fieldName(fieldName);

                if (sortExpressions.get_count() > 0) {
                    newSortExpression.set_sortOrder(sortOrder)
                }

                sortExpressions.clear();
                sortExpressions.add(newSortExpression);

                this._dataBind();
            }

Can you help me understand why this fails?

[Gianni DeRosa]

Isaac:

My apologies - the first and last lines of code you are referring to are not needed in your situation.

The first line (this._refreshCount = args.get_commandName() == "RebindGrid";) is for a custom pager that is implemented on my Grids and the last line(this._dataBind();) refers to a custom Databind function.  You may have to replace this._dataBind(); to sender.dataBind() - not entirely sure - but you will have to rebind based on your sort.

[agasthya]

Hi,

Can you let me know the code to sort the grid items in ascending or descending order on click event of Sort buttons of gridbound column.

I have currently written a code as follows which sort the elements in array but the dataBind doesn't happen and the sorted array doesn't reflect in Grid.

fyi, I am using clientside coding with simple databinding for my application.

Code:

if (args.get_commandName() == "Sort")
{
var sortExpressions = sender.get_masterTableView().get_sortExpressions();
var sortVal = sortExpressions.toString();
var masterTable = sender.get_masterTableView();
if (sortVal != "")
{
var items = sender.get_masterTableView().get_dataItems()
var fieldName = sortExpressions.getItem(0).get_fieldName();
var sortOrder = sortExpressions.getItem(0).get_sortOrder();
if (sortOrder == 1) {
items.sort(function (a, b)
{
if (b._dataItem.ResourceName.toUpperCase() > a._dataItem.ResourceName.toUpperCase())
{
return -1
//ascending
}
if (b._dataItem.ResourceName.toUpperCase() < a._dataItem.ResourceName.toUpperCase())
{
return 1
//ascending
}
return 0
})
}
else if (sortOrder == 2)
{
items.sort(function (a, b)
{
if (b._dataItem.ResourceName.toUpperCase() < a._dataItem.ResourceName.toUpperCase())
{
//descending
return -1
}
if (b._dataItem.ResourceName.toUpperCase() > a._dataItem.ResourceName.toUpperCase())
{
//descending
return 1
}
return 0
})
}
var test = []
for (i = 0; i < items.length; i++)
{
test.push(items[i]._dataItem)
}
masterTable.set_virtualItemCount(items.length);
masterTable.set_dataSource(test)
masterTable.dataBind()

}