How to set up jqxListBox of jqxGrid programmatically

Question

How to set up jqxListBox of jqxGrid programmatically

3.4k Views Asked by user2723490 At 26 April 2025 at 14:49

I have a jqxGrid with jqxListBox inputs as cells. How can I set the cells' values programmatically by selecting their jqxListBox index?

See a demo here:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28web%29#demos/jqxgrid/customrowcelledit.htm

For a standalone jqxListbox, it can be simply done as

$("#jqxListBox").jqxListBox('selectIndex', 0 );

But how can I do it if it is part of the grid? I need to change cell values after the grid is initialized. Overwriting cell values instead of changing the selected index is not a good solution.

Original Q&A

There are 1 best solutions below

**scripto** · Accepted Answer

You need to use the "initeditor" callback function of the Column. The same demo is below, but with the jQWidgets ListBox instead of the jQWidgets DropDownList as an editor.

<!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="../../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 = 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', theme: theme, width: width, height: height, spinButtons: true });
                }
                else if (row == 1) {
                    editor.jqxListBox({theme: theme, width: width, height: height, source: ['United States', 'Germany', 'United Kingdom']});
                }
                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, theme: theme });
                }
            }

            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) {
                    editor.jqxListBox('selectItem', cellValue);
                }
                else if (row == 2) {
                    var checkBoxHTMLElement = editor.find('div:first');
                    checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
                }
            }

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

                return editor.val();
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 600,
                rowsheight: 60,
                autoheight: true,
                source: dataAdapter,
                editable: true,
                theme: theme,
                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>

Hope this helps you.

How to set up jqxListBox of jqxGrid programmatically

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQXGRID

Related Questions in JQXWIDGETS

Trending Questions

Popular # Hahtags

Popular Questions