特定栏目的Kendo Grid Filter:如何自定义?

时间:2015-04-24 12:14:27

标签: filter kendo-ui datepicker telerik kendo-grid

我在Kendo网格中的特定列上进行了过滤,我想修改此列,如下图所示:

enter image description here

我尝试通过这种方式设置列配置来实现:

// ADD DATE PICKER FOR COLUMNS CREATION TIME
          if(value.filterable.cell.dataTextField == "creationTime") {
            //preparedGridColumnItem.AllowFiltering = false,
            preparedGridColumnItem.format = "{0:dd.MM.yyyy}";
            preparedGridColumnItem.filterable = {
              ui: function (element) {
                element.kendoDatePicker({
                  format: "dd.MM.yyyy"
                });
              },
              cell: {
                operator: "eq",
                showOperators: false, // HIDE FILTER MENU
                template: function (arg) {
                  arg.element.kendoDatePicker({
                    format: "dd.MM.yyyy",
                    change: function (e){
                      console.log("Change :: " + kendo.toString(this.value(), 'd'));
                      var timestamp = moment(this.value()).unix();
                      console.log(timestamp);

                    }
                  });

                }
              }
            }
          }

但没有运气。

我希望下拉框无法使用预定义的值进行搜索。

我该怎么办?

我试图在文档中找到任何可行的解决方案。

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

但没有运气。 非常感谢任何建议。

修改

过滤器看起来像这样:

enter image description here

1 个答案:

答案 0 :(得分:0)

你走了:

filterMenuInit: function(e) {
    if (e.field == "date") {
        var sels = e.container.find("select");
        var sel1 = $(sels[0]).data("kendoDropDownList");
        var sel2 = $(sels[2]).data("kendoDropDownList");

        sel1.select(3);
        sel1.enable(false);

        sel2.select(5);
        sel2.enable(false);
    }
}

FiddleThis doc帮助了我。

e.container指的是过滤器小部件。有了它,你可以自由地玩耍。请注意,事件只在过滤器小部件的初始化时调用一次,而不是在每次打开/关闭时调用。

更新了columnMenu的代码:

只需将filterMenuInit更改为columnMenuInit

Fiddle

更新2:

我已将以下代码添加到columnMenuInit事件中:

var dates = $(e.container).find('[data-role="datepicker"]');
$(dates[0]).data("kendoDatePicker").unbind("change");
$(dates[1]).data("kendoDatePicker").unbind("change");

Fiddle。我只是unbind日期选择器的默认更改事件,避免更改下拉列表。

相关问题