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

[Glenn]

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

Thanks

My code is as follows :



@(Html.Kendo().Grid(Model.Patients)
      .Name("PatientSearchResultsGrid")
      .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) )
      .Sortable()
      //.AutoBind(false)
      .Filterable(filterable => filterable.Enabled(true).Extra(false))
      .HtmlAttributes(new { style = "width:auto" })
      .EnableCustomBinding(true)
      .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"));
          }))

    </div>

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

</script>

[Dimiter Madjarov]

Hi Glenn,


You could use the filterMenuInit event of the Grid to attach a click handler to the "Clear" button.
E.g.

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.
E.g.

function dataBound(e) {
    if (this.dataSource.filter() === null) {
        console.log("Filters cleared");
    }
}

I hope this information was helpful.

Regards,
Dimiter Madjarov
Telerik