CODEWITHSUNDEEP
telerikkendo-gridtelerik-mvckendo-ui-grid
Mohsen
Mohsen

Reputation: 256

How to access to data row in kendo ui grid column command template?

I want to access to data row in kendo ui grid column command template ,but not found solution to resolve this request.

<script>
$("#grid").kendoGrid({
    columns : [{
            field : "firstname",
            title : "First Name"
        }, {
            field : "lastname",
            title : "Last Name"
        }, {
            field : "cellphone",
            title : "Cell Phone"
        }, {
            field : "deskphone",
            title : "Desk Phone"
        }, {
            field : "emailaddress",
            title : "Email Address"
        },
        {
            command : [
            {
                name: "note",
                text: "note",
                template:"<a class='tds-grid-button k-button k-grid-#: name #' title='#: text #'> #: rowData.ID #    <i class='fa fa-comment-o'></i></a>",
                imageClass: "fa fa-comment-o",
                click: note_Clicked
            }
]
});
</script>

i want to access to ID value from data of row in column command template as : #: rowData.ID #

template:"<a class='tds-grid-button k-button k-grid-#: name #' title='#: text #'> #: rowData.ID #    <i class='fa fa-comment-o'></i></a>"

How to resolve this solution?

Upvotes: 2

Views: 6094

Answers (5)

SoItBegins
SoItBegins

Reputation: 554

It's possible to put a conditional function in a command binding like this. Note the 'visible' binding of the command here to show/hide the edit button:

<div data-role="grid" data-bind="source: zones" data-editable='{ "mode": "popup", "confirmation": false }'
           data-columns='[
        { "field": "fooType", "width": "14em", "title": "Foo Status", editable: false },
        { "field": "zoneName", "width": "14em", "title": "Zone Name" },
        { "title": "", "command": [{name: "edit", text:"Edit", visible: function(dataItem) { return dataItem.fooName === "Foo"; } }, {name: "destroy", text:"Delete"}] }
        ]'></div>

It has to be an inline function. A reference to a function elsewhere in the code won't work in newer versions of Kendo (though it used to!) and I don't know why.

Upvotes: 0

alehro
alehro

Reputation: 2208

I had the same problem. The solution I came to is below.

Instead of column command you can use simple column template where the data are accessible. Like that:

                {
                    title: "Status", width: "140px",
                    template: (item) => {
                        if (item.Status == 'Outstanding') {
                            return "<a class='ignore-outstanding' >Outstanding</a>";
                        } else
                            return item.Status;                            
                    }                        
                },

And add your click handler in dataBound handler like that:

            dataBound: () => {                    
                var grid = $(gridSelector).data("kendoGrid");
                $(gridSelector + cellSelector).click((e) => {
                    e.preventDefault();
                    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
                    alert(dataItem.YourField);
                });
            },

Upvotes: 1

Mohsen
Mohsen

Reputation: 256

Tanks, i find my solution to resolve it.

you can use dataBound event of kendo ui grid as follows:

$("#grid").kendoGrid({
    columns : [{
            field : "firstname",
            title : "First Name"
        }, {
            field : "lastname",
            title : "Last Name"
        }, {
            field : "cellphone",
            title : "Cell Phone"
        }, {
            field : "deskphone",
            title : "Desk Phone"
        }, {
            field : "emailaddress",
            title : "Email Address"
        },
        {
            command : [
            {
                name: "note",
                text: "note",
                template:"<a class='tds-grid-button k-button k-grid-#: name #' title='#: text #'> #: rowData.ID #    <i class='fa fa-comment-o'></i></a>",
                imageClass: "fa fa-comment-o",
                click: note_Clicked
            }
],
dataBound: function () {
                        var grid = this;
                        var model;

                        grid.tbody.find("tr[role='row']").each(function () {
                            rowData = grid.dataItem(this);
                            rowData.ID
                            rowData.Name
                            //and more and more
             }
}
});

Upvotes: 0

Punit
Punit

Reputation: 460

try this one

$("#grid").kendoGrid({
dataSource: {
   data: data,
   schema: {
     model: {
       id: "Id",
       fields:{
          Id: {type: "number"},
          firstname: { type: "string"},
          lastname: { type: "string"},
          cellphone: { type: "string"},
          deskphone: { type: "string"},
          emailaddress: { type: "string"}
          }
        }
     }
},
        columns : [{
                field : "firstname",
                title : "First Name"
            }, {
                field : "lastname",
                title : "Last Name"
            }, {
                field : "cellphone",
                title : "Cell Phone"
            }, {
                field : "deskphone",
                title : "Desk Phone"
            }, {
                field : "emailaddress",
                title : "Email Address"
            },
            {
                command : [
                {
                    name: "note",
                    text: "note",
                    template: "<a class='tds-grid-button k-button k-grid-#=name#' title='#=name#'> 
    #=Id# <i class='fa fa-comment-o'></i></a>"
                }
    ]
    });
    </script>

Note- in place of #=Id# put the primary field you want to set in kendo grid. i think you have model in kendo grid datasource.

Upvotes: 0

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

I don't think you can do it the way you are. I think you don't have access to the row data in that manner. If you replace your rowData.ID with a function call instead, the function only executes twice, not once for every rendered row, which means the template is only "executed" during grid initialization.

I found this Telerik forum post that talks about this: http://www.telerik.com/forums/accessing-row-data-in-a-command Where it is suggested that you use the Grid's dataBound event to change the text on the buttons and they provided a link to a demo Dojo.

Here is a link to a demo where I took the dojo from the forum post and slightly modified the dataBound handler to use the Id from the dataItem to dynamically changed the text on the button. http://dojo.telerik.com/@Stephen/oVuCo

I'm not sure how else to do it.

Upvotes: 1

Related Questions