How to filter items in listview using kendo ui

See more:

ListView

Kendo

Hi, I have a listview that has currently all the records. But as I want to filter out the listview, I am not being able to show only the filtered datas. Please help me asap.

<div>
    @(Html.Kendo().ListView((IEnumerable<Employee>
        )Model)
        .Name("employeeListView")
        .TagName("div")
        .ClientTemplateId("templateEmployeeListView")
       .DataSource(dataSource => dataSource
                              .PageSize(21).ServerOperation(false)
                              .Read(read => read.Action("GetEmployeeList", "Employee")))

        .Pageable(pageable => pageable.Refresh(false))
        )
</div>

<script type="text/x-kendo-tmpl" id="templateEmployeeListView">
    <div class="employee">
            #:EmployeeName# <br />
            #:CompanyName# <br />
    </div>

</script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSearch").click(function () {
            $.ajax({
                url: "GetEmployeeList",
                type: 'GET',
                contentType: 'application/json',
                data: { EmployeeSearch: $("#txtSearch").val() },
                success: function () {
                    refreshData();
                }
            });

        });
    });

    function refreshData() {
        $("#employeeListView").data("kendoListView").refresh();
    };
</script>

What I have tried:

<div>
        @(Html.Kendo().ListView((IEnumerable<employee>
            )Model)
            .Name("employeeListView")
            .TagName("div")
            .ClientTemplateId("templateEmployeeListView")
           .DataSource(dataSource => dataSource
                                  .PageSize(21).ServerOperation(false)
                                  .Read(read => read.Action("GetEmployeeList", "Employee")))

            .Pageable(pageable => pageable.Refresh(false))
            )
    </employee></div>
    
    <script type="text/x-kendo-tmpl" id="templateEmployeeListView">
        <div class="employee">
                #:EmployeeName# <br />              
                #:CompanyName# <br />              
        </div>

    </script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSearch").click(function () {
                $.ajax({
                    url: "GetEmployeeList",
                    type: 'GET',
                    contentType: 'application/json',
                    data: { EmployeeSearch: $("#txtSearch").val() },
                    success: function () {
                        refreshData();
                    }
                });
              
            });
        });

        function refreshData() {
            $("#employeeListView").data("kendoListView").refresh();           
        };
    </script>