jQWidgets Forums

This topic contains 7 replies, has 3 voices, and was last updated by Peter Stoev 11 years ago.

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

Author

Grid row Inline Edit – data read issue Posts

October 23, 2012 at 8:45 am Grid row Inline Edit – data read issue #9916

himaja

Member

Hi,

In the grid I have made a column as editable column. After editing the cell, and when the focus of the cursor is still in the cell when I click save button or do any action and when I try to read data, the edited value of the cell on which the cursor focus was existing is not being read.

Is there any way to handle this problem, other than forcing the user to press enter after an edit. This happens even for dropdown column in grid.
Please suggest.

Thanks

October 23, 2012 at 8:51 am Grid row Inline Edit – data read issue #9918

Peter Stoev

Keymaster

Hi himaja,

When the focus is lost, the cell automatically goes to “non edit mode” and the cell’s value is changed. This is valid from jQWidgets 2.5. In addition, using the endcelledit method you can exit the edit mode through the API.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 6, 2012 at 8:57 am Grid row Inline Edit – data read issue #10574

himaja

Member

Hi,

I have started using jqwidgets 2.5. Cellendedit event is fired only when enter key is pressed or only when a mouse click happens on the grid area. If a mouse click happens on the area other than grid then the event is not being fired.

I am using cellendedit to capture the edited cell values. This issue is present even for the dropdown list cell in the grid. On selection of a value of dropdown list column the cell end edit event is not fired.

Please suggest.

Thanks

November 6, 2012 at 9:04 am Grid row Inline Edit – data read issue #10575

Peter Stoev

Keymaster

Hi himaja,

The cellendedit event is raised when the cell is no longer in edit mode. In ver. 2.5, an edit cell goes to non-edit mode even if a click happens ouside the Grid. You can try this in this sample: cellediting.htm. Open a cell for edit and click outside the Grid. The event log below the Grid shows that the cellendedit event is raised.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 15, 2012 at 1:32 am Grid row Inline Edit – data read issue #11031

himaja

Member

Hi,

The cell end edit event is being fired when a click happens out side the gird.
I am facing an issue when there is a save button. On cell end edit, I am capturing the modified data and on clicking of save button, the data is being sent to database.

When a cell edit happens and on direct click of save button – first button click event is happening and then cellendedit event is being fired.
since button click event is happening first, The modified data of the last cell is not being captured.

Please suggest.

Thanks

November 15, 2012 at 5:48 am Grid row Inline Edit – data read issue #11035

Peter Stoev

Keymaster

Hi himaja,

Another option is to manually call the endcelledit method when you click on the button.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 29, 2014 at 5:45 pm Grid row Inline Edit – data read issue #53738

mdols

Participant

Peter,

I am implementing dynamic, computed columns in a grid and would like to update dependent row columns when the selected index is changed in a column with a dropdownlist without having to change focus. Is there any way to fire the endcelledit event when the selected index is changed on the column’s dropdownlist or can you suggest an alternate approach?

Thanks in advance,
Mike

April 30, 2014 at 3:13 pm Grid row Inline Edit – data read issue #53780

Peter Stoev

Keymaster

Hi Mike,

Example for end edit after selecting DropDownList item:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You 
    can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
    the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();

            // 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);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                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,
                      initeditor: function (row, value, editor) {
                          editrow = row;
                      },
                      createeditor: function (row, value, editor) {
                          editor.on('change', function (event) {
                              if (event.args.type == "keyboard" || event.args.type == "mouse") {
                                  $("#jqxgrid").jqxGrid('endcelledit', editrow, "productname");
                              }
                          });
                      }
                  },
                  { 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 >= 2014) {
                              return { result: false, message: "Ship Date should be before 1/1/2014" };
                          }
                          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
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
        });
    </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>
</body>
</html>

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.