Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Data Grid › Problem with RowMenuCommand › Reply To: Problem with RowMenuCommand
Hello Peter,
Thanks for this first answer.
As a workaround, I tried to replace the row menu button by a link inside a grid column, but I experience issues while adding Events on these links !
I tried several ways :
In grid initialisation, I used a formatFunction inside the columns section , with the following code :
{label: 'Action', width: '30px', cellsAlign: 'right', allowResize: false, align: 'right', dataField: 'Status', allowGroup: false,
formatFunction(settings) {
if (settings.value === 'Active') {
settings.template = '<div></div>';
} else {
settings.template = '<div></div>';
}
}
}
With the following eventHandling after the grid load :
var oEnableItemList = document.querySelectorAll(".appenableitem");
oEnableItemList.forEach(function(item) {
item.addEventListener('click',function(event) {
console.log(event.target);
});
});
var oDisableItemList = document.querySelectorAll(".appdisableitem");
oDisableItemList.forEach(function(item) {
item.addEventListener('click',function(event) {
alert(event.target);
});
});
Without any success : the DOMNodeLists of the querySelector are empty.
Other way :
{label: 'Action', width: '30px', cellsAlign: 'right', allowResize: false, align: 'right', dataField: 'Status', allowGroup: false,
formatFunction(settings) {
if (settings.value === 'Active') {
settings.template = '<div></div>';
} else {
settings.template = '<div></div>';
}
}
}
With the following functions :
function enableMyItem(element) {
alert('enableItem');
}
function disableMyItem (element) {
alert('disableItem');
}
ends with :
ReferenceError : enableMyItem is undefined.
ReferenceError : enableMyItem is undefined.
Can you tell me where I’m wrong ? Did I miss something ?