This is a migrated thread and some comments may be shown as answers.

Filter Clearing Immediately After It Is Applied

2 Answers 109 Views

ClientDataSource

This is a migrated thread and some comments may be shown as answers.

foxdevel asked on 01 Sep 2016, 10:00 PM

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 Answers, 1 is accepted

answered on 01 Sep 2016, 10:16 PM

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>

Accepted

answered on 06 Sep 2016, 12:02 PM

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