Conditional text on Kendo UI Button using a different cells value

Question

I have a button that when clicked I'm pushing some of the data rows value into an array. I swap the text based on its selected/unselected state. This works great, but if the user pages through the datagrid or filters it, the selected value remains but the button text changs back to its "add" state. Here is my code for the button:

    command: [
                { 
                   name: "Select", template:  "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= this.Selected === true ? 'Remove' : 'Add' #</a>",
click: function (e) {
                     var curBtn = $(e.target);
                     var tr = $(e.target).closest("tr"); // get the current table row (tr)
                     var data = this.dataItem(tr);
                     console.log(data);
                     var selected = data.Selected;

                     if (selected == false || selected == undefined) {
                         data.Selected = true;
                         curBtn.html('remove');
                     }
                     else { 
                         data.Selected = false;
                         curBtn.html('add');
                     }
                     console.log(curBtn);
                     data.refresh();
             }

         }],

I tried this for the template but kept getting an invalid template error. I believe the cause of this is that I don't directly have access to items outside of the data cell?

 template:  "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= Selected == true ? Remove : Add #</a>"

Any help would be GREATLY appreciated as usual!! Thanks and happy coding!

EDIT:

Here is a fiddle: http://jsfiddle.net/rKBZq/27/

This is pretty representative of what I'm trying to do. The data is local just as it is in this demo. So basically, based on the row's selected property I want to change the text of the button to either "ADD" or "REMOVE" and update the row and data appropriately via the click action...

Somethings I observed is when console.log(data) the selected value is infact updated... however, the grid cell is now. that is fine because i usually hide it anyway... so is it possible that the this.Selected i have slugged in to the template is pulling from the table row instead of the backing data? -- EDIT: adding this.refresh() updates the table as well but the button does not rerender when doing so... I updated the command button to reflect it too, and it does save while paging or filtering... so this comes down to how come the button does not refresh / rerender when calling refresh when the data does?

Another observation is obviously I shouldn't HAVE to do curBtn.html('Add') if this works... I'm hoping to swap the state of the button accordingly as the data changes...

Answer 1

I'm sorry but as far as I know it is not possible doing what you want using command. I cannot find in Kendo UI Grid documentation references to template in a command and when added a trace to see when the template is expanded I see that it is only executed when the Grid is loaded the first time.

You can easily verify that if you set some of the initial Selected state to true the button is actually not initialized correctly.

BUT this doesn't mean that you cannot do something similar (get the same result).

What I propose is instead of defining it as a command, define it as a field and then use your template.

Doing this you still have some problems to solve:

1. There is not click event for a field so you should add some code after the grid initialization for doing this.
2. Avoid that when clicked, the field Selected enters in edition mode. If you try this using editable: false then you cannot change the value of Selected so what I do is a little trick consisting of defining field as empty and then define the title to what we want.
3. If you update a field in a DataSource using data.Selected = true, you are not actually setting it in the model and so when paging you loose it. So you should use set for updating the value.

Doing this your code would be:

var grid = $("#grid").kendoGrid({
    dataSource: suppds,
    filterable: true,
    sortable  : true,
    height    : "600px",
    pageable  : {
        input  : true,
        numeric: false
    },
    save      : function () {
        this.refresh();
    },
    editable  : true,
    columns   : [
        {
            field : "",
            title : "Selected",
            template: "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= data.Selected == true ? 'Remove' : 'Add' #</a>",
            width  : "100px"
        },
        { field: "OrderDate", title: "Date", format: "{0:MM/dd/yyyy}" },
        {
            field     : "Title", title: "Title",
            filterable: {
                extra    : false,
                operators: {
                    string: {
                        contains: "Contains"
                    }
                }
            }
        },
        { field: "Records", title: "Records" },
        { field: "Selected"  }
    ]
}).data("kendoGrid");

$(grid.tbody).on("click", ".k-grid-Select", function (e) {
    var curBtn = $(e.target);
    var tr = $(e.target).closest("tr"); // get the current table row (tr)
    var data = grid.dataItem(tr);
    var selected = data.Selected;
    console.log(curBtn);
    console.log(data);
    if (selected == false || selected == undefined) {
        data.set("Selected", true);
        curBtn.text('Remove');
    }
    else {
        data.set("Selected", false);
        curBtn.text('Add');
    }
});

and the modified JSFiddle here : http://jsfiddle.net/OnaBai/rKBZq/39/