Filter Clearing Immediately After It Is Applied

3 posts, 1 answers
  1. foxdevel
    foxdevel avatar
    4 posts
    Member since:
    Jul 2007

    Posted 01 Sep Link to this post

    I have filtered my RadClientDataSource according to the information available in the docs.  The filter works momentarily.  When my button is clicked, I can see for a single moment that the grid displays the 1 record matching the filter criteria then all the rows come back.  I have tried calling the javascript function from a link and a button (as is shown in the code below).  Any ideas?

     

    Here is the code for my page.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testControl.aspx.vb" Inherits="virtuePortal2016.testControl" %>
    <!DOCTYPE html>
    <html class="no-js" lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Foundation</title>
        <link rel="stylesheet" href="stylesheets/app.css" />
        <script src="bower_components/modernizr/modernizr.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
           
            <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="True" AutoSync="True">
                <DataSource>
                    <WebServiceDataSourceSettings>
                        <Select Url="http://virtuepb.ourvoiceusa.com/api/catalogItem" RequestType="Get" />
                    </WebServiceDataSourceSettings>
                </DataSource>
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField FieldName="Qty" />
                        <telerik:ClientDataSourceModelField FieldName="ProductKey" />
                    </Model>
                </Schema>
            </telerik:RadClientDataSource>
            <input type="button" onclick="applyFilter()" value="Filter" />
            <telerik:RadGrid runat="server" ID="RadGrid1" ClientDataSourceID="RadClientDataSource1"
                ResolvedRenderMode="Classic" Width="306px" Skin="Metro">
                <GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
                <MasterTableView DataKeyNames="ProductKey">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ProductKey" HeaderText="ProductKey" UniqueName="ProductKey">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Qty" HeaderText="Qty" UniqueName="Qty">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
                    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                <script type="text/javascript">
                    function applyFilter() {
                        var dataSource = $find('<%= RadClientDataSource1.ClientID %>');
                        
                        
                        dataSource.get_filterExpressions().clear();
                        dataSource.get_filterExpressions().add({ fieldName: "ProductKey", value: "417", operator: Telerik.Web.UI.ClientDataSource.FilterOperator.EqualTo });
                        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                        masterTable.rebind();
                        alert(dataSource.get_filterExpressions().get_count());
                        return false;
                    }
                </script>
            </telerik:RadCodeBlock>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="bower_components/foundation/js/foundation.min.js"></script>
            <script src="bower_components/foundation/js/foundation/foundation.alert.js"></script>
            <script src="js/app.js"></script>
        </form>
    </body>
    </html>

  2. foxdevel
    foxdevel avatar
    4 posts
    Member since:
    Jul 2007

    Posted 01 Sep in reply to foxdevel Link to this post

    Sorry my previous post contained the wrong javascript, this is the proper version.  

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testControl.aspx.vb" Inherits="virtuePortal2016.testControl" %>
     
     
    <!DOCTYPE html>
     
    <html class="no-js" lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Foundation</title>
        <link rel="stylesheet" href="stylesheets/app.css" />
        <script src="bower_components/modernizr/modernizr.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            
     
            <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="True" AutoSync="True">
                <DataSource>
                    <WebServiceDataSourceSettings>
                        <Select Url="http://virtuepb.ourvoiceusa.com/api/catalogItem" RequestType="Get" />
                    </WebServiceDataSourceSettings>
                </DataSource>
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField FieldName="Qty" />
                        <telerik:ClientDataSourceModelField FieldName="ProductKey" />
                    </Model>
                </Schema>
            </telerik:RadClientDataSource>
     
            <input type="button" onclick="applyFilter()" value="Filter" />
            <telerik:RadGrid runat="server" ID="RadGrid1" ClientDataSourceID="RadClientDataSource1"
                ResolvedRenderMode="Classic" Width="306px" Skin="Metro">
                <GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
                <MasterTableView DataKeyNames="ProductKey">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ProductKey" HeaderText="ProductKey" UniqueName="ProductKey">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Qty" HeaderText="Qty" UniqueName="Qty">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
                    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                <script type="text/javascript">
                    function applyFilter() {
                        var dataSource = $find('<%= RadClientDataSource1.ClientID %>');
                         
                         
                        dataSource.get_filterExpressions().clear();
                        dataSource.get_filterExpressions().add({ fieldName: "ProductKey", value: "417", operator: Telerik.Web.UI.ClientDataSource.FilterOperator.EqualTo });
                        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                        masterTable.rebind();
     
                    }
                </script>
     
            </telerik:RadCodeBlock>
     
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="bower_components/foundation/js/foundation.min.js"></script>
            <script src="bower_components/foundation/js/foundation/foundation.alert.js"></script>
            <script src="js/app.js"></script>
        </form>
     
    </body>
    </html>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 06 Sep Link to this post

    Hello,

    Since the data operations in this scenario will be initiated by the RadGrid and not by the RadClientDataSource, you need to apply the filter to the grid itself:
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                <script type="text/javascript">
                    function applyFilter() {
                        var masterTable = grid.get_masterTableView();
                        masterTable.filter("ProductKey", 417, Telerik.Web.UI.GridFilterFunction.EqualTo);
                    }
                </script>
            </telerik:RadCodeBlock>

    The main issue with the other approach is that once you call the rebind method of the MasterTableView, the filter expressions from the RadGrid will be passed to the RadClientDataSource, which is causing the behavior that you are describing.


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
Back to Top