Why does my RadGrid trigger page postback upon filtering from client-side?

[Jes]

Why does my RadGrid trigger page postback upon filtering from client-side?
I populate the data from code-behind and I use JS to trigger the filter by calling a function.
The problem is present even if I use filtering through the RadGrid's filtering controls to test.

Here is my code:

HTML:

<telerik:RadGrid ID="AssetGrid" runat="server" CssClass="asset-grid"

                        Width="100%" Height="100%"

                        OnNeedDataSource="AssetGrid_NeedDataSource">

                        <PagerStyle Position="Bottom" PageSizeControlType="RadComboBox" Mode="NextPrevAndNumeric" />

                        <FilterMenu EnableImageSprites="False" />

                        <ClientSettings AllowColumnHide="True" EnableAlternatingItems="false"

                            EnableRowHoverStyle="true">

                            <Scrolling AllowScroll="true" UseStaticHeaders="true" />

                            <Selecting AllowRowSelect="true" />

                        </ClientSettings>

                        <MasterTableView AllowPaging="true" PageSize="20" AllowFilteringByColumn="true" AutoGenerateColumns="false" DataKeyNames="id, name" TableLayout="Fixed" ClientDataKeyNames="id, name">

                            <Columns>

                                <telerik:GridBoundColumn DataField="id" DataType="System.Int32" SortExpression="id" UniqueName="id" Visible="false" />

                                <telerik:GridBoundColumn DataField="name" DataType="System.Int32" SortExpression="title" UniqueName="title" AutoPostBackOnFilter="false" Visible="false" />

                                <telerik:GridBoundColumn DataField="categoriesid" DataType="System.String" SortExpression="categoriesid" UniqueName="categoriesid" Visible="false" />

                                <telerik:GridBoundColumn DataField="primarycategoryid" DataType="System.String" SortExpression="primarycategoryid" UniqueName="primarycategoryid" AutoPostBackOnFilter="false" Visible="true" Display="false" />

                                <telerik:GridTemplateColumn UniqueName="description">

                                    <ItemStyle

                                        VerticalAlign="Top" HorizontalAlign="Left"

                                        CssClass="data-item" />

                                    <ItemTemplate>

                                        <table class="font-roboto data-item-table" style="table-layout: fixed; width: 100%; pointer-events: none;">

                                            <tr>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                                <td colspan="1" style="width: 8.33333333333%;"></td>

                                            </tr>

                                            <tr>

                                                <td colspan="2" style='<%# "background-color:" + c.ParseColorIntToRGB(Eval("color").ToString()) + ";" %>'>

                                                    <%# Eval("statusabbrev").ToString().ToUpper() %>

                                                </td>

                                                <td colspan="10">

                                                    <%# Eval("name") %>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td colspan="2" rowspan="4">

                                                    <%--<video preload="metadata" style="min-height: inherit; width: 100%; height: 100%; max-width: 100%; max-height: 100%;" onclick="if (!this.paused) { this.pause(); } else { this.play(); };" ondblclick="this.pause(); $(this).fadeOut(500, function() { this.load(); $(this).fadeIn(); });">

                                                        <source src='<%# Eval("filepath") %>' type="video/mp4">

                                                    </video>--%>

                                                </td>

                                                <td colspan="2">

                                                    Category

                                                </td>

                                                <td colspan="3">

                                                    <%# Eval("primarycategory") %>

                                                </td>

                                                <td colspan="2">

                                                    ID

                                                </td>

                                                <td colspan="3">

                                                    <%# Eval("itemcode") %>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td colspan="2">

                                                    Genre

                                                </td>

                                                <td colspan="3">

                                                    <%# Eval("ea_genre") %>

                                                </td>

                                                <td colspan="2">

                                                    Duration

                                                </td>

                                                <td colspan="3">

                                                    <%# Eval("title_duration") %>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td colspan="2">

                                                    Creator

                                                </td>

                                                <td colspan="3">

                                                    <%# Eval("creator") %>

                                                </td>

                                                <td colspan="2">

                                                    Updated By

                                                </td>

                                                <td colspan="3">

                                                    <%# Eval("title_last_updated_by") %>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td colspan="2">

                                                    Created

                                                </td>

                                                <td colspan="3">

                                                    <%# String.Format("MMMM d, yyyy h:mm:ss tt", Eval("created")) %>

                                                </td>

                                                <td colspan="2">

                                                    Updated

                                                </td>

                                                <td colspan="3">

                                                    <%# String.Format("MMMM d, yyyy h:mm:ss tt", Eval("title_last_update")) %>

                                                </td>

                                            </tr>

                                        </table>

                                    </ItemTemplate>

                                </telerik:GridTemplateColumn>

                            </Columns>

                        </MasterTableView>

                    </telerik:RadGrid>

 

JavaScript:

function filterGrid(value, gridClientID, columnname, operator, args) {
    if (operator == undefined || operator == '' || operator == null) {
        operator = 'EqualTo'
    }
    if (columnname == undefined || columnname == '' || columnname == null) {
        return;
    }

    function AddFilterExpression(grid, dataField, filterFunctionName, filterValue) {
        var master = grid.get_masterTableView();
        master.filter(dataField, filterValue, filterFunctionName);
    }
    var grid;
    if (gridClientID == null || gridClientID == undefined || gridClientID == '') {
        grid = $find('<%=AssetGrid.ClientID %>');
    }
    else {
        grid = $find(gridClientID);
    }

    var noValue = false;
    if (value == null || value == undefined || value == '') {
        noValue = true;
    }
    if (noValue) {
        if (args == null || args == undefined || args == '') {
            return;
        }
    }

    if (grid != null) {
        if (noValue) {
            value = args.get_node().get_value();
            args.set_cancel(false);
        }
        AddFilterExpression(grid, columnname, operator, value);
    }
    else {
        if (noValue) {
            args.set_cancel(true);
        }
    }
}

[Viktor Tachev]

Hello Jes,

I have examined the code and noticed that the RadGrid control is data-bound on the server. In that case the control will trigger postback on every sort, page, filter operation. This is necessary as the data is requested by the grid and the NeedDataSource event is raised.

Check out the following article that describes the event sequence for RadGrid in different scenarios.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/control-lifecycle/event-sequence

If you would like to use sorting/filtering/paging operations on the client without postback you should bind RadGrid on the client. Please examine the client-side binding examples for additional information.

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

Regards,
Viktor Tachev
Telerik by Progress

[Jes]

I tried your solution and it's working on my end.

Thank you very much for clearing things up.

[Jes]

One final clarification, can I use JSON to bind data to the client and still filter radgrid without postback?

[Jes]

One final clarification, can I use JSON data to bind my radgrid and can still filter data without postback?

[Viktor Tachev]

Hello,

If you use client-side binding for RadGrid you are essentially binding it to JSON. This is what the RadClientDataSource will pass to the grid. If you would like to customize the data you can use the OnDataParse event for RadClientDataSource.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/clientdatasource/client-side-programming/events

Alternatively, you can use programmatic client-side binding for the grid and pass the data. However, with that approach you would not be able to modify the data in the grid.

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

Regards,
Viktor Tachev
Telerik by Progress