将 Kendo Grid 工具栏搜索应用于日期的模板值

Question

我在我的 JQuery Kendo 网格中添加了一个搜索工具栏。我想用它来搜索出现在我的网格中的日期。

日期是从控制器获取的 c# DateTime 值。我使用模板以我需要的格式显示日期。

在我应用模板格式之前，搜索工具栏似乎正在搜索日期格式。

例如，我的日期显示为10/07/2020，但如果我搜索该字符串，则不会出现任何内容。 如果我搜索：Fri Jul 10 2020 00:00:00 GMT+0800 (W. Australia Standard Time)，它将返回 10/07/2020 行。

//my grid datasource
var robotDataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "@Url.Action("RobotList", "Robot")",
      dataType: "json",
      type: "POST"
    }
  },
  schema: {
    model: {
      fields: {
        ID: { type: 'number' },
        RobotName: { type: 'string' },
        CreatedDate: { type: 'date' }
      }
    },

  },
  pageSize: 10,
  sort: {
    field: "ID",
    dir: "desc"
  }
});
robotDataSource.fetch(function() {
});

//my grid
$("#robotGrid").kendoGrid({
  dataSource: robotDataSource,
  height: 700,
  toolbar: ["search"],
  pageable: {
    pageSizes: [10, 25, 50, 100]
  },
  sortable: true,
  filterable: true,
  columns: [
    {
      field: "ID",
      title: "ID",
      filterable: { search: true }
    }, {
      field: "RobotName",
      title: "Name",
      width: 160,
    }, {
      field: "CreatedDate",
      title: "Date Created",
      width: 160,
      template: "#=  (CreatedDate == null)? '' : kendo.toString(kendo.parseDate(CreatedDate, 'yyyy-MM-dd'), 'dd/MM/yyyy') #"
      filterable: { multi: true, search: true }
    }
  ]
});

Answer 1

将 Created Date 的字符串格式版本添加到您的数据源并添加解析函数，如下所示：

schema: {
  model: {
    fields: {
      ID: { type: 'number' },
      RobotName: { type: 'string' },
      CreatedDate: { type: 'date' },
      CreatedDateFormatted: { type: 'string' }
    }
  },
  parse: function (response) {
    for (var i = 0; i < response.length; i++) {
      response[i].CreatedDateFormatted = kendo.format("{0:dd/MM/yyyy}", response[i].CreatedDate);
    }
    return response;
  }
},

然后更新您的网格配置以指示要在搜索中包含哪些列：

search: {
  fields: ["Id", "CreatedDateFormatted"]
},

更多信息请点击此处：https://docs.telerik.com/kendo-ui/knowledge-base/grid-filter-columns-by-date-via-search-panel