Editing JqxComboBox inside JqxGrid issue

[nitinjambhaleParticipant]

How do I edit(add new) item in jqxComboBox inside jqxGrid.
Currently when I add new item in it, its getting blank

[ChristopherParticipant]

Hi nitinjambhale,

New items are added as a source to the jqxComboBox. In a scenario where the jqxComboBox is used as a columtype for a column in a jqxGrid it uses the Grid’s source. You can also set a separate data source to the jqxComboBox if you like. Please provide a code sample so we can understand what exactly is the difficulty you’re facing.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[nitinjambhaleParticipant]

There is a separate datasource for jqxComboBox..
Here is the code…

  $("#myGrid").jqxGrid(
            {
                height: gridHeight,
                //width: gridwidth,
                source: source,
                filterable: true,
                sortable: false,
                pageable: false,
                autoheight: false,
                autowidth: true,
                columnsresize: true,
                columnsreorder: false,
                enabletooltips: true,
                editable: true,
                columns: [
                    {
                        text: "PLine", datafield: "MPLineID", displayfield: 'Pl', columntype: 'combobox', width: 250, editable: true,
                        createeditor: function (row, column, editor) {
                            // assign a new data source to the combobox.

                            editor.jqxComboBox({ source: dataAdapterpl, displayMember: "Pl", valueMember: "MPLineID", autoComplete: true });

                            editor.bind('select', function (event) {
                                if (event.args != undefined) {
                                    var item = event.args.item;
                                    if (item) {
                                        //var value = item.value;
                                        var label = item.label;

                                        GetPlDetailsNew(label);
                                    }
                                }
                            });
                        },
                        // update the editor's value before saving it.
                        cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            // return the old value, if the new value is empty.
                            if (newvalue == "") return oldvalue;
                        }
                    }
                ]
            });

    $("#myGrid").on('cellbeginedit', function (event) {
        var args = event.args;
        var columnDataField = args.datafield;
        var rowIndex = args.rowindex;
        var cellValue = args.value;
    });

    $("#myGrid").on('cellendedit', function (event) {
        var args = event.args;
        var columnDataField = args.datafield;
        var rowIndex = args.rowindex;
        var cellValue = args.value;
        var oldValue = args.oldvalue;
        
        $(args).jqxComboBox('addItem', args.value);
        //$(args).jqxComboBox('addItem', { label: args.value, value: '0' });
        $("#myGrid").jqxGrid('setcellvalue', "Pl", args.value);        
    });

[ChristopherParticipant]

Hi nitinjambhale,

$(args).jqxComboBox('addItem', args.value); The problem is that “args” isn’t valid. “args” doesn’t contain an instance of the jqxComboBox. You need to create a global variable for example “comboBoxInstance” and in the “createeditor” function assign the instance of the jqxComboBox to that variable, so you can later make a call to it in the cellendedit function. Here’s what i have in mind:

var comboBoxInstance;
            $("#myGrid").jqxGrid {
            ...
            columns: [
                    {
                        text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'combobox', editable: true,
                        createeditor: function (row, value, editor) {
                            editor.jqxComboBox({ source: countriesAdapter, displayMember: 'label', valueMember: 'value', multiSelect: true });
                            comboBoxInstance = editor;
                        },
                        ...
           }

$("#myGrid").on('cellendedit', function (event) {
        var args = event.args;
        var columnDataField = args.datafield;
        var rowIndex = args.rowindex;
        var cellValue = args.value;
        var oldValue = args.oldvalue;
        
        comboBoxInstance.jqxComboBox('addItem', args.value);
        //$(comboBoxInstance).jqxComboBox('addItem', { label: args.value, value: '0' });
        $("#myGrid").jqxGrid('setcellvalue', "Pl", args.value);        
    });

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[nitinjambhaleParticipant]

Thnx Christopher…Its Done!!!

[Author]

Posts