jQuery UI Widgets Forums Grid Scroll bar not maintaining its position once jqxWindow gets opened

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 7 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • vinu
    Participant

    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);
    }

    • This topic was modified 7 years, 3 months ago by  vinu.

    Hristo
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.