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

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

1 Answer 753 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Glenn
Top achievements
Rank 1
Glenn asked on 13 Jan 2014, 02:04 PM


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>

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 13 Jan 2014, 03:15 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Glenn
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or