That’s the simple part. First, let’s add the delete method to our model.
model.js:
const model = new UIKernel.Models.Grid.Collection({
// ...
});
model.delete = function (id) {
this.data = _.reject(this.data, (record) => record[0] === id);
return Promise.resolve(id);
};Next, let’s create a new column named tools and configure it. We’ll set its width by defining the width property.
The render method will return the remove button.
Inside onClickRefs we’ll define a function for removing grid records.
columns.js:
const columns = {
tools: {
width: 50,
render: [() => '<a href="javascript:void(0)" ref="del">[X]</a>'],
onClickRefs: {
del: (event, recordId, record, grid) => { // ref="del" click handler
grid.getModel()
.delete(recordId)
.then(() => {
grid.updateTable();
});
}
}
},
// ...
};That’s it. Now we can remove grid records.