Custom Row Edit - Use default editor - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, custom, default, edit, editor, geteditorvalue, grid, jqxgrid, refresh, row, update, updatebounddata

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

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

Author

Custom Row Edit – Use default editor Posts

April 11, 2014 at 5:38 pm Custom Row Edit – Use default editor #52960

zbrady

Participant

I am using the custom row edit to enable a drop down list for the first row. However I do not want any additional custom editors after the first row.
Is it possible to say “if row is not zero create the default text editor” ?

           createeditor: function (row, cellvalue, editor, cellText, width, height) {
                if (row == 0) { 
                    editor.jqxDropDownList({ source: Array, width: width, height: height, autoDropDownHeight: true });
                }
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                if (row == 0) { 
                    editor.jqxDropDownList('val', cellvalue);
                }
            },
            geteditorvalue: function (row, cellvalue, editor) {
                if (row == 0) {
                    return editor.val();
                }
                return editor.val();
            }

April 14, 2014 at 9:27 am Custom Row Edit – Use default editor #53034

Dimitar

Participant

Hello zbrady,

Please refer to the demo Custom Row Editor, which shows how to assign a different editor for each row. Let’s say we do not need a custom editor for row number 1. Here is how to achieve it:

<!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/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.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 = new Array();
            data.push({ "Name": "Population", "Berlin": "3560154", "Boston": "3406829", "London": "8174100" });
            data.push({ "Name": "Country", "Berlin": "Germany", "Boston": "United States", "London": "United Kingdom" });
            data.push({ "Name": "Capital", "Berlin": "true", "Boston": "false", "London": "true" });

            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: 'Name', type: 'string' },
                    { name: 'Berlin', type: 'string' },
                    { name: 'Boston', type: 'string' },
                    { name: 'London', type: 'string' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            var createGridEditor = function (row, cellValue, editor, cellText, width, height) {
                // construct the editor.
                if (row == 0) {
                    editor.jqxNumberInput({ decimalDigits: 0, inputMode: 'simple', width: width, height: height, spinButtons: true });
                }
                else if (row == 1) {
                    var element = $('<input type="text" style="width: 100%; height: 100%;" />');
                    editor.append(element);
                    element.jqxInput();
                }
                else if (row == 2) {
                    var element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
                    editor.append(element);
                    element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: 16, height: 16 });
                }
            }

            var initGridEditor = function (row, cellValue, editor, cellText, width, height) {
                // set the editor's current value. The callback is called each time the editor is displayed.
                if (row == 0) {
                    editor.jqxNumberInput({ decimal: parseInt(cellValue) });
                }
                else if (row == 1) {
                    var inputHTMLElement = editor.find("input");
                    inputHTMLElement.jqxInput('val', cellValue);
                    inputHTMLElement.focus();
                }
                else if (row == 2) {
                    var checkBoxHTMLElement = editor.find('div:first');
                    checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
                }
            }

            var gridEditorValue = function (row, cellValue, editor) {
                if (row == 1) {
                    var inputHTMLElement = editor.find("input");
                    return inputHTMLElement.val();
                }
                else if (row == 2) {
                    var checkBoxHTMLElement = editor.find('div:first');
                    return checkBoxHTMLElement.val();
                }

                return editor.val();
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                editable: true,

                selectionmode: 'singlecell',
                columns: [
                  {
                      text: 'Name', pinned: true, editable: false, datafield: 'Name', width: 150
                  },
                  {
                      text: 'Boston', columntype: 'custom', datafield: 'Boston', width: 150,
                      createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
                  },
                  {
                      text: 'Berlin', columntype: 'custom', datafield: 'Berlin', width: 150,
                      createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
                  },
                  {
                      text: 'London', columntype: 'custom', datafield: 'London',
                      createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 15, 2015 at 12:51 pm Custom Row Edit – Use default editor #65423

Bradford

Participant

I am trying to find better documentation on how this custom editor integrates back to the data. I can’t seem to find anything beyond this example. When I run this example I see that the geteditorvalue is called when the editor loses focus. What is not clear to me is what is done with the value returned. It doesn’t seem to be getting back to the data array bound to the grid. I want to use this approach to allow editing of some back-end data. Will I need to explicitly call the geteditorvalue before the save or is there something that I can do to bind the grid cell value back to the client data array so that upon edit the value will be kept current so when I post the data back to the server it is most recent edited values?

January 16, 2015 at 6:37 am Custom Row Edit – Use default editor #65474

Dimitar

Participant

Hello Bradford,

geteditorvalue is a callback function. It cannot be called explicitly. You can read more about this function in the jqxGrid API Documentation, under columns.

You can call the method updatebounddata to update the bound data and refresh the grid. To do this for only one cell, however, you would need to make an Ajax call to retrieve the most recent value from the database and on success set the cell value with the method setcellvalue.

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.