Column header menu not refreshing

[priyamsharma2704Participant]

Hi, I created a context menu for column headers so that i can hide/show columns. But when I click on any option, after hiding the column, the menu does not shows up again.

<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var theme = “”;
// prepare the data
var data = generatedata(25);
//prepare the source
var source =
{
localdata: data,
datatype: ‘array’,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
};
//data adapter for grid
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$(‘#jqxgrid’).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 190 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 90, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});
//list source for column chooser popup
var listSource = [
{ label: ‘First Name’, value: ‘firstname’, checked: true },
{ label: ‘Last Name’, value: ‘lastname’, checked: true },
{ label: ‘Product’, value: ‘productname’, checked: true },
{ label: ‘Quantity’, value: ‘quantity’, checked: true },
{ label: ‘Price’, value: ‘price’, checked: true}
];
//initialize the column chooser list
$(‘#columnList’).jqxListBox({ source: listSource, width: 200, height: 200, theme: theme, checkboxes: true });

// code for check box selection
$(‘#columnList’).on(‘checkChange’, function (event)
{
//grid coulumn show hide on check box click
$(‘#jqxgrid’).jqxGrid(‘beginupdate’);
if (event.args.checked)
{
$(‘#jqxgrid’).jqxGrid(‘showcolumn’, event.args.value);
}
else
{
$(‘#jqxgrid’).jqxGrid(‘hidecolumn’, event.args.value);
}
$(‘#jqxgrid’).jqxGrid(‘endupdate’);
}
);

var textData = new Array();
var cols = $(“#jqxgrid”).jqxGrid(“columns”);
for (var i = 0; i < cols.records.length; i++) {
textData[i] = cols.records[i].text;
}
//convert array to dict
var result = textData.map(function(x) {
return ({label: x});
});
var contextMenuHeight = cols.records.length * 30; //30 is for one entry
var flag = false;
console.log(result);

// create context menu
var contextMenu = $(‘#Menu’).jqxMenu({source:result, width: 130, height: contextMenuHeight, autoOpenPopup: false, mode: ‘popup’, theme: theme});

// assign context menu to grid
$(‘#jqxgrid’).on(‘contextmenu’, function () {
return false;
});
//———————-HANDLING THE CLICK EVENT—————————————–
$(‘#Menu’).on(‘itemclick’,function(event){
var args = event.args;
if(flag === false)
{
var x = $.trim($(args).text());
x = x.split(” “).join(“”).toLowerCase();
console.log(“if = ” + x);
//$(“#jqxgrid”).jqxGrid(‘hidecolumn’,x);
flag = true;
}
else
{
var y = $.trim($(args).text());
y = y.split(” “).join(“”).toLowerCase();
console.log(“else = ” + y);
//$(“#jqxgrid”).jqxGrid(‘showcolumn’,x);
flag = false;
}
});

//—————————————————————-
//gird column header click event
$(‘#jqxgrid’).find(‘#columntablejqxgrid’).on(‘contextmenu’, function (event)
{
//var column = event.args.datafield;
//$(‘#jqxgrid’).find(‘#columntablejqxgrid’).css({‘color’:’red’,’border’:’2px solid red’})

//if (event.which === 3) {
//column = event.args.datafield;
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);

return false;
// }
});

// initialize the popup window .
$(‘#popupWindow’).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01,title :’Choose Column’ });
$(‘#popupWindow’).jqxWindow(‘hide’);

});
</script>

[HristoParticipant]

Hello priyamsharma2704,

Could you clarify your issue?
Do you receive any error message in the console?
And also, it will be better if you provide us the whole code (HTML elements, too).
The preferred way is in https://www.jseditor.io/ or https://fiddle.jshell.net/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts