如何使用kendo ui过滤listview中的项目 [英] How to filter items in listview using kendo ui

问题描述

我有一个目前所有记录的列表视图。但是，由于我想过滤掉listview，我无法仅显示已过滤的数据。请尽快帮助我。

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> 

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（ ＃btnSearch）。点击（ function （）{

.ajax（{
url： GetEmployeeList，
类型：' GET'，
contentType：' application / json'，
data：{EmployeeSearch：

.ajax({ url: "GetEmployeeList", type: 'GET', contentType: 'application/json', data: { EmployeeSearch:

这篇关于如何使用kendo ui过滤listview中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！