jQuery Grid Plugin - jqGridForum

Topic RSS

Page shifts when adding new record

18/02/2010
18:36

paulm

New Member

Members

Forum Posts: 2

Member Since:
17/02/2010

Offline

I've got a very simple form that has a jqGrid 3.6.4 on it. I've stripped out everything I thought might be an issue - it's nothing more than a grid and a few buttons. The problem I'm running into is when I click on the Add button the entire grid is shifted down (usually by the height of the popup). Here's a sample page to show what I'm talking about:

$(document).ready(function () {

        $("#grdInvoice").jqGrid({
            url: 'http://localhost/GetInvoice.htm',
            datatype: "json",
            colNames: ['Category', 'Part #', 'Description', 'Cost', 'PK'],
            colModel: [
                { name: 'Category', index: 'Category', width: 110, editable: true, edittype:"select", editoptions: {value:"A:A;B:B"} },
                { name: 'PartNumber', index: 'PartNumber', width: 170, editable: true, editoptions: { size: 20} },
                { name: 'Description', index: 'Description', width: 200, editable: true, editoptions: { size: 30} },
                { name: 'Cost', formatter: 'currency', align: "right", formatoptions: { prefix: "$" }, index: 'Cost', width: 95, editable: true, editoptions: { size: 10} },
                { name: 'PK', hidden: true, editable: false}
            ],
            caption: "Invoice",
            viewrecords: true,
            cellsubmit: 'clientArray',
            editurl: "http://localhost/Nothing.htm"
        });

        $("#btnAdd").click(function () {
            $("#grdInvoice").jqGrid('editGridRow', "new", { height: 200, width:400, reloadAfterSubmit: false });
        });

        $("#btnEdit").click(function() {
            var selRow = $("#grdInvoice").jqGrid("getGridParam", "selrow");
            if (selRow != null)
                $("#grdInvoice").jqGrid("editGridRow", selRow);
            else
                alert("Please select a row.");

});

        $("#btnDelete").click(function() {
            var selRow = $("#grdInvoice").jqGrid("getGridParam", "selrow");
            if (selRow != null)
                $("#grdInvoice").jqGrid("delGridRow", selRow);
             else
                alert("Please select a row.");
        });
    });
    </script>
</head>
<body>

Here's what the JSON data looks like:

{"total":"2","page":"1","records":"2","userdata":{"Customer":"Total","Amount":0.00,"Paid":0},"rows":[{"id":"0","cell":["2/15/2010","ABC123 ","55555","Mr. Sample Customer","0.00","0","Open","/Invoice.aspx"]},{"id":"1","cell":["2/17/2010","ABC124 ",null,"Mrs. Another Sample","0.00","0","Open","/Invoice.aspx"]}]}

20/02/2010
12:46

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

read carfully the docs.

http://www.trirand.com/jqgridw.....to_install

You will need to add DOCTYPE

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
81 Guest(s)

Currently Browsing this Page:
1 Guest(s)