Фильтрация Kendo Grid не работает

Вот мой код просмотра MVC: -

 <div id="reportsDb">

         <div id="grid"></div>
     <script type="text/x-kendo-template" id="template">
            <div class="toolbar" id="template" >
                <label class="Status-label" for="Status">Show reports by status:</label>
                <input type="search" id="Status" style="width: 150px"/>
            </div>
        </script>



  <script>
            $(document).ready(function () {
                var path = ""
                dataSource = new kendo.data.DataSource({

                    transport: {
                        read: {
                            url: "@Url.Action("Report_Read", "Report")",
                            dataType: "json",
                            type: "Get",
                            contentType: "application/json"
                        }

                    },

                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,

                    pageSize: 10,
                    schema: {
                        model: {
                            id: "RequestId",
                            fields: {
                                IPAddress: { type: "string" },
                                RequestQuetime: { type: "date" },
                                RequestPicktime: { type: "date" },
                                RequestRespondTime: { type: "date" },                                    
                                StatusType: { type: "string" },
                                RequestTimeDifference: { type: "datetime", format: "{0:hh:mm:ss}" },
                                RequestPickDifference: { type: "datetime", format: "{0:hh:mm:ss}" }
                            }
                        }
                    }
                });



            var grid =  $("#grid").kendoGrid({                       
                    dataSource: dataSource,
                    sortable: true,
                    pageable: true,
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to"
                            }
                        }
                        },
                    toolbar: kendo.template($("#template").html()),
                    height: 430,

                    columns: [
                       { field: "IPAddress", title: "IP address", width: 100, filterable: true },
                       { field: "RequestQuetime", title: "Que time", width: 100, filterable: false },
                       { field: "RequestPicktime", title: "Pick time", width: 110, filterable: false },
                       { field: "RequestRespondTime", title: "Respond time", width: 100, filterable: false },
                       { field: "StatusType", title: "status", width: 110, filterable: { ui: statusFilter } },
                       { field: "RequestTimeDifference", title: "Time difference", width: 110, filterable: false },
                       { field: "RequestPickDifference", title: "Pick difference", width: 110, filterable: false }
                    ]

            });

            function statusFilter(element) {                  
                element.kendoDropDownList({                      
                    dataSource: {
                        transport: {
                            read: {
                                url: "@Url.Action("RequestStatus_Read", "Report")",
                                dataType: "json",
                                type: "Get",
                                contentType: "application/json"
                            }
                        }
                    },
                    dataTextField: "Text",
                    dataValueField: "Value",
                    optionLabel: "--Select Value--"
                });
            }


            });

        </script>
    </div>

И ниже метод действия контроллера: -

 public ActionResult Report_Read()
 {          
    return Json(_oRepository.GetReports().ToList(), JsonRequestBehavior.AllowGet);
 }

Я хочу применить фильтрацию к полю StatusType. И для этого я связал это поле с раскрывающимся списком.

И моя проблема в том, что когда я пытаюсь выполнить фильтрацию, выбрав один из статусов из загрузки, он ничего не делает.

Я работаю по этому примеру:

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization


kendo-grid filtering telerik kendo-dropdown
person Pawan    schedule 17.07.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Судя по вашему коду, все выглядит нормально, кроме действия чтения контроллера. Теперь, если контроллер вызывается, когда вы применяете фильтр из представления в сетке, единственное изменение, требуемое с вашей стороны, приведено ниже:

 public JsonResult Report_Read([DataSourceRequest] DataSourceRequest request)
 {          
    return Json(_oRepository.GetReports().ToList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
 }

ИЗМЕНИТЬ:

Если вы не используете Kendo.MVC, у вас есть два варианта фильтрации:

Вариант 1. Фильтрация на стороне клиента
-> Вам нужно будет получить все данные во время чтения, чтобы при применении фильтрации у вас были все данные. Это лучший вариант, если источник данных не большой, так как он сохраняет нежелательные запросы контроллера для фильтрации.
-> Сначала вам нужно подписаться на filterMenuInit() сетки и добавить приведенный ниже скрипт для фильтрации на стороне клиента. Код:

    filterMenuInit: function(e) {
     if (e.field == "name") {
          alert("apply Filter");
          var filter = []
          ... // Generate filters
          grid.dataSource.filter(filters);
      }
    }

Подробный пример: Выдержка из примеров кендо

Вариант 2: Фильтрация на стороне сервера
-> Я не очень разбираюсь в этом, но пока я искал свои варианты фильтрации, я наткнулся на приведенный ниже вопрос, который был хорошим, но немного сложно для моего приложения. Но я думаю, что вы можете использовать его.

Пример JS Fiddle

Пожалуйста, обратитесь к ссылке ниже для подробного объяснения.

Ссылка: JS Кендо Параметры сетки пользовательского интерфейса

person D_Learning    schedule 17.07.2014
comment
D_Learning спасибо за ваш ответ. Но я хочу сообщить вам, что я работаю с версией Kendo JS. И я думаю, что класс DataSourceRequest находится в dll Kendo.MVC. - person Pawan; 17.07.2014

arrow_upward
0
arrow_downward

Проверьте отображаемый html для строки, которая у вас есть в td, и для строки, которую вы фильтруете.

  1. Посмотрите, есть ли у вашего td какой-либо другой код, кроме строки, которую вы пытаетесь отфильтровать. Если дело в том, что внутри td есть какой-то другой html-код, такой как span или div, вам нужно реорганизовать свой код, чтобы убедиться, что у вас есть контент только в td.
  2. Убедитесь, что вы обрезаете свою строку внутри td.
  3. Попробуйте содержит вместо равно. если это сработает, проблема должна заключаться в дополнительном тексте/html или обрезке.
person Kurkula    schedule 12.10.2018

arrow_upward

arrow_downward

person    schedule
comment
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и/или как этот код отвечает на вопрос, повышает его ценность в долгосрочной перспективе. - person adiga; 10.04.2019