Window instaed of Popup on click of "Edit" IN jqxGrid

[swatiParticipant]

Hi
I am using edit buttons in Grid.Since the pop up that opens on click of edit button given in example
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm
is limited to the area where the grid is present ,i want to open a new window on click of Edit that can be displayed at the center of a page.

How can it be done?
I also need the Grid row data ot be displayed in the new window that opens,and if “save ” is clicked ,then values must get saved in grid.Please help me.

[DimitarParticipant]

Hi swati,

The demo only needs a small modification for your requirement to be achieved:

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 200 },
        { text: 'Last Name', datafield: 'lastname', width: 200 },
        { text: 'Product', datafield: 'productname', width: 190 },
        { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
        { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
            return "Edit";
        }, buttonclick: function (row) {
            // open the popup window when the user clicks a button.
            editrow = row;
            var x = $(window).width() / 2 - 125;
            var y = $(window).height() / 2 - 110;
            var windowScrollLeft = $(window).scrollLeft();
            var windowScrollTop = $(window).scrollTop();
            $("#popupWindow").jqxWindow({ position: { x: x + windowScrollLeft, y: y + windowScrollTop} });

            // get the clicked row's data and initialize the input fields.
            var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
            $("#firstName").val(dataRecord.firstname);
            $("#lastName").val(dataRecord.lastname);
            $("#product").val(dataRecord.productname);
            $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
            $("#price").jqxNumberInput({ decimal: dataRecord.price });

            // show the popup window.
            $("#popupWindow").jqxWindow('open');
        }
        }
    ]
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts