Client-Side Sorting

7 posts, 0 answers
  1. Gianni DeRosa
    Gianni DeRosa avatar
    3 posts
    Member since:
    Jan 2010

    Posted 08 Jan 2010 Link to this post

    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

     

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 12 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 12 Jan 2010 Link to this post

    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.


  5. Gianni DeRosa
    Gianni DeRosa avatar
    3 posts
    Member since:
    Jan 2010

    Posted 12 Jan 2010 Link to this post

    _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.
  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Jan 2010 Link to this post

    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.
  7. isaac
    isaac avatar
    4 posts
    Member since:
    Jun 2009

    Posted 02 Feb 2010 Link to this post

    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?
  8. Gianni DeRosa
    Gianni DeRosa avatar
    3 posts
    Member since:
    Jan 2010

    Posted 02 Feb 2010 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017