jQuery UI Widgets Forums Grid Grid ‘endcelledit’

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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

     

    • This topic was modified 10 years, 6 months ago by  Snehal.
    • This topic was modified 10 years, 6 months ago by  Snehal.
    • This topic was modified 10 years, 6 months ago by  Snehal.
    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/

    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

    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/

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

You must be logged in to reply to this topic.