为Kendo UI网格模板按钮分配ID

Question

我想为Kendo UI网格模板按钮分配ID（来自dataSource），并想知道从cilcked_function（）中单击的按钮ID。任何人都可以帮我做..

$("#grid").kendoGrid({ 
     dataSource: App.TempHourlyTargetData, 
     columns: [ 
      { field: "field1", title: "Field 1", width: "25%" }, { field: "field2", title: "Field 2", width: "25%" }, 

      { 
       template: "<a href='\\\#' onclick='click_function()' id = '" + id_from_datagrid + "' class='deleteBtn'></a>", 
       width: "25%" 
      } 
     ], 

     height: 350, 
     change: onChange, 
     selectable: "multiple cell",//""multiple row"", , 
    }); 

Answer 1

是的，你可以通过下面的代码实现它： 删除您放置在模板的onclick标签：

$("#grid").kendoGrid({ 
     dataSource: App.TempHourlyTargetData, 
     columns: [ 
      { field: "field1", title: "Field 1", width: "25%" }, { field: "field2", title: "Field 2", width: "25%" }, 

      { 
       template: "<a href='\\\#' id = '" + id_from_datagrid + "' class='deleteBtn'></a>", 
       width: "25%" 
      } 
     ], 

     height: 350, 
     change: onChange, 
     selectable: "multiple cell",//""multiple row"", , 
    }); 

下面的代码会给你该ID：

$(document).on('click','.deleteBtn',function(){ 
     var id=$(this).prop('id'); 
    }) 

//

OR

$('.deleteBtn').click(function(){ 
     var id=$(this).prop('id'); 
    }) 

Answer 2

注上user3040830的回答是：如果你的内容是动态加载，在DOM加载后，那么这将工作 -

$(document).on('click','.deleteBtn',function(){ 
 
     var id=$(this).prop('id'); 
 
    })

但不是这样的：

$('.deleteBtn').click(function(){ 
 
     var id=$(this).prop('id'); 
 
    })

Answer 3

 var grid = $("#GridContainer").kendoGrid({ 
      columnMenu: false, 
      scrollable: true, 
      columns: [ 
       { 
        title: "Button", 
        template: '<div><button id="#= columnNamefromDatabase #" /></div>', 
        width: 80 
       }, 
       { 
        field: Column2, 
        title: "ColumnHeader2", 
        width: 80 

       }, 
       { 
        field: Column3, 
        title: "ColumnHeader3", 
        width: 200 
       }, 

      ], 
      resizable: true, 
      dataSource: { 
       transport: { 
        read: { 
         url: GetDetailsUrl, 
         type: "POST", 
         dataType: "json", 
         contentType: "application/json; charset=utf-8" 

        }, 
        parameterMap: function (options) { 
         options.YourModel = YourModelObect; 
         return JSON.stringify(options); 

        } 
       }, 
       schema: { 
        data: function (response) { 
         var griddetails = response.result; 
         return griddetails; 

        }, 

       }, 

       serverPaging: false, 
       serverSorting: false, 
       selectable: "multiple", 

      }, 
      dataBound: function (arg) { 
       var results = arg.sender.dataSource.view(); 
       ResultItems = results; 
       $(":button").click(function(){       
        Id=$(this).prop('id') 
       }) 

      } 
     }).data("kendoGrid");