This is a migrated thread and some comments may be shown as answers.

RadGrid Custom Sort - Jquery

7 Answers 238 Views
UI for ASP.NET AJAX in ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.
Sub
Top achievements
Rank 1
Sub asked on 05 May 2009, 09:23 PM
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

7 Answers, 1 is accepted

Sort by
0
Sub
Top achievements
Rank 1
answered on 06 May 2009, 07:09 PM
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.

0
Bruno
Top achievements
Rank 2
answered on 08 May 2009, 01:53 PM
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> 

0
Sub
Top achievements
Rank 1
answered on 08 May 2009, 02:01 PM

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

0
Bruno
Top achievements
Rank 2
answered on 11 May 2009, 02:11 PM
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


0
vinitha
Top achievements
Rank 1
answered on 04 Dec 2009, 04:43 AM
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.
0
BaiH
Top achievements
Rank 1
answered on 07 Dec 2009, 03:09 PM
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
0
Anand
Top achievements
Rank 1
answered on 15 Mar 2013, 08:52 PM
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 !
Tags
UI for ASP.NET AJAX in ASP.NET MVC
Asked by
Sub
Top achievements
Rank 1
Answers by
Sub
Top achievements
Rank 1
Bruno
Top achievements
Rank 2
vinitha
Top achievements
Rank 1
BaiH
Top achievements
Rank 1
Anand
Top achievements
Rank 1
Share this question
or