jQuery Grid Plugin - jqGridForum

Topic RSS

how to overwrite savedRow when using tableToGrid?

11/03/2010
15:22

Akshitha

Member

Members

Forum Posts: 8

Member Since:
08/02/2010

Offline

Hi Tony,

   Am using tableToGrid function with Struts2. Am facing some issues when i try to update the row.Am doing Edit,Update & Cancel operation using tableToGrid. Problem is after i update in case of successful updation, am returning only "success" message from server side as a json data. Then am trying to retain the entered value in the row cells. By using setRowData i can achieve this. Scenario not working is:
    1. Edit 1st row & update it.
    2. Edit 2nd row & cancel it.
    3. Edit again 1st row & cancel it.
    4. Now if we edit any row, 1st row data changed to old value (as in edit function i've written for restoring the last selected row).

is there any way to set savedRow data? so that i can overwrite it after i get success message from server in update method..

My Code:

var lastSel="";

            $(document).ready(function(){
                tableToGrid("#CCS",{altRows: true,
                    colModel:[
                        {name:'Id',hidden:true},
                        {name:'Col1',align:"center",editable: true, editoptions:{name:"Col1"}},
                        {name:'Col2',align:"left",editable: true, editoptions:{name:"Col2"}},
                        {name:'Col3',align:"center",editable: true, editoptions:{name:"Col3"}},
                        {name:'Action'}
                    ],
                    afterInsertRow: function(rowId, rowdata, rowelem) {
                        $("#CCS").setCell(rowId,'4',"<input id='ed"+rowId+"' type='button' value='Edit' onclick='javascript:edit("+rowId+")' /> <input id='save"+rowId+"' type='button' value='Save' onclick='javascript:save("+rowdata.Id+")'/> <input id='can"+rowId+"' type='button' value='Cancel' onclick='javascript:cancel("+rowId+")' />",'');
                        jQuery("#save"+rowId+"").hide();
                        jQuery("#can"+rowId+"").hide();
                    }
                });
            });

            function edit(id) {
                jQuery("#ed"+id+"").hide();
                jQuery("#save"+id+"").show();
                jQuery("#can"+id+"").show();

                if(id && id!==lastSel){
                    $('#CCS').jqGrid('restoreRow',lastSel);
                    jQuery("#ed"+lastSel+"").show();
                    jQuery("#save"+lastSel+"").hide();
                    jQuery("#can"+lastSel+"").hide();

                    $('#CCS').jqGrid('editRow',id,true);
                    lastSel=id;
                }
            }

            function save(id){
                $.post('<s:url namespace="/test" action="update"/>',
                    {
                        "Col1" : $('input[name="Col1"]').val(),
                        "Col2" : $('input[name="Col2"]').val(),
                        "Col3" : $('select[name="Col3"]').val(),
                        "Id":id
                    },
                    function(json) {
                        if(json.status == 'success'){
                            $('#CCS').jqGrid('setRowData',id,{"Col1":$('input[name="Col1"]').val(),"Col2":$('input[name="Col2"]').val(),

"Col3":$('select[name="Col3"]').val()})
                        }
                    },
                    "json"
                );
            }


            function cancel(id){
                $('#CCS').jqGrid('restoreRow',id);
                jQuery("#save"+id+"").hide();
                jQuery("#can"+id+"").hide();
                jQuery("#ed"+id+"").show();

            }
        </script>
    </head>

    <body>
        <s:form >
            <table id="CCS">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Col1</th>
                        <th>Col2</th>
                        <th>Col3</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <s:if test="beans.size > 0">
                        <s:iterator value="beans">
                            <tr>
                                <td><s:property value="id"/></td>
                                <td><s:property value="col1"/></td>
                                <td><s:property value="col2"/></td>
                                <td><s:property value="col3"/></td>
                            </tr>
                        </s:iterator>
                    </s:if>
                </tbody>
            </table>
        </s:form>
    </body>
</html>

15/03/2010
20:41

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Seems like there are no uniquie roiId's in the grid. Please check this

The savedRow is parameter of the grid so you can manipulate it with setGridParam and getGridParam

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.

23/03/2010
14:35

Akshitha

Member

Members

Forum Posts: 8

Member Since:
08/02/2010

Offline

Hi Tony,

I can achieve it in the following manner.

$('#CCS').setGridParam({savedRow:null});
$('#CCS').setGridParam({savedRow:[]});

$('#CCS').setGridParam({savedRow:[{"Id":$.trim($("#CCS").getCell(rowId, 0)),"Col1":$('input[name="Col1"]').val(),"Col2":$('input[name="Col2"]').val(),"Col3":$('input[name="Col3"]').val()}]});

// Setting the row from editable to non-editable
$('#'+rowId).attr("editable","0");

// Updating the values
$('#'+rowId+'>td:eq(1)').html($('input[name="Col1"]').val());

$('#'+rowId+'>td:eq(2)').html($('input[name="Col2"]').val());

$('#'+rowId+'>td:eq(3)').html($('input[name="Col3"]').val());

// Resetting to empty, otherwise again the edit operation on the same row wont work.
lastSel="";

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
40 Guest(s)

Currently Browsing this Page:
1 Guest(s)