We are using ejs-grid with multiple columns and contextMenu. It looks like following code pasted here:
What we need is a custom action on "contextMenuClick" and it is there, but we also need to know on WHICH row is the action performed. args.rowData is undefined for some reason. Help would be very much appreciated! :)
<template>
<ejs-grid ref="grid" v-bind="usersGridModel" v-if="usersGridModel" (contextMenuClick)="contextMenuClick($event)">
</ejs-grid>
</template>
<script lang="ts">
export default defineComponent({
components: {
"ejs-grid": GridComponent,
},
setup() {
const grid = ref<GridComponent>();
const usersGridModel = ref<GridModel>();
function setupGrid() {
usersGridModel.value = {
...gridPreset,
contextMenuItems: [
"Edit",
"Delete",
{ separator: true },
{ text: "Suspend Account" }
],
toolbar: [],
dataSource: new DataManager({
...dataManagerPreset(),
url: "/api/users"
} as DataOptions),
selectionSettings: {
type: "Multiple",
enableSimpleMultiRowSelection: true
},
columns: [
{
type: "checkbox"
} as ColumnModel,
{
field: "id",
isPrimaryKey: true,
headerText: t(TEnum.ID),
allowResizing: true
} as ColumnModel,
{
field: "name",
headerText: t(TEnum.Name),
allowResizing: true,
valueAccessor: (_field, data) => {
const user = data as User;
return `${user.name} ${user.surname}`;
}
} as ColumnModel,
{
field: "accountType",
headerText: t(TEnum.AccountType),
allowResizing: true
} as ColumnModel,
{
field: "isActive",
headerText: t(TEnum.Status),
displayAsCheckBox: true,
textAlign: "Center" as TextAlign,
allowResizing: false,
width: "70"
} as ColumnModel,
],
actionBegin: (args: AddEventArgs | EditEventArgs) => {
const user = args.rowData as User;
console.log("actionBegin");
switch (args.requestType) {
case "beginEdit": {
router.push({
name: RouteName.UserEdit,
params: { id: String(user.id) }
});
args.cancel = true;
break;
}
case "add": {
router.push({
name: RouteName.UserAdd
});
break;
}
}
},
//
contextMenuClick: function(args: any) {
console.log("onSelect");
if (args?.item.text === "Suspend Account") {
console.log("onSelect SuspendAcc", args);
//args.rowInfo is udenfined and we really need this in order to determine to which row we want to apply this custom action
}
}
//
} as GridModel;
}
function openAddView() {
router.push({ name: RouteName.UserAdd });
}
onUnmounted(() => {
grid.value?.$children.map(child => child.$destroy());
});
onMounted(async () => {
roles.value = await getRoles();
setupGrid();
});
return {
grid,
usersGridModel,
};
}
});
</script>
