Forum

May 22nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Losing edited cell data after paging
12/07/2010
14:05
jqwha
Member
Forum Posts: 18
Member Since:
07/07/2010
Offline

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
Forum Posts: 18
Member Since:
07/07/2010
Offline

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
Forum Posts: 7679
Member Since:
30/10/2007
Offline

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 PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site - trirand.net - by the very same guys that created jqGrid.
13/07/2010
12:36
jqwha
Member
Forum Posts: 18
Member Since:
07/07/2010
Offline

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>

13/07/2010
12:51
tony
Sofia, Bulgaria
Moderator
Forum Posts: 7679
Member Since:
30/10/2007
Offline

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 PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site - trirand.net - by the very same guys that created jqGrid.
13/07/2010
13:08
jqwha
Member
Forum Posts: 18
Member Since:
07/07/2010
Offline

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
Forum Posts: 7679
Member Since:
30/10/2007
Offline

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

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site - trirand.net - by the very same guys that created jqGrid.
13/07/2010
14:20
jqwha
Member
Forum Posts: 18
Member Since:
07/07/2010
Offline

Works great! Thank you SO much!

Bill

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online: OlegK
79 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1233

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11317

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10523

Posts: 31110

Newest Members: Loganathan.S, krish, jqGridForStruts, shrat, wheeliea, dontbannedme

Moderators: tony: 7679, Rumen[Trirand]: 81

Administrators: admin: 61

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information