Telerik MVC Grid. Groupin' on the client

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 a开发者_C百科ny grouping. Sorting and filtering fails also.

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

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

As I know you couldn't do it without any hit to the server again. But you can do it by Ajax throw JavaScript.

All you need to do is and these methods will rebind your grid :

// For filtering
grid.filter("propName~eq~youValue"); 

// For grouping 
grid.group("column Title"); 

And take care this is column title not property name so if your property is "CustomerName" and your column title is "Customer Name" the you should pass the column title.

Anyway this will make an Ajax call to the controller to rebind Grid again.

Update:

Your grid should set .EnableCustomBinding(true) and you should decorate controller method that get your Ajax grid with [GridAction(EnableCustomBinding = true)] Attribute.

Hope this helped

I'm doing the exact same thing in my grid. I'm using 2011.2.629, jQuery 1.6.2. I'm actually doing this for external filtering--so I don't use the built in filtering--but grouping and sorting both work for me.

We need some code, man.

As someone else mentioned, make sure you have the following set:

dataBinding.Ajax().OperationMode(GridOperationMode.Client)

Is your grid bound at runtime? If not, bind it to an empty viewModel that's the same as the one you're using in the dataBind(). Also, how are you binding to the new list? It could be something in your onDataBinding().