如何在 Kendo UI Grid 中定义数据绑定，语法非常混乱？

Posted 2023-05-07

【中文标题】如何在 Kendo UI Grid 中定义数据绑定，语法非常混乱？

【英文标题】：How can i define databound in KendoUI Grid , syntax is very confusing?

【发布时间】：2020-09-03 23:29:51

【问题描述】：

我有一个 Kedno-Grid ，详细信息如下：

这是数据源：

    var data = $scope.salesgroups;
    var dataSource = new kendo.data.DataSource(
        //data: data,
        transport: 
            read: function (e) 
                e.success(data);
            ,
            update: function (e) 
                e.success();
            ,
            create: function (e) 
                var item = e.data;
                item.Id = data.length + 1;
                e.success(item);
            
        ,
        schema: 
            model: 
                id: "Id",
                fields: 
                    Name:  type: "string" 
                
            
        
    );

Var grid = $("#grid").kendoGrid(
        dataSource: dataSource,
        scrollable: false,
        navigatable: true,
        editable: 
            createAt: "bottom"
        ,            
        toolbar: ["save", "cancel", "create"],
        columns: ["Name"]
    ).data("kendoGrid")

以下代码用于当用户单击网格最后一行的选项卡时添加新行。

    grid.tbody.on('keydown', function (e)
    
        if (e.keyCode == 9)
        
           if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last- 
                    child')) 
                setTimeout(function () 
                    grid.addRow();
                )
            
        
    );

现在我在哪里定义“数据绑定”？我想添加以下代码，它将用字体真棒图标替换按钮，而不是创建和删除按钮

     dataBound: function (e)             
     e.sender.tbody.find(".k-grid-edit").each(function (idx, element) 
    if (!$scope.validateDisabled)
      $(element).remove();
        else 
        $(element).removeClass("k-button");
          $(element).removeClass("k-button-icontext");
       
    );

      e.sender.tbody.find(".k-grid-Delete").each(function (idx, element) 
      if (!$scope.validateDisabled)
        $(element).remove();
       else 
          $(element).removeClass("k-button");
         $(element).removeClass("k-button-icontext");
       
    );

【参考方案1】：

dataBound是网格参数的根属性：

var grid = $("#grid").kendoGrid(
    dataSource: ...,
    scrollable: ...,
    navigatable: ...,
    editable: ...,            
    toolbar: ...,
    columns: ...,
    dataBound: function() 

    
).data("kendoGrid")