In the DataTable I have a column called ItemType (SharePoint 2019). Depending on the value in this column, how can I add or not a button with a different text as in the image below:
Dear @Cumatale,
That is a little tricky, but possible, here's an example where one button will duplicate row, another will show an alert, and the other rows will have no buttons:
fd.spRendered(function() {
//select the DataTable control to add new column to
var dt = fd.control('DataTable1');
var columns = dt.widget.options.columns;
var customRowDataItem = null;
var isCustomAdd = false;
window.copyItem = function(e) {
e.preventDefault();
customRowDataItem = dt.widget.dataItem($(e.currentTarget).closest("tr"));
isCustomAdd = true;
dt.widget.addRow();
}
window.alertItem = function(e) {
e.preventDefault();
var item = dt.widget.dataItem($(e.currentTarget).closest("tr"));
alert(item['Column1']);
}
//specify what the column will be like
columns.push({
field: 'command',
title: '',
filterable: false,
sortable: false,
editable: function() {
return false;
},
template: function(data) {
switch (data['Column1']) {
case 'Item1':
return '<a role="button" class="k-button k-button-icontext" href="#" onclick="window.copyItem(event)"><span class="k-icon k-i-copy"></span> Copy</a>';
case 'Item2':
return '<a role="button" class="k-button k-button-icontext" href="#" onclick="window.alertItem(event)"><span class="k-icon k-i-bell"></span> Alert</a>';
}
return '';
}
});
dt.widget.setOptions({
columns: columns
});
// re-render commands after change
dt.$on('change', function() {
dt.widget.refresh();
});
// handle copy row logic
dt.widget.bind('edit', function(e) {
if (isCustomAdd && e.model.isNew()) {
isCustomAdd = false;
for (var i = 0; i < columns.length; i++) {
var field = columns[i].field;
if (field) {
e.model.set(field, customRowDataItem[field]);
}
}
e.sender.closeCell(e.container);
}
});
});
1 Like
Not that it works, but it just flies!
A beer from me - thanks Nikita!
1 Like