[Solved] How can I sort RadGrid clientside on specific column.

[Harshit]

I have a radgrid on page and i bind data on serverside. Bydefault sorting is set to false on grid. But on click of a checkbox on a container page, I want to sort grid data on specific column.  for example below, on click of a checkbox I want to sort my data as Active customer on top or Inactive customers on top.  How would I do that on clientside.? Can I enable sorting on individual column only?

ID	Name	Total Orders	Active
1	Customer 1	9	TRUE
2	Customer 2	11	FALSE
3	Customer 3	2	FALSE
4	Customer 4	20	TRUE
5	Customer 5	31	TRUE

[Shinu]

Hello Harshit,

You can enable client side sorting  using the following approach.
CS:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns)
    {
        foreach (GridHeaderItem header in RadGrid1.MasterTableView.GetItems(GridItemType.Header))
         {
             header[col.UniqueName].Attributes.Add("OnClick", "return SortColumn('"+ col.UniqueName+ "');");
         }
     }
}

JS:

<script type="text/javascript">
 function SortColumn(ColumnName)
 {
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    masterTable.sort(ColumnName);
}
</script>

Thanks,
Shinu.

[Prathibarani]

Hi,
I used your code and clicked on one of the column headers to sort. Since nothing is implemented in sort event and need datasource events, nothing is displayed on page. I am binding grid in page load event and not postback and when ever I require binding. Please let me know how to do it.

Thanks,
Prathiba

[Eyup]

Hello Prathiba,

Please note that using DataBind() is not recommended. Performing complex grid operations such as Inserting, Deleting, Updating, Hierarchy relations, grouping, Paging, Sorting, Filtering require accommodating appropriate database operations.  Therefore, we suggest you to avoid Simple Databinding and strongly recommend the use of more advanced databinding methods, which automatically handle the aforementioned functions:
Declarative DataSource
Advanced Data Binding

Hope this helps.

Kind regards,
Eyup
the Telerik team