Can anyone advise how to i get 'Clear Filter' event in javascript

2 posts, 1 answers
  1. Answer
    Glenn avatar
    16 posts
    Member since:
    Sep 2007

    Posted 13 Jan 2014 Link to this post

    I have kendo-grid in my application.And its have filterable "true".
    When we apply the filtering then grid items are filtered.When I click on Clear Filter button then automatically grid display the items which is displayed in the page-load.
    I understand I have to put $("#PatientSearchResultsGrid").data("kendoGrid").dataSource.filter([]);on click of 'Clear Filter' button but I can not get that event.
    I am already using requestStart event of datasource for my 'Filter' click buttonso can not use same event for 'Clear Filter'.
    Can anyone advise how to i get 'Clear Filter' event in javascript or how do I differentiate 'Filter' button click from 'Clear Filter' button click
    I try to hook DOM event of on 'reset button' click by using jquery but did not have any success


    My code is as follows :

          .Columns(columns =>
                  columns.Bound(c => c.LastName).Filterable(false).HeaderTemplate("<span title='Last Name of Patient'>LastName</span>");
                  columns.Bound(c => c.FirstName).Filterable(false).HeaderTemplate("<span title='First Name of Patient'>FirstName</span>");
                  columns.Bound(c => c.NhsNumber).HeaderTemplate("<span title='Nhs Number of Patient'>NhsNumber</span>");
                  columns.Bound(c => c.DateOfBirth).Filterable(false).HeaderTemplate("<span title='Patient Date of Birth'>DateOfBirth</span>");
                  columns.Bound(c => c.Gender).Filterable(false).HeaderTemplate("<span title='Gender of Patient'>Gender</span>");
                  columns.Bound(c => c.Location).Filterable(false).ClientTemplate("<div title='#=PermanentAddress.FullAddress#'>#=Location#</div>").HeaderTemplate("<span title='Location of Patient Hospital'>Location</span>");
                  columns.Bound(c => c.MotherFirstName).Filterable(false).HeaderTemplate("<span title='First Name of Patient Mother'>Mother First Name</span>");
                  columns.Bound(c => c.MotherLastName).Filterable(false).HeaderTemplate("<span title='Surname of Patient Mother'>Mother Last Name</span>");
                  columns.Bound(c => c.PatientId).Title("Address").Filterable(false).ClientTemplate("sss").HeaderTemplate("<span title='Address of Patient Mother'>Address</span>");
                  columns.Bound(c => c.Status).Filterable(false).HeaderTemplate("<span title='Status of  Patient'>Status</span>");
                  columns.Bound(c => c.PatientId).Title("Transfer Status").Filterable(false).ClientTemplate(
                    "# if (HasNotes) { #" +
                    "<a href='\\#'  title='View Patient Notes'  onclick='onNotesClick(#=PatientId#)'> <img  src='" + @Url.Content("~/Areas/Bloodspot/Images/notes.png") + "' /></a>" +
                    "# }#");
                  columns.Command(command => command.Custom("transferDetails").Click("onTransferClick")).Title("Transfer");    
          .Pageable(pager=>pager.Input(true) )
          .Filterable(filterable => filterable.Enabled(true).Extra(false))
          .HtmlAttributes(new { style = "width:auto" })
          .Events(events => events.DataBound("onRowDataBound"))
          .Filterable(f => f.Extra(false)
          .Messages(m => m.Info("Items with value equal to:")))
          .Events(e => e.FilterMenuInit("filterMenuInit"))      
          .Events(e => e.Change("changeFilterClick"))      
          .DataSource(datasource =>
                  datasource.Ajax().Total((int)ViewBag.Total).PageSize(15).Read(read => read.Action("_SearchResults", "Patient").Data("additionalInfo"))
                            .Events(e => e.RequestEnd("dataSource_requestStart"));


    <script type="text/javascript">
        $(document).ready(function () {
        function additionalInfo() {
            if ($("#ReasonCodes").data("kendoDropDownList").select() == 0) {
                return {
                    readFilter: 0
            } else {
                return {
                    readFilter: 1
        function dataSource_requestStart(e) {
            var dropdownlist = $("#ReasonCodes").data("kendoDropDownList");
            if ( == 0) {
                $("#errorMsg").text("Please select valid reason code");
            } else {

  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2272 posts

    Posted 13 Jan 2014 Link to this post

    Hi Glenn,

    You could use the filterMenuInit event of the Grid to attach a click handler to the "Clear" button.
    function filterMenuInit(e) {
        e.container.on("click", "[type='reset']", function () {
            alert("Clear button clicked");

    Regarding the second question, you could use the dataBound event of the Grid and use the filter method of the dataSource to check the current state of the applied filters.
    function dataBound(e) {
        if (this.dataSource.filter() === null) {
            console.log("Filters cleared");

    I hope this information was helpful.

    Dimiter Madjarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top