Hi Team,
I have a grid that has two custom command buttons. I assigned a different function for each button. Ideally, if the user clicks the first button it would go to SearchItemNo function, if it's the second it will go to SeachUnit function. But if I click either of the button it will only route to SearchUnit function. Is there something I'm doing wrong?
$(function () {
$('#ShipmentGrid').ejGrid({
...
columns: [
{ field: "EmployeeID", headerText: "Employee ID", width: 150 },
{
headerText: "Search Item",
headerTemplateID: "#searchTemplate",
width: 60,
allowEditing: false,
commands: [
{
type: "details",
buttonOptions: {
text: "...",
width: "15",
click: "SearchItemNo",
}
}
],
isUnbound: true,
textAlign: ej.TextAlign.Center,
},
{ field: "Unit", headerText: "Unit", width: 100, editType: ej.Grid.EditingType.Dropdown, dataSource: Units },
{
headerText: "",
headerTemplateID: "#searchTemplate",
width: 60,
allowEditing: false,
commands: [
{
type: "details",
buttonOptions: {
text: "...",
width: "15",
click: "SearchUnit",
}
}
],
isUnbound: true,
textAlign: ej.TextAlign.Center,
},
});
});
function SearchItemNo(args) {
var grid = $("#Grid").ejGrid("instance");
var index = this.element.closest("tr").index();
$("#dialogItemSearch").ejDialog("open");
}
function SearchUnit(args) {
var grid = $("#Grid").ejGrid("instance");
var index = this.element.closest("tr").index();
var record = grid.getCurrentViewData()[index];
}
I also tried to make a way around it by using a template for the second custom command, like so
{ field: "SearchUnit", headerText: "", width: 60, allowEditing: false, headerTemplateID: "#searchTemplate", templateID: "#searchUnitTemplate" },
but the output was rather unappealing and nothing like the way the custom command button was rendered in the grid.
Thanks.
