Scroll bar not maintaining its position once jqxWindow gets opened

[vinuParticipant]

Hi,
I have used jqxgrid in my web application.My requirement is when we a click a cell of a column in that jqxgrid,jqxwindow needs to opened corresponding to that cell. It works fine in top rows and center rows of grid. But When we scroll the vertical scroll bar of jqxgrid to bottom row and click on the cell, the jqxwindow gets opened but vertical scroll bar moves to top rows once the jqxwindow gets opened.I retrieved the scroll position of bottom rows and used the top and left position in scroll offset to maintain the scrollbar but it is not working. Could anyone please help me? Any help is appreciated.

function loadGrid(data, ref, undo) {
//debugger;
try {
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘ProductionResource’, type: ‘string’ },
{ name: ‘Series’, type: ‘string’ },
{ name: ‘ItemStatus’, type: ‘string’ },
{ name: ‘FutureStatus’, type: ‘string’ },
{ name: ‘Abc1Code’, type: ‘string’ },
{ name: ‘ItemNumber’, type: ‘string’ },
{ name: ‘FirmDemands’, type: ‘number’ },
{ name: ‘NetForecast’, type: ‘number’ },
{ name: ‘PromotionalLift’, type: ‘number’ },
{ name: ‘TotalReceipts’, type: ‘number’ },
{ name: ‘ItemQuantity’, type: ‘number’ },
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#mainData”).jqxGrid(
{
width: ’99.5%’,
pageable: false,
height: ’100%’,
rowsheight: 30,
altrows: true,
source: dataAdapter,
groupable: true,
groups: [‘Series’],
showgroupsheader: false,
groupsrenderer: function (defaultText, group, state, params) {
//return “<div style=’margin: 5px;’>” + group + “</div>”;
return “<div style=’margin: 5px;’>” + ” + “</div>”;
},
groupsexpandedbydefault: true,
sortable: false,
filterable: true,
//filtermode: ‘excel’,
columnsresize: true,
columnsreorder: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
//autoshowfiltericon: false,
showfilterrow: false,
columnmenuopening: function (menu, datafield, height) {
var column = $(“#mainData”).jqxGrid(‘getcolumn’, datafield);
if (column.filtertype === “custom”) {
menu.height(1000);
setTimeout(function () {
menu.find(‘input’).focus();
}, 25);
}
else menu.height(height);
},
columns: [
{ text: ‘Production Resource’, datafield: ‘ProductionResource’, width: ’8.5%’, editable: false, groupable: false },
{ text: ‘Series’, datafield: ‘Series’, width: ’8.5%’, editable: false, groupable: true },
{ text: ‘Item Status’, datafield: ‘ItemStatus’, width: ’8.5%’, editable: false, groupable: false },
{ text: ‘Future Status’, datafield: ‘FutureStatus’, width: ’6%’, editable: false, groupable: false },
{ text: ‘ABC 1 (Tiers)’, datafield: ‘Abc1Code’, width: ’5%’, editable: false, groupable: false },
{ text: ‘Item #’, datafield: ‘ItemNumber’, width: ’8.5%’, editable: false, groupable: false },
{ text: ‘Firm Demands’, datafield: ‘FirmDemands’, width: ’6%’, editable: false, groupable: false },
{ text: ‘Net Forecast’, datafield: ‘NetForecast’, width: ’6%’, editable: false, groupable: false },
{ text: ‘Promotional Lift Qty’, datafield: ‘PromotionalLift’, width: ’8%’, editable: false, groupable: false },
{ text: ‘Total Receipts’, datafield: ‘TotalReceipts’, width: ’6.5%’, editable: false, groupable: false },
}] });
$(“#mainData”).on(“cellclick”, function (event) {
if (event.args.datafield == “ReasonCode”) {
//open the popup window when the user clicks a button.
editrow = event.args.rowindex;
var position = $(‘#mainData’).jqxGrid(‘scrollposition’);
var offset = $(“#mainData”).offset();
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
//$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
$(“#popupWindow”).jqxWindow({ position: { x: (parseInt(event.args.originalEvent.clientX) – 280) + 5 + scrollLeft, y: parseInt(event.args.originalEvent.clientY) + 5 + scrollTop } });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#mainData”).jqxGrid(‘getrowdata’, editrow);
$(“#reasoncode”).val(dataRecord.ReasonCode);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
$(‘#mainData’).jqxGrid(‘scrolloffset’, position.top, position.left);
}
}
catch (e) {
alert(e.message);
}

[HristoParticipant]

Hello vinu,

Do you have any error messages?
I tested with the newest version and this example seems to work fine.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts