jQuery Grid Plugin - jqGridForum

12/07/2010
14:05

jqwha

Member

Members

Forum Posts: 18

Member Since:
07/07/2010

Offline

1

Hi,

I'm building a completely "client side" grid however if I enable inline editing, the changes I make are lost if I change the grid page.

Hopefully someone can point out what I'm missing

The Grid setup is shown below along with the function I call to fill it with test data:

        var myGrid;
        var lastgridsel;
        jQuery(document).ready(function() {
                myGrid = jQuery("#mygrid").jqGrid({
                datatype: 'local',
                colModel: [
                        { name: 'AID', label: 'AID', index: 'AID', width: 100, editable: false, sorttype: "int" },
                        { name: 'MS', label: 'MS', index: 'MS', width: 300, editable: false },
                        { name: 'GROUP', label: 'GROUP', index: 'GROUP', width: 100, editable: false },
                        { name: 'REV', label: 'REV', index: 'REV', width: 100, editable: false },
                        { name: 'OPT', label: 'OPT', index: 'OPT', width: 100, editable: true, edittype: 'text' }
                      ],
                pager: '#mypager',
                rowNum: 10,
                rowList: [10, 20, 500],
                viewrecords: true,
                loadonce: true,
                autowidth: true,
                sortname: 'AID',
                sortorder: 'desc',
                cellsubmit: 'clientArray',

                onSelectRow: function(id) {
                    if (id && id !== lastgridsel) {
                        jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray');
                        jQuery('#mygrid').editRow(id, true);
                        lastgridsel = id;
                    }
                }
            });
        });

        var mydata = [];
        function InitNew() {
            for (var i = 0; i < 100; i++) {
                mydata.push({ AID: i, MS: "123", GROUP: "456", REV: "78", OPT: "8" });
            }
            myGrid.setGridParam({ data: mydata }).trigger("reloadGrid");

}

This shows 10 pages, 100 records. If I click the "OPT" column, I can change the value in the textbox and when I click another row, the data appears to be saved. However, once I go to another page and back to the first page, the data reverts to its original value.

Hope someone can help (FWIW this is an urgent issue - aren't they all? 🙂 Would really appreciate a hint.

Thanks,

Bill

13/07/2010
10:51

jqwha

Member

Members

Forum Posts: 18

Member Since:
07/07/2010

Offline

2

Hi - was wondering if this really is a bug? I just can't get it to persist the data.

Thanks for any help you can give,

Bill

13/07/2010
11:26

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

3

Hello,

Just tested your example copyng the code to my demo.

I wonder how this work in your system.

In order to work this do

…

onSelectRow: function(id) {
   if (id && id !== lastgridsel) {
         jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray');
         jQuery('#mygrid').editRow(id, true, null, null, 'clientArray');
         lastgridsel = id;
   }
}

…

or just set

editurl:'clientArray'

in the grid options ommiting this parameter in saveRow and editRow

Best 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.

13/07/2010
12:36

jqwha

Member

Members

Forum Posts: 18

Member Since:
07/07/2010

Offline

4

Hi Tony,

Thanks for getting back so quickly. Unfortunately I just tried you suggestion and it didn't work 🙁

I also tried combinations of 'clientArray' in the editRow/saveRow and as an option parameter - but no luck.

Hope you can help? I've included the whole file below.

Thanks,

Bill

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJQGridClientArrayFromAC.aspx.cs"
Inherits="TestWebStuff.TestJQGridClientArrayFromAC" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        html, body
        {
            margin: 0;
            padding: 0;
            font-size: 75%;
        }
    </style>

                onSelectRow: function(id) {
                    if (id && id !== lastgridsel) {
                        jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray');
                        jQuery('#mygrid').editRow(id, true, null, null, 'clientArray');
                        lastgridsel = id;
                    }
                }
            });
        });

}
</script>

</head>
<body>
    <form id="form1" runat="server">
    <table id="mygrid">
    </table>
    <div id="mypager">
    </div>
    <input type="button" id="btnGo" value="Go" onclick="InitNew()"/>
    </form>
</body>
</html>

13/07/2010
12:51

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

5

Hello,

Sorry I tested it with my data omithing the fact that you add it this way.

Add this in your grid configuration

..jqGrid({

...

localReader : {id:"AID"},

...

})

More here:

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

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.

13/07/2010
13:08

jqwha

Member

Members

Forum Posts: 18

Member Since:
07/07/2010

Offline

6

Hey Tony,

I added localReader but it still didn't work. I update the cell, click another row and the changes seem to stay. However, when I page forward and back - they revert to the original 🙁

Was that the only change I had to make? I'm reading the additional page you sent but am not sure what else would help.

I should mention that this is being tested in IE6, however I used FFox 3.0 (just to be sure) too but had the same problem.

Thanks,

Bill

13/07/2010
13:53

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

7

Hello,

Ok. There is problem callin the data this way:

here is the working example

                onSelectRow: function(id) {
                    if (id && id !== lastgridsel) {
                        jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray');
                        jQuery('#mygrid').editRow(id, true, null, null, 'clientArray');
                        lastgridsel = id;
                    }
                }
            });
        });

You will need to manually refresh the index if you call it this way for the first time

Regards.

Problem Closed

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.

13/07/2010
14:20

jqwha

Member

Members

Forum Posts: 18

Member Since:
07/07/2010

Offline

8

Works great! Thank you SO much!

Bill