Grid ‘endcelledit’ - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cancel, Cell, change, endcelledit, grid, jqxgrid, refreshdata

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Grid ‘endcelledit’ Posts

October 31, 2013 at 5:26 am Grid ‘endcelledit’ #31662

Snehal

Participant

Hi,

When i edit any cell data, and i don’t want to save the changes which i edited.. i want to cancel the changes… For that i used “endcelledit” and refresh grid data.. it cancel the cell editing, but still cell is showing the newly added data in it, it is not refreshing and not showing old cell data.

grid properties i set :

editable: true,
selectionmode: ‘singlecell’,
editmode: ‘click’,

Cancel editing and show cell data that was before editing :

$("#cancel").click(function(){
$("#grid").jqxGrid('endcelledit', rowIndex, dataField, true);
 $("#grid").jqxGrid('refreshdata');
});

Please provide a solution for this, is there any other changes needed…?

Thanks & Regards,

Snehal

October 31, 2013 at 6:45 am Grid ‘endcelledit’ #31675

Dimitar

Participant

Hello Snehal,

You do not need refreshdata to cancel the changes. Here is a working example, with a button which cancels the changes made to the first cell on the first row:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var data = generatedata(200, true);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#cancel").click(function () {
                $("#jqxgrid").jqxGrid('endcelledit', 0, "firstname", true);
            });
        });
    </script>
</head>
<body class='default'>
    <button id="cancel">
        Cancel changes</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 1, 2013 at 4:06 am Grid ‘endcelledit’ #31730

Snehal

Participant

Hi Dimitar,

Thank you… ,

I tried this example, but the data that i change is not setting back the old data.

e.g Edit product cell value “Green Tea” with “Black Tea” , and now if don’t want this edited value then click on cancel button to set it’s

old value ,

and see it cancels the editing but not setting “Green Tea” value back into that cell, even if i cancels the changes.

Thanks & Regards,
Snehal

November 1, 2013 at 9:21 am Grid ‘endcelledit’ #31751

Dimitar

Participant

Hello Snehal,

We investigated the reported issue. To successfully cancel the changes, bind to the button’s mousedown event, i.e.:

$("#cancel").mousedown(function () {
    $("#jqxgrid").jqxGrid('endcelledit', 0, "firstname", true);
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.