Filtering on Radgrid on Client Side

[Chintan]

Hello Team,

I am having  simple Radgrid. which I am binding with JSON object  like below :

$(document).ready(function () {
            $(window).load(function () {
                var JSONdata = [{ "ID": 1, "FirstName": "Chintan", "MiddleName": "Mukesh", "SurName": "Dave" }, { "ID": 2, "FirstName": "Pratik", "MiddleName": "Mukesh", "SurName": "Dave" }, { "ID": 3, "FirstName": "Devang", "MiddleName": "Subhash", "SurName": "Trivedi" }]
                var tableView = $find("<%=form1.FindControl("gridClientSide").ClientID%>").get_masterTableView();
                 tableView.set_dataSource(JSONdata);
                 tableView.dataBind();
            });
        });

Grid Code :

<telerik:RadGrid  ID="gridClientSide" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true">
                <MasterTableView TableLayout="fixed">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" AllowFiltering="true" UniqueName="ID"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" AllowFiltering="true"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="MiddleName" HeaderText="Middle Name" AllowFiltering="true" ></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SurName" HeaderText="Sur Name" AllowFiltering="true"></telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnCommand="RaiseCommand"/>
                </ClientSettings>
            </telerik:RadGrid>

function RaiseCommand(sender, args) {
           
            args.set_cancel(true);

            sender.get_masterTableView().filter(sender.get_masterTableView().get_filterExpressions().getItem(0).FieldName, sender.get_masterTableView().get_filterExpressions().getItem(0).FieldValue, sender.get_masterTableView().get_filterExpressions().getItem(0).FilterFunction, true);

//sender.rebind();
        }

 

In RaiseCommand function ,  I am trying to filter radgrid by setting  filter expression nothing error occurs but no change applies in rows of grid after execution of this function.

 

Please help....Please find attached filed

[Konstantin Dikov]

Hello Chintan,

The approach that you are trying to use will not work, because such data operations are not supported with such binding. Furthermore, you are calling the filter method of the masterTableView, which will fire in an endless loop the OnCommand event of the RadGrid. I would recommend that you take a look at the implementation in the following online demo, where the data is provided to the RadGrid after each operation:

• http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/programmatic/defaultcs.aspx

You could also take a look at the RadClientDataSource integration:

• http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx

Regards,
Konstantin Dikov
Telerik by Progress