Question

我有一个案例，其中Kendo网格列是动态的

我有两个休息api，它给我一个关于列的元数据

metadata = [{title1, field1}, {title2, field2}...]

我需要为某些列应用通用模板

我正在迭代元数据并构建列数组

forEach(col in metadata){
 if(title === 'Name'){
     columns.push({
                    title: col.title,
                    template: nameTemplate
                });
 }
 if(title === 'Date'){
     columns.push({
                    title: col.title,
                    template: dateTemplate
                });
 }
 if(title === 'Salary'){
     columns.push({
                    title: col.title,
                    template: currencyTemplate
                });
 }
 else{
   columns.push({
                    title: col.title,
                    field: col.field
                });
  }
}

function dateTemplate(dataItem) {            
 if(date){
     return kendo.toString(kendo.parseDate(dataItem.date, 'yyyy-MM-dd'), 'MM/dd/yyyy');
 }            
 return '';
}

在datetemplate中，我获取dataItem并绑定日期字段。

有没有办法可以将模板用于多个列例如，如果我的网格中有多个日期列，例如开始日期，结束日期，加入日期，出生日期

如果我选择通过将fieldName传递给模板函数为所有列应用单个模板，如下所示

我试过这种方式，但这不起作用。

1. format : "{0:MM/dd/yyyy}" //this doesn't work and may be because date is returned as a string in json.

2. if(col.title.indexOf('Date')>0){ //check if title is of date type
     columns.push({
                    title: col.title,
                    template: dateTemplate(fieldName) //pass fieldname
                });
 }

I also tried

3. if(col.title.indexOf('Date')>0){ //check if title is of date type
     columns.push({
                    title: col.title,
                    template: function(dataItem) { dateTemplate(dataItem, fieldName) } //pass fieldname
                });
 }

function dateTemplate(dataItem, field){
  return kendo.toString(kendo.parseDate(dataItem[field], 'yyyy-MM-dd'), 'MM/dd/yyyy');
}

这始终将所有列与所有行绑定在同一日期。

请帮我在kendogrid中使用这个genericTemplating

Answer 1

您可以使用模板字符串而不是函数：

"#= kendo.toString(kendo.parseDate(" + field + ", 'yyyy-MM-dd'), 'MM/dd/yyyy') #"

以下是一些示例代码和演示：

  var metadata = [
    {
      field: "StartDate",
      title: "Start Date",
    }, 
    {
      field: "EndDate",
      title: "Emd Date",
    }
  ];

  var columns = [];
  for (var i = 0; i < metadata.length; i++){
    var col = metadata[i];
    if(col.title.indexOf('Date')>0){ 
       columns.push(
         {
           field: col.field,
           title: col.title,
           template: dateTemplate(col.field)
         });
    }    
  }


function dateTemplate(field){
  return "#= kendo.toString(kendo.parseDate(" + field + ", 'yyyy-MM-dd'), 'MM/dd/yyyy') #";
}

Kendogrid列通用模板

1 个答案:

的 DEMO