This example demonstrates how to turn off the automatic auto filter row processing and perform the filtering of all rows simultaneously by a button click. Perform the following steps to implement this scenario:
1) Remove the standard client-side ValueChanged and KeyDown event handlers for the filter row editors and create the custom handler. Use the ASPxClientEvent.ClearHandlers and ASPxClientEvent.AddHandler methods for this purpose:
[C#]protectedvoidgv_AutoFilterCellEditorInitialize(objectsender,DevExpress.Web.ASPxGridView.ASPxGridViewEditorEventArgse){ASPxTextBoxeditor=e.EditorasASPxTextBox;if(editor!=null){editor.ClientSideEvents.Init="function(s, e) { s.ValueChanged.ClearHandlers(); s.KeyDown.ClearHandlers(); s.KeyDown.AddHandler( function(s, e) { if(e.htmlEvent.keyCode ==13) ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);} ); }";editor.ClientInstanceName="filterRow_"+e.Column.FieldName;}}
[VB.NET]ProtectedSub gv_AutoFilterCellEditorInitialize(ByVal sender AsObject, ByVal e As DevExpress.Web.ASPxGridView.ASPxGridViewEditorEventArgs)Dim editor As ASPxTextBox = TryCast(e.Editor, ASPxTextBox)If editor IsNot NothingThen editor.ClientSideEvents.Init = "function(s, e) { s.ValueChanged.ClearHandlers(); s.KeyDown.ClearHandlers(); s.KeyDown.AddHandler( function(s, e) { if(e.htmlEvent.keyCode ==13) ASPxClientUtils.PreventEventAndBubble(e.htmlEvent); } ) ; } " editor.ClientInstanceName = "filterRow_"& e.Column.FieldNameEndIfEndSub
2) Now, when automatic filter is processing is turned off, it is necessary to perform filtering manually via the ASPxClientGridView.ApplyFilter method:
[JScript]function ApplyFilter(){var filterCondition = "";var andOperator = "";for(var i = 0; i < gridViewR.GetColumnsCount(); i++)if(gridViewR.GetAutoFilterEditor(i) != null){if(filterCondition != "") andOperator = "And "var editor = eval("filterRow_" + gridViewR.GetColumn(i).fieldName);if(editor)if(editor.GetText() != "") filterCondition = filterCondition + andOperator + "Contains( [" + gridViewR.GetColumn(i).fieldName + "]," + "'" + editor.GetText() + "')";} gridViewR.ApplyFilter(filterCondition);}
Update:
Starting with version v2013 vol 2.5, we have implemented the new 'on click' filter mode. In this mode, a filter is applied to the grid by clicking the Apply button, which is displayed in a command column.
To provide your application with this functionality, display the filter row in the grid by setting the ShowFilterRow property to true and set the FilterRowMode property to OnClick.