jQuery UI Widgets Forums Grid Inline edit issue in Grid

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Inline edit issue in Grid #58286

    annfredin
    Participant

    grid with inline edit, not retrieving last cell value.
    i am using below line
    $(‘#grid’).jqxGrid(‘getrowdatabyid’, id);

    Inline edit issue in Grid #58304

    Dimitar
    Participant

    Hello annfredin,

    We experience no such issue (jQWidgets version 3.4.0). Here is an example, based on the demo Full Row Edit:

    <!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/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="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    },
                    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: 'date', type: 'date' }
                    ]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    editable: true,
                    selectionmode: 'singlerow',
                    editmode: 'selectedrow',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                      {
                          text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                          validation: function (cell, value) {
                              if (value == "")
                                  return true;
    
                              var year = value.getFullYear();
                              if (year >= 2015) {
                                  return { result: false, message: "Ship Date should be before 1/1/2015" };
                              }
                              return true;
                          }
                      },
                      {
                          text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 150) {
                                  return { result: false, message: "Quantity should be in the 0-150 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                          }
                      },
                      { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 15) {
                                  return { result: false, message: "Price should be in the 0-15 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ digits: 3 });
                          }
    
                      }
                    ]
                });
    
                // events
                var rowValues = "";
                $("#jqxgrid").on('cellbeginedit', function (event) {
                    var args = event.args;
                    if (args.datafield === "firstname") {
                        rowValues = "";
                    }
                    rowValues += args.value.toString() + "    ";
                    if (args.datafield === "price") {
                        $("#cellbegineditevent").text("Begin Row Edit: " + (1 + args.rowindex) + ", Data: " + rowValues);
                    }
                });
    
                $("#jqxgrid").on('cellendedit', function (event) {
                    var args = event.args;
                    if (args.datafield === "firstname") {
                        rowValues = "";
                    }
                    rowValues += args.value.toString() + "    ";
                    if (args.datafield === "price") {
                        $("#cellbegineditevent").text("End Row Edit: " + (1 + args.rowindex) + ", Data: " + rowValues);
                    }
                });
    
                $("#getRowData").click(function () {
                    var row = $("#jqxgrid").jqxGrid("getrowdatabyid", 0);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
                margin-top: 30px;">
                <div id="cellbegineditevent">
                </div>
                <div style="margin-top: 10px;" id="cellendeditevent">
                </div>
            </div>
        </div>
        <button id="getRowData">
            Get first row data</button>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Inline edit issue in Grid #58310

    annfredin
    Participant

    i have placed Save,Delete button inside the grid,
    and when i click on the button the last cell which i am editing, not being retrieved,

    var addcellsrenderer = function (row, column, value) {
    return ‘<div class=” grid-row-icon add-row” onClick=”addCustomerDeposit(‘ + row + ‘)”></div>’;
    }

    //Column strcture
    columns: [
    { text: “Customer Name”, datafield: ‘CustomerName’, columntype: ‘textbox’ },
    { text: “Deposit”, datafield: ‘Deposit’, columntype: ‘numberinput’ },
    { text: “Plan Name”, datafield: ‘PlanName’, columntype: ‘textbox’, editable: true },
    { text: “Add”, datafield: ‘Add’, cellsrenderer: addcellsrenderer, cellsalign: ‘center’ ,width : ’65’,editable:false},
    { text: “Delete”, datafield: ‘Delete’, cellsrenderer: deletecellsrenderer, cellsalign: ‘center’, width: ’65’, editable: false }
    ]
    //Event not getting PlanName value.
    saveCustomerDeposit = function (row) {
    var datarow = $(“#gridCustomerDeposit”).jqxGrid(‘getrowdata’, row);
    //i am performing server side up date logic
    }
    i know the reason, because the last cell value not being committed, before that click event triggered.

    Inline edit issue in Grid #58350

    Dimitar
    Participant

    Hi annfredin,

    Are you sure datarow does not contain a PlanName field? Or is the issue that PlanName is not committed to the server?

    Best Regards,
    Dimitar

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

    Inline edit issue in Grid #58354

    annfredin
    Participant

    Yes, PlanName field returning as empty.
    if i hit “enter” button then it’s working.

    Inline edit issue in Grid #58361

    Dimitar
    Participant

    Hi annfredin,

    Could you, please, create a small example at http://jsfiddle.net/ demonstrating the issue? We are still not sure how to reproduce it.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.