docs: Add Custom validation in Grid filter menus grid how-to

Author: dtopalov

docs/controls/data-management/grid/how-to/filtering/use-custom-validation-in-filter-menus.md

@@ -0,0 +1,119 @@
+---
+title: Use custom validation in Grid Filter menus
+page_title: Use custom validation in Grid Filter menus | Kendo UI Grid Widget
+description: "Learn how to Use custom validation in Grid Filter menus when filtering is applied."
+slug: howto_gridfiltering_custom_validation_filter_menu_grid
+---
+
+# Use custom validation in Grid Filter menus
+
+The example below demonstrates how to use custom validation in Grid Filter menus
+
+This approach comes in handy when you want to validate the user input in the Grid-generated filtering UI in the Filter menu (e.g. Kendo UI DatePicker for date fields or Kendo UI NumericTextBox for numeric fields).
+
+The example below follows these steps:
+
+1. Handle the [`filterMenuInit`](/api/javascript/ui/grid#events-filterMenuInit) event and get a reference to the corresponding widgets
+2. Get a reference to the built-in Kendo UI Validator and use its [`rules`](/api/javascript/ui/validator#configuration-rules) and [`messages`](/api/javascript/ui/validator#configuration-messages) options to add the necessary custom validation logic and messages
+
+As a result, the custom validation will be triggered when the user input does not obey the predefined rules.
+
+###### Example
+
+```html
+<div id="grid"></div>
+    <script>
+      $("#grid").kendoGrid({
+        columns: [
+          { field: "name" },
+          { field: "date", format: '{0:MM/dd/yyyy}' },
+          { field: "age" }
+        ],
+        dataSource: {
+          data: [
+            { name: "Jane Doe", date: new Date(2016, 10, 15), age: 25},
+            { name: "John Doe", date: new Date(2016, 10, 17), age: 20}
+          ],
+          schema: {
+            model: {
+              fields: {
+                date: {
+                  type: 'date'
+                },
+                age: {
+                  type: 'number'
+                }
+              }
+            }
+          }
+        },
+        filterable: true,
+        filterMenuInit: function(e) {
+          if (e.field === "date" || e.field === 'age') {
+            e.container.find("[data-role=datepicker]").each(function(idx) {
+              $(this).attr("name", "date" + idx);
+              
+              $('<span class="k-invalid-msg" data-for="' + "date" + idx + '"></span>')
+                .insertAfter($(this).closest(".k-datepicker"));              
+            });
+            
+            e.container.find("[data-role=numerictextbox]").each(function(idx) {
+              $(this).attr("name", "date" + idx);
+              
+              $('<span class="k-invalid-msg" data-for="' + "date" + idx + '"></span>')
+                .insertAfter($(this).closest(".k-numerictextbox"));              
+            });
+            
+            e.container.kendoValidator({
+              rules: {
+                datePickers: function(input){
+                  var dtp = input.data('kendoDatePicker');
+                  if(dtp && input.val()){
+                    return !!dtp.value() ;
+                  }
+                	
+                	return true;
+                },
+                numerics: function(input){
+                  var ntb = input.data('kendoNumericTextBox');
+                  if(ntb && input.val()){
+                    return !!(ntb.value() > 0);
+                  }
+                	
+                	return true;
+                }
+              },
+              change: function() {
+                var button = e.container.find(".k-primary");
+                this.value() ? button.removeAttr("disabled") : button.prop("disabled", "disabled")
+              },
+              messages: {
+                datePickers: "Please enter a valid date",
+                numerics: "Age must be > 0"
+              }
+            });  
+          }
+        }
+      });
+    </script>
+```
+
+## See Also
+
+Other articles on the Kendo UI Grid and how-to examples:
+
+* [JavaScript API Reference](/api/javascript/ui/grid)
+* [How to Add Cascading DropDownList Editors]({% slug howto_add_cascading_dropdown_list_editors_grid %})
+* [How to Copy Data from Excel]({% slug howto_copy_datafrom_excel_grid %})
+* [How to Drag and Drop Rows between Grids]({% slug howto_dragand_drop_rows_between_twogrids_grid %})
+* [How to Enable ForeignKey Column Sorting by Text]({% slug howto_enable_foreignkey_sotringby_text_grid %})
+* [How to Implement Stable Sort in Chrome]({% slug howto_implement_stable_sortin_chrome_grid %})
+* [How to Initialize Data Attribute with Detail Template]({% slug howto_initialize_data_attributewith_detail_template_grid %})
+* [How to Load and Append More Records While Scrolling Down]({% slug howto_loadand_append_morerecords_while_scrollingdown_grid %})
+* [How to Perform CRUD Operations with Local Storage Data]({% slug howto_perform_crud_operationswith_local_storage_data_grid %})
+* [How to Persist Expanded Rows after Refresh]({% slug howto_persist_expanded_rows_afetrrefresh_grid %})
+* [How to Set Cell Color Based on ForeignKey Values]({% slug howto_set_cell_color_basedon_foreignkey_values_grid %})
+* [How to Show Tooltip for Column Records]({% slug howto_show_tooltipfor_column_records_grid %})
+* [How to Update Toolbar Content Using MVVM Binding]({% slug howto_update_toolbar_content_using_mvvmbinding_grid %})
+
+For more runnable examples on the Kendo UI Grid, browse its [**How To** documentation folder]({% slug howto_create_custom_editors_grid %}).