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

6 posts, 0 answers
  1. Jes
    Jes avatar
    11 posts
    Member since:
    Mar 2016

    Posted 12 Jul Link to this post

    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);
            }
        }
    }
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 13 Jul Link to this post

    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.


    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.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jes
    Jes avatar
    11 posts
    Member since:
    Mar 2016

    Posted 13 Jul Link to this post

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

    Thank you very much for clearing things up.
  5. Jes
    Jes avatar
    11 posts
    Member since:
    Mar 2016

    Posted 13 Jul Link to this post

    One final clarification, can I use JSON to bind data to the client and still filter radgrid without postback?
  6. Jes
    Jes avatar
    11 posts
    Member since:
    Mar 2016

    Posted 13 Jul Link to this post

    One final clarification, can I use JSON data to bind my radgrid and can still filter data without postback?
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 15 Jul Link to this post

    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.


    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.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017