CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-template
user1583494
user1583494

Reputation: 21

Assign ID for Kendo UI grid template button

I want to assign ID (from dataSource) for Kendo UI grid template button and want to know the clicked button ID from cilcked_function(). Anyone can help me to do this..

$("#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"",  ,
    });

Upvotes: 1

Views: 6425

Answers (3)

Aashna
Aashna

Reputation: 1

       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");

Upvotes: 0

Shiva Naru
Shiva Naru

Reputation: 1215

Note on user3040830's answer: If your elements are loaded dynamically, after the DOM is loaded, then this will work - 

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

But NOT this: 

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

Upvotes: 0

user3040830
user3040830

Reputation:

Yes you can achieve it by below code: Remove the onclick tag that you have placed in the template:

$("#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"",  ,
    });

Below code will give you the id:

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

//OR

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

Upvotes: 2

Related Questions