We follow the article below to add a line separator with a context menu but the line separator is not coming.
https://paramquery.com/pro/demos/context_menuPlease refer to the attached screenshot and sample code below and advise.
$(function ()
{
//returns menu items for header cells, can be a callback or an array
function headItems(evt, ui) {
return [
{
name: 'Cancel Selected Order',
action: function () {
}
},
{
name: 'Modify Selected Order',
action: function () {
}
},
'separator',
{
name: 'Filter Order by Status',
subItems: [
{
name: 'Unconfirmed',
action: function (evt, ui, item)
{
}
},
{
name: 'Submitted',
action: function (evt, ui, item)
{
}
},
{
name: 'EPending',
action: function (evt, ui, item)
{
}
},
{
name: 'Executed',
action: function (evt, ui, item)
{
}
},
{
name: 'ERejected',
action: function (evt, ui, item)
{
}
},
{
name: 'ECancelled',
action: function (evt, ui, item)
{
}
},
{
name: 'SRCCancelled',
action: function (evt, ui, item)
{
}
}
]
},
'separator',
{
name: 'Cancel Bulk',
subItems: [
{
name: 'Cancel All Buy',
action: function (evt, ui, item)
{
}
},
{
name: 'Cancel All Sell',
action: function (evt, ui, item)
{
}
},
{
name: 'Cancel All Buy/Sell',
action: function (evt, ui, item)
{
}
}
]
},
'separator',
{
name: 'Grid Functions',
subItems: [
{
name: this.option('filterModel.header') ? 'Hide filter row' : 'Show filter row',
action: function () {
this.option('filterModel.header', !this.option('filterModel.header'));
this.refresh();
}
},
{
name: 'Auto fit Columns',
action: function () {
this.option('scrollModel', { autoFit: true });
this.refresh();
this.option('scrollModel', { autoFit: false });
this.refresh();
resizePQByGoldLayout();
}
},
{
name: 'Auto fit Content',
action: function () {
this.flex({ dataIndx: loColumns });
resizePQByGoldLayout();
}
},
{
name: 'Reset filter',
action: function () {
this.reset({ filter: true });
this.refresh();
}
},
{
name: 'Reset Sort',
action: function () {
this.reset({ filter: true });
this.refresh();
}
},
{
name: 'Save Grid State',
action: function () {
var liTableIndex = this.element[0].id.replace("gridfilter", "");
if (validatePortfolioSelection(liTableIndex))
saveDefaultParamQueryState(liTableIndex);
successmessage("Grid Default State Saved.", "250px");
setTimeout(function () { FitToContent(liTableIndex); }, 5000);
}
},
]
},
'separator',
{
name: 'Column Profile',
action: function () {
var liTableIndex = this.element[0].id.replace("gridfilter", "");
if (validatePortfolioSelection(liTableIndex))
showcolumnprofilepopup(liTableIndex);
}
},
{
name: 'Manage Order Book',
action: function () {
var liTableIndex = this.element[0].id.replace("gridfilter", "");
showportfoliopopup(liTableIndex);
}
},
]
}
var obj =
{
width: "auto",
flex: { one: true },
numberCell: { width: 60, show: false },
resizable: true,
filterModel: { on: true, header: false, type: 'local', menuIcon: false, hideRows: false }, //on: true, , hideRows: true
menuIcon: true,
selectionModel: { type: 'row', mode: 'block', column: false, toggle: false },
blur: function (evt, ui) {
mGridUIFocus = ui; //global var
},
editable: false,
stripeRows: false,
showTitle: false,
hwrap: false,
wrap: false,
strNoRows: 'No Orders found.',
contextMenu: {
init: function () { },
on: true,
headItems: headItems,
cellItems: headItems,
bodyItems: headItems,
},
pageModel: { rPP: 50 },
columnTemplate: {
filter: {
crules: [{ condition: 'contain' }]
}
/*resizable: true*/
},
colModel: fsTableHeaders,
rowInit: function (ui) {
if (ui.rowData.stOrderStatus == "Submitted" || ui.rowData.stOrderStatus == "Unconfirmed") {
return {
style: { "background": "#FDFDBD" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
else if (ui.rowData.stOrderStatus == "Executed") {
return {
style: { "background": "#C8FFD4" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
else if (ui.rowData.stOrderStatus == "EPending") {
return {
style: { "background": "#B8E8FC" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
else if (ui.rowData.stOrderStatus == "ECancelled") {
return {
style: { "background": "#B18FFF" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
},
cellSave: function (evt, ui) {
this.refreshRow({ rowIndx: ui.rowIndx });
},
create: function () {
var lsParamQueryGridState = $("#hfParamQueryGridState" + fiTableIndex).val();
if (lsParamQueryGridState != "" && lsParamQueryGridState != "null")
$("#gridfilter" + fiTableIndex).pqGrid("loadState", { state: lsParamQueryGridState, refresh: false });
var loGroupModel = $("#gridfilter" + fiTableIndex).pqGrid('option', 'groupModel');
if (loGroupModel.dataIndx.length > 0) {
this.Group().option({ on: true });
}
},
change: function () {
this.filter();
},
};
obj.dataModel =
{
method: "GET",
location: "remote",
beforeSend: function (jqXHR, settings) {
jqXHR.setRequestHeader("Content-Type", "application/json");
},
getUrl: [Web API URL],
getData: function (response) {
var data = [];
if (response.d != "") {
var loOrderJS = $.parseJSON(response.d);
data = loOrderJS; // loOrderJS.OrdersByFilter;
}
return { data: data }
},
error: function (jqXHR, textStatus, errorThrown) {
customalerterror('Error!', jqXHR.responseText, '500px');
}
};
var grid = pq.grid("#grid", obj);
grid.one('lazyProgress', function () {
this.flex();
});
});
