Kendo UI Grid 自定义过滤器菜单在第一次过滤或清除后中断

Posted 2023-05-07

【中文标题】Kendo UI Grid 自定义过滤器菜单在第一次过滤或清除后中断

【英文标题】：KendoUI Grid custom filter menu breaks after first filtering or clear

【发布时间】：2013-09-22 16:01:12

【问题描述】：

我正在使用KendoUI Grid（网络框架）。正在从本地 json 数据填充，该数据在页面加载时从 ASP.NET MVC ViewBag 加载。在初始化网格并填充来自数据源的数据之前，我在单独的变量中声明数据源。我遇到了第一次过滤或清除后过滤器菜单中断的问题（查看图像）。每次我单击过滤器或清除按钮时，它都会隐藏更多控件，直到只剩下两个按钮。奇怪的是控制台中没有报告错误。我已经在这个问题上工作了一个多星期，但我似乎找不到任何关于它的信息，也没有接近可能的解决方案。

我知道非英文代码可能很难理解，但我很乐意翻译并解释它的含义！

不幸的是，我无法提供指向运行此页面的服务器的链接，因为它需要登录并且该页面已经发布部署，这意味着将凭据公开并不是一个好主意。尽管我一直在努力拼凑一个可以工作的小提琴，但我一直无法让它发挥作用。

我正在使用此代码：

root.seznamDataSource = new kendo.data.DataSource(
  data: zahteveData,
  pageSize: 15,
  schema: 
    model: 
      fields: 
        IdZahteve: 
          type: "number"
        ,
        Naslov: 
          type: "string"
        ,
        Datum: 
          type: "date"
        ,
        Status: 
          type: "string"
        ,
        Narocnik: 
          type: "string"
        ,
        PoslovniPartner: 
          type: "string"
        
      
    
  ,
  change: function(e) 
    var urejeniItemi;
    if ((e.sender._sort != null) 
       && (e.sender._sort[0] != null) 
       && e.sender._sort[0].field === "Status") 
      e.preventDefault();
      urejeniItemi = [];
      return $.getJSON("/Zahteve/StatusiData", function(data) 
        var item, status, _i, _j, _len, _len1, _ref;
        for (_i = 0, _len = data.length; _i < _len; _i++) 
          status = data[_i];
          _ref = e.items;
          for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) 
            item = _ref[_j];
            if (item.Status.trim().toLowerCase() === status.Opis.trim().toLowerCase()) 
              urejeniItemi.push(item);
            
          
        
        if (urejeniItemi.length !== e.items.length) 
          console.log("napaka, niso urejeni vsi itemi");
          return;
        
        if (e.sender._sort[0].dir === "desc") 
          urejeniItemi.reverse();
          return e.items = urejeniItemi;
        
      );
    
  
);

我已经注册了更改事件侦听器，因此我可以应用特定的排序。数据源初始化后，我开始KendoUI Grid的初始化：

$("#odprte-zahteve").kendoGrid(
  dataSource: root.seznamDataSource,
  columns: [
    
      template: '<span data-idZahteve="#=IdZahteve#"></span>#=Naslov#',
      field: "Naslov",
      title: "Naslov zahteve",
      attributes: 
        style: "min-width: 110px!importnat; text-indent: 10px;"
      ,
      filterable: 
        ui: naslovFilter
      
    , 
      field: "Datum",
      title: "Datum zahteve",
      format: "0: dddd, dd. MMMM 'yy",
      attributes: 
        style: "min-width: 105px!importnat;"
      ,
      filterable: 
        extra: true,
        ui: function(element) 
          element.kendoDatePicker(
            depth: "month",
            max: new Date(),
            format: "dddd,d. MMMM yyyy",
            ARIATemplate: "#=datumZImenom(data.current)#",
            footer: "Danes - #=datumZImenom(data)#"
          );
        
      
    , 
      field: "Status",
      title: "Status",
      attributes: 
        style: "min-width: 60px!importnat;"
      ,
      filterable: 
        ui: statusFilter
      
    , 
      field: "Narocnik",
      title: "Naročnik",
      attributes: 
        style: "min-width: 80px!importnat;"
      ,
      filterable: 
        ui: narocnikFilter
      
    , 
      field: "PoslovniPartner",
      title: "Poslovni partner",
      attributes: 
        style: "min-width: 100px!importnat;"
      ,
      filterable: false,
      sortable: false
    
  ],
  change: function(e) 
    return urediZahtevo(getIzbranaZahteva(this));
  ,
  dataBound: prilagodiSirino,
  selectable: true,
  sortable: true,
  pageable: 
    buttonCount: 5,
    pageSizes: [15, 30, 45],
    messages: 
      display: "Prikazujem 0 - 1 od 2 odprtih zahtev",
      empty: "Ni podatkov",
      itemsPerPage: "zahtev na stran",
      next: "Pojdi na naslednjo stran",
      first: "Pojdi na prvo stran",
      previous: "Pojdi na prejšnjo stran",
      last: "Pojdi na zadnjo stran",
      refresh: "Osvežite tabelo"
    
  ,
  filterable: 
    extra: false,
    operators: 
      string: 
        eq: "Je enak",
        startswith: "Se začne z",
        contains: "Vsebuje"
      ,
      date: 
        lt: "Pred datumom",
        gt: "Po datumu",
        eq: "Je enak datumu"
      
    ,
    messages: 
      and: "in",
      or: "ali",
      filter: "Filtriraj",
      clear: "Počisti",
      info: "Filtriraj po: ",
      selectValue: "Izberite kategorijo"
    
  
);

过滤器 ui 功能只是创建基本的过滤器菜单

naslovFilter = function(element) 
    element.kendoAutoComplete(
        dataSource: zahteveData,
        dataTextField: "Naslov"
    );
;

datumFilter = function(element) 
    element.kendoDatePicker(
        depth: "month",
        max: new Date(),
        format: "dddd,d. MMMM yyyy",
        ARIATemplate: "#=datumZImenom(data.current)#",
        footer: "Danes - #=datumZImenom(data)#"
    );
;

statusFilter = function(element) 
    var item, status, statusi, _i, _len;
    statusi = [];
    for (_i = 0, _len = zahteveData.length; _i < _len; _i++) 
        item = zahteveData[_i];
        status = item.Status.trim();
        if (!statusi.contains(status)) 
            statusi.push(status);
        
    
    element.kendoDropDownList(
        dataSource: statusi,
        optionLabel: "Izberite status"
    );
;

narocnikFilter = function(element) 
    element.kendoDropDownList(
        dataSource: narocniki,
        optionLabel: "Izberite naročnika"
    );
;

---

编辑：我又开始着手这个项目了，经理决定彻底重新设计它，所以现在我使用Bootstrap和Angular.js，这样就不需要使用了剑道用户界面。

【问题讨论】：

准备现场演示（在 jsbin.com 或 jsfiddle.net 上）将帮助我们跟踪问题。

如果您可以创建一个仅读取的测试页面，那么该链接将有所帮助，就像在小提琴中您将不得不绑定数据源一样，这将再次不安全。虽然如果你认为这是不可能的，请像@AtanasKorchev 所说的那样创建一个工作小提琴。

我正在处理这个问题，但目前我无法提供测试用户登录网页。

不要使用你的系统把演示放在一个纯粹的小提琴中

可能是“e.preventDefault();”打破东西？

【参考方案1】：

根据我的阅读，这似乎是一个严格的显示问题。似乎!important 在代码中的多个位置被拼写为!importnat，这可能意味着问题只是一个CSS 问题。如果没有可用的演示，则无法确定，但我肯定会从纠正这个错误开始。