Saturday, 31 January 2015

Filter Kendo MVC Treeview

How to filter Kendo MVC Treeview in javascript

 Here We have Textbox control
 @Html.TextBoxFor(m => m.Activity_name)

Here we have filter button
 <img src="@Url.Content("~/Content/images/filter.gif")" title="Click to filter" class="Handsymbol" onclick="onfilterclick()" />

when click the filter button make visible only the required Tree view child and it's header that's match with the textbox content using the following javascript function

function onfilterclick() {
        var filterText = $('#Activity_name').val();
        if (filterText !== "") {
            $("#MedicalAidtreeview .k-group .k-group .k-in").closest("li").hide();
            $("#MedicalAidtreeview .k-group .k-group .k-in").each(function (index, value) {
                if (value.innerHTML.toUpperCase().indexOf(filterText.toUpperCase()) > -1) {
                    $(this).closest("ul").show();
                    $(this).closest("li").show();
                }
            });
        } else {
            $("#MedicalAidtreeview .k-group").find("ul").show();
            $("#MedicalAidtreeview .k-group").find("li").show();
        }
    }

No comments:

Post a Comment