Akshitha on how to overwrite savedRow when using tableToGrid?

Tue, 23 Mar 2010 14:35:12 +0200

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="";

tony on how to overwrite savedRow when using tableToGrid?

Mon, 15 Mar 2010 20:41:13 +0200

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

Akshitha on how to overwrite savedRow when using tableToGrid?

Thu, 11 Mar 2010 15:22:20 +0200

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>

jQuery Grid Plugin - jqGrid - Topic: how to overwrite savedRow when using tableToGrid?

Akshitha on how to overwrite savedRow when using tableToGrid?

tony on how to overwrite savedRow when using tableToGrid?

Akshitha on how to overwrite savedRow when using tableToGrid?