Change text on command dynamically

[Shea]

I would like to have my command button display different text based on the values in the row.  I have tried

command: [{
    name: "return",
    click: myHandler,
    template: '#= getCommandText(col1, col2) #'
}]

function getCommandText(c1, c2) {
      //return text based on values in this row
}

function myHandler(e) {
    //perform actions based on value in row
}

But the command's template call doesn't seem to be aware of values in the row like field columns do. 

I suppose another alternative would be to have multiple commands in a column, and hide certain ones based on the values in the row, but I am not sure how to do this either.

Thanks,
~S

[Vladimir Iliev]

Hi Shea,

 
There are several ways to achieve the desired behavior and which one you would use depends entirely on you and the exact setup that you have. For example you can define all needed commands and then on dataBound event of the grid to iterate over the grid row, get their dataItem and based on values from the model to hide some of them using jQuery. 

function onDataBound(e) {
    var grid = this;
    var gridRows = grid.tbody.find("tr");
    for (var i = 0; i < gridRows.length; i++) {
        var row = $(gridRows[i]);
        var dataItem = grid.dataItem(row);
        //perform your custom check
        if (dataItem.yourProperty == true) {
            //hide buttons using jQuery
            row.find(".k-grid-edit").remove();
        }
    }
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Henrik]

The solution provided doesn't solve the question..

I can change the text of my delete button by doing                     $(this).text("New text for delete button");

But doing so, I lose the span which sets the style for the "button".

So how do I change the text of the delete button without losing the style?

To be more clear, when I change the text via the method in my post, the  <span class="k-icon k-delete"/> disappears.

Hope you guys can help :)

[Vladimir Iliev]

Hi Henrik,

 
Replacing the text in HTML element without removing the other elements inside it is not directly related to KendoUI but is a general programming task. More information on the matter can be found on various resources over the internet. For example you can check this article in StackOverflow.

Kind Regards,
Vladimir Iliev
Telerik

[Henrik]

Thank you a lot, worked like a charm!