Telerik MVC Grid. Groupin' on the client

Question

Telerik Experts, I need your help guys!

In my grid, data gets bound on the client, through .ClientEvents .OnDataBinding. I just call grid.dataBind(customData). Data gets displayed, but grouping, filtering, sorting don't work. Is it possible to group or filter stuff after grid.dataBind call?

Right now it just moves my columns around and doesn't do any grouping. Sorting and filtering fails also.

Can you show me a simple example of grouping without any server calls please?

Answer 1

You may want to consider using the Operation Mode feature, which was released in the recent Q2 2011 release.

Client operation mode - This new mode allows operations like sorting, paging, filtering or grouping to be performed purely on the client, by making a single initial call to the server to retrieve all data.

Client Mode Implementation:

    Html.Telerik().Grid(Model)
    .Name("YourGrid")
    .DataBinding(dataBinding => dataBinding
         .Ajax()
               .OperationMode(GridOperationMode.Client) // Set to Client
               .Select("Select", "Home")
    )

Otherwise, to manually group using javascript, as follows:

<script type='text/javascript'>

function yourGrid_onDataBinding(e){

    //Grabs your Grid
    var yourGrid = $("#yourGrid").data("tGrid");

    //Removes any existing groupings
    yourGrid.groups = [];        

    //Ensure the column you wish to group by is EXACTLY as it appears in the Grid
    yourGrid.group("yourColumnName"); 
}

</script>

Here are a few useful threads from the Telerik MVC forum that might help you solve your issue if this isn't a viable solution for you:

Client-Side Grouping | Has a great deal of code for client-side grouping operations

Client-Side dataBinding | More client-side code, talks about ClientSideGroupHeaderTemplates

Grouping with OperationMode.Client | If you have any issues with OperationMode.Client