user interface - Can't remove item of Kendo web grid with knockout -
i've kendo web grid combined knockout. last column of grid contains button remove row. parameter of removeitem method
this.removeitem = function (item) { this.filteredclients.remove(item); }.bind(this);
gets wrong value.
look @ http://jsfiddle.net/zeqmt/93/
what's missing?
btw. don't want use row templates because want set columns titles myself.
if not using row templates, not seamless bind in manner. there couple of pretty easy ways though can handle click on button in cell, find data item associated row, locate view model item.
for example, can bind columns like:
columns: [ { field: "id", title: "id"}, { field: "name", title: "name"}, { command:[{text: "x", click: removeitem}]} ]
then, removeitem
function need locate appropriate view model item like:
this.removeitem = function(e) { var dataitem = this.dataitem($(e.currenttarget).closest("tr")); if (dataitem && dataitem.id) { self.items.remove(function(item) { return item.id === dataitem.id; }); } };
sample: http://jsfiddle.net/rniemeyer/epkpy/
if want keep view model code cleaner (avoid referencing events/elements in it), attach handler locates item , call view model. preference.
something like:
columns: [ { field: "id", title: "id"}, { field: "name", title: "name"}, { command:[{text: "x", classname: "btnremove" }]} ]
then, attach handler unobstrusively button like:
$("#mygrid").on("click", ".btnremove", function(e) { var widget = $("#selectedservices").data("kendogrid"); var dataitem = widget.dataitem($(e.currenttarget).closest("tr")); if (dataitem && dataitem.id) { vm.removeitem(dataitem.id); } });
the removeitem
method on vm take in id like:
this.removeitem = function(id) { self.items.remove(function(item) { return item.id === id; }); };
Comments
Post a Comment