RadGrid Custom Sort - Jquery

[Sub]

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

[Sub]

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.

[Bruno]

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>

[Sub]

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

[Bruno]

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

[vinitha]

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.

[BaiH]

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

[Anand]

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 !