Remove item from kendo grid bind to knockout nested observable

Question

I have a Kendo web grid combined with knockout. The source of my Grid comes from the nested observable array. The last column of the grid contains a button to remove the row. How can I do the remove?

http://jsfiddle.net/rqL3E/

 <div data-bind="foreach: items">
   <h5 style="color:red" data-bind="text:name"></h5>

   <div id="selectedServices" 
        data-bind='kendoGrid: {
            selectable: true,
            data: sample,
            columns: [
                { field: "id", title: "id"},
                { field: "name", title: "name"}, 
                { command:[{text: "x", className: "btnRemove" }]}
            ]}' 
        data-role="grid"></div>


  <div>

Answer 1

You are pretty close in your fiddle. You would not want to add the id within the foreach loop, as it duplicates the id. One option is to add an id on the parent (the one with the foreach) and hook up a handler like:

$("#selectedServices").on("click", ".btnRemove", function (e) {
    var $current = $(e.currentTarget),
        widget = $current.closest(".k-grid").data("kendoGrid"),
        dataItem = widget && widget.dataItem($current.closest("tr")),
        item = ko.dataFor($current[0]);

    if (item, dataItem && dataItem.id) {
        vm.removeSample(item, dataItem.id);
    }
});

So, we get the grid instance by looking at the ancestors of the clicked element, then identify the dataItem by looking at the row that the clicked elements is in and finally use the id to remove the item.

Working fiddle here: http://jsfiddle.net/rniemeyer/L26q8/