This is a migrated thread and some comments may be shown as answers.

Change text on command dynamically

4 Answers 1503 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shea
Top achievements
Rank 1
Shea asked on 30 Apr 2013, 06:40 PM
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

4 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 02 May 2013, 07:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Henrik
Top achievements
Rank 1
answered on 24 Sep 2013, 09:23 AM
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 :)
0
Vladimir Iliev
Telerik team
answered on 24 Sep 2013, 10:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Henrik
Top achievements
Rank 1
answered on 24 Sep 2013, 10:35 AM
Thank you a lot, worked like a charm!
Tags
Grid
Asked by
Shea
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Henrik
Top achievements
Rank 1
Share this question
or