RadGrid Custom Sort - Jquery

Thread is closed for posting
8 posts, 0 answers
  1. Sub
    Sub avatar
    91 posts
    Member since:
    Nov 2007

    Posted 05 May 2009 Link to this post

    Hi,

    I am setting the datasource in the client side using JQuery to get the data from server. I want to use custom sorting.

     

    function Grid_Command(sender, args) {

     

    args.set_cancel(

     

    true);/

     

     

    args.get_commandName(), args.get_commandArgument());
    //Do Sorting with JQuery
    }

    1. How do I know the sorting mode in client side (asc, desc or no sort..)?

    2. Also I want to display custom sort image next to the coumn header. How do I do that?

    Thanks

  2. Sub
    Sub avatar
    91 posts
    Member since:
    Nov 2007

    Posted 06 May 2009 Link to this post

    I figured out the solution for the first problem as follows:

     

    var sortExpressions = sender.get_masterTableView().get_sortExpressions();

     

     

    //obtain the values from the GridSortExpression properties

     

     

    if (sortExpressions.get_count() > 0) {

     

     

    var expression = sortExpressions._array[0];

     

     

    var fieldName = expression._fieldName;

     

     

    var sortOrder = expression._sortOrder;

     

     

    // var fieldName = expression.get_fieldName();

     

     

    //var sortOrder = expression.get_sortOrder();

     

    }


     Regarding the custom sort icon, I want to display it next to the coumn header in the client side. How do I do that? It can be done on the server side in OnItemCreated event. But I want to set it on the client side. Please let me know.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bruno
    Bruno avatar
    105 posts
    Member since:
    Mar 2008

    Posted 08 May 2009 Link to this post

    I have similar problem and managed to solve it by overriding the sort buttons css class similar to the following:

    <style type="text/css"
        #[YOURRADGRIDID].rgSortAsc 
        { 
            background-image:url(yourAscImage.gif) !important; 
        } 
        #[YOURRADGRIDID] .rgSortDesc 
        { 
            background-image:url(yourDescImage.gif) !important; 
        } 
    </style> 

  5. Sub
    Sub avatar
    91 posts
    Member since:
    Nov 2007

    Posted 08 May 2009 Link to this post

    Thank you. Also I need to show one column already in a ASC sort order and want to show the ASC icon right after loading the grid. How do I do that?

     

    Thanks

  6. Bruno
    Bruno avatar
    105 posts
    Member since:
    Mar 2008

    Posted 11 May 2009 Link to this post

    You may try executing the sort command on initial load and manually set the sort icon; here is some sample code:

    <script type="text/javascript"
                function command(sender, args) { 
                    PageMethods.GetData(sender.get_masterTableView().get_sortExpressions().toString(), onSuccess); 
                    args.set_cancel(true); 
                } 
                function onSuccess(result) { 
                    $find("<%=RadGrid1.ClientID %>").get_masterTableView().set_dataSource(result); 
                    $find("<%=RadGrid1.ClientID %>").get_masterTableView().dataBind(); 
                } 
                function pageLoad() {                 
                    $find("<%=RadGrid1.ClientID %>").get_masterTableView().sort("ID DESC"); 
                    setImageIcons("ID", Telerik.Web.UI.GridSortOrder.Descending); 
                } 
     
                function setImageIcons(dataFieldName, sortOrder) { 
                    var tableView = $find("<%=RadGrid1.ClientID %>").get_masterTableView(); 
                    var id1 = String.format("{0}__{1}__SortAsc", tableView.get_id(), dataFieldName); 
                    var id2 = String.format("{0}__{1}__SortDesc", tableView.get_id(), dataFieldName); 
     
                    if (sortOrder == Telerik.Web.UI.GridSortOrder.None) { 
                        if ($get(id1)) { 
                            $get(id1).style.display = "none"
                        } 
                        if ($get(id2)) { 
                            $get(id2).style.display = "none"
                        } 
                    } else if (sortOrder == Telerik.Web.UI.GridSortOrder.Ascending) { 
                        if ($get(id1)) { 
                            $get(id1).style.display = ""
                        } 
                        if ($get(id2)) { 
                            $get(id2).style.display = "none"
                        } 
                    } 
                    else if (sortOrder == Telerik.Web.UI.GridSortOrder.Descending) { 
                        if ($get(id1)) { 
                            $get(id1).style.display = "none"
                        } 
                        if ($get(id2)) { 
                            $get(id2).style.display = ""
                        } 
                    } 
                } 
            </script> 

    --Bruno


  7. vinitha
    vinitha avatar
    77 posts
    Member since:
    Aug 2007

    Posted 03 Dec 2009 Link to this post

    Hi,

    Dont we have any other simple way to display the sort icon by default on any specific column? I am binding data calling a webservice using databing event.

    I am able to set the sort field but the sort icon is not shown.

    Please do provide inputs to resolve this.

    Thanks in advance.
  8. BaiH
    BaiH avatar
    83 posts
    Member since:
    Aug 2008

    Posted 07 Dec 2009 Link to this post

    vinitha,

    I think telerik guys have fixed the issue with the sort icons. You can try something like this to set initial sorting:
              
                function pageLoad(sender, args) { 
                    $find("<%=RadGrid1.ClientID %>").get_masterTableView().sort("ID DESC"); 
                }  

    But you may need to update to latest version though.

    --BH
  9. Anand
    Anand avatar
    1 posts
    Member since:
    Mar 2013

    Posted 15 Mar 2013 Link to this post

    Hi Bruno,
    can you tell me how to avoid multi column selecting.
    This code, i have tried and it allows one column ASC and then  you can select the other DESC.
    help me !
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017