首次过滤或清除后,KendoUI Grid自定义过滤器菜单会中断

Question

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

我知道非英语代码很难理解,但我很乐意翻译并解释它的含义!

遗憾的是,我无法提供指向运行此页面的服务器的链接,因为它需要登录并且页面已经发布 - 这意味着将凭据公开放在一起并不是一个好主意.虽然我一直在努力拼凑出一个工作小提琴,但我还是无法让它发挥作用.

我正在使用此代码:

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,这就不需要使用KendoUI了.

Answer 1

根据我的阅读，这似乎完全是一个显示问题。代码中的几个地方似乎!important拼写错误，这可能意味着问题只是 CSS 问题。!importnat如果没有有效的演示，人们无法确定，但我肯定会从纠正这个错误开始。