Forum

July 10th, 2011
You must be logged in to post Login Register

Search Forums:


 






Home Forum Help Losing edited cell data after paging

Losing edited cell data after paging
Page:   1  
No Tags
UserPost

14:05
12/07/2010


jqwha

Member

posts 18
Print this Post
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

10:51
13/07/2010


jqwha

Member

posts 18
Print this Post
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

11:26
13/07/2010


tony

Sofia, Bulgaria

Moderator

posts 7009
Print this Post
3

Post edited 08:30 – 13/07/2010 by tony

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

12:36
13/07/2010


jqwha

Member

posts 18
Print this Post
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>

    <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>

    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
    <link type="text/css" href="css/ui.jqgrid.css" rel="stylesheet" />

    <script type="text/javascript" src="script/jquery-ui-1.8.1.custom.min.js"></script>

    <script type="text/javascript" src="script/i18n/grid.locale-en.js"></script>

    <script type="text/javascript" src="script/jquery.jqGrid.min.js"></script>

    <script src="script/json2.js" type="text/javascript"></script>

    <script type="text/javascript">
        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, null, null, 'clientArray');
                        lastgridsel = id;
                    }
                }
            });
        });

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

        }
    </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>

12:51
13/07/2010


tony

Sofia, Bulgaria

Moderator

posts 7009
Print this Post
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

13:08
13/07/2010


jqwha

Member

posts 18
Print this Post
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:53
13/07/2010


tony

Sofia, Bulgaria

Moderator

posts 7009
Print this Post
7

Hello,

Ok. There is problem callin the data this way:

here is the working example

    <script type="text/javascript">
        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,
                localReader : {id:'AID'},
                sortname: 'AID',
                sortorder: 'desc',
                cellsubmit: 'clientArray',

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

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


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


Regards.

Problem Closed


Tony

14:20
13/07/2010


jqwha

Member

posts 18
Print this Post
8

Works great! Thank you SO much!

Bill
No Tags
Page:   1  
Topic RSS

About the jQuery Grid Plugin – jqGrid forum

Most Users Ever Online:

157


Currently Online:

67 Guests

Forum Stats:

Groups: 1

Forums: 7

Topics: 9595

Posts: 28789

Membership:

There are 10190 Members

There have been 448 Guests

There is 1 Admin

There are 2 Moderators

Top Posters:

OlegK – 1157

markw65 – 179

kobruleht – 144

phicarre – 126

YamilBracho – 124

Renso – 118

Administrators: admin (56 Posts)

Moderators: tony (7009 Posts), Rumen[Trirand] (81 Posts)




Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information