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

Posted 2023-05-07

【中文标题】将 Kendo Grid 工具栏搜索应用于日期的模板值

【英文标题】：Applying the Kendo Grid toolbar Search to the template value of a date

【发布时间】：2020-11-07 00:02:17

【问题描述】：

我在我的 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 
    
  ]
);

【参考方案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