C# MVC项目中Kendo Grid动态添加Yes/No下拉列的实现方法

核心思路 #

不用硬编码列名，通过动态识别字段类型或后端传递列元数据的方式，自动为布尔型列配置显示模板和编辑控件，适配动态生成的Grid结构。

方案一：后端传递列元数据（推荐） #

在后端生成columns数组时，为每个列对象添加布尔类型标识（比如isBoolean: true），前端初始化Grid前遍历处理列配置：

// 遍历后端返回的columns数组，为布尔列配置模板和编辑器
columns.forEach(col => {
  if (col.isBoolean) {
    // 显示模板：将true/false转为Yes/No
    col.template = "#= " + col.field + " ? 'Yes' : 'No' #";
    
    // 编辑控件：复选框（适合incell编辑模式）
    col.editor = function(container, options) {
      $('<input type="checkbox" class="k-checkbox" data-bind="checked:' + options.field + '"/>')
        .appendTo(container);
      $('<label class="k-checkbox-label"></label>').appendTo(container);
    };

    // 若需使用Yes/No下拉框，替换editor为以下代码：
    // col.editor = function(container, options) {
    //   $('<input data-bind="value:' + options.field + '"/>')
    //     .appendTo(container)
    //     .kendoDropDownList({
    //       dataSource: [{ text: "Yes", value: true }, { text: "No", value: false }],
    //       dataTextField: "text",
    //       dataValueField: "value"
    //     });
    // };
  }
});

// 初始化Grid（使用处理后的columns数组）
$("#MyGrid").kendoGrid({
    dataSource: myDataSource,
    columns: columns,
    editable: ('@hasEditRights' === 'True') ? { mode: "incell", confirmation: false } : false,
    autoBind: false,
    noRecords: true,
    columnMenu: false,
    groupable: true,
    navigatable: true,
    reorderable: true,
    resizable: true,
    scrollable: true,
    sortable: {
        initialDirection: "asc",
        mode: "multiple"
    },
    selectable: "multiple, cell",
    allowCopy: {
        delimeter: "\t"
    },
    toolbar: kendo.template($("#MyToolBar").html()),
    search: {
        fields: ["Name"]
    }
    // 其他配置...
});

方案二：前端自动识别字段类型 #

如果后端无法传递列元数据，可通过数据源的第一条数据样本判断字段是否为布尔型：

// 先获取数据源样本，再处理列配置
myDataSource.fetch(function() {
  var dataItems = this.data();
  if (dataItems.length === 0) return;

  var firstItem = dataItems[0];
  columns.forEach(col => {
    var fieldValue = firstItem[col.field];
    // 识别布尔类型（若后端返回字符串型布尔值，需额外判断"True"/"False"）
    if (typeof fieldValue === 'boolean') {
      col.template = "#= " + col.field + " ? 'Yes' : 'No' #";
      col.editor = function(container, options) {
        $('<input type="checkbox" class="k-checkbox" data-bind="checked:' + options.field + '"/>')
          .appendTo(container);
        $('<label class="k-checkbox-label"></label>').appendTo(container);
      };
    }
  });

  // 初始化Grid
  $("#MyGrid").kendoGrid({
    // 你的Grid配置...
    dataSource: myDataSource,
    columns: columns
  });
});

注意事项 #

1. 数据类型兼容：确保后端返回的布尔值是true/false（布尔类型），若返回字符串（如"True"/"False"），需在数据源的schema.parse中转换：

   dataSource: {
     schema: {
       parse: function(response) {
         response.data.forEach(item => {
           for (let key in item) {
             if (item[key] === "True" || item[key] === "False") {
               item[key] = item[key] === "True";
             }
           }
         });
         return response;
       }
     }
   }
   

2. 编辑模式适配：incell模式下复选框交互更流畅，下拉框适合需要明确选择的场景。

内容的提问来源于stack exchange，提问作者Scottish Smile