jqxCombobox – unselecting dynamically added item

[AbijeetParticipant]

Hi, I’m facing the following problem –

I have a column with column type – combobox and different display and value fields.

 text: 'Ship City', datafield: 'ShipName', width: 150, columntype: 'combobox', displayfield: 'ShipCity',

On the

createeditor

event, I’m running the following code to bind data to the combobox,

var list = [{ 'vendor_name': 'Stutgart', 'vendor_id': '1' }, { 'vendor_name': 'Rio de Janeiro', 'vendor_id': '2' }, { 'vendor_name': 'Stutg2art', 'vendor_id': '3'}];
editor.jqxComboBox({ source: list, displayMember: 'vendor_name', valueMember: 'vendor_id', id: 'ddlVendorName', searchMode: 'containsignorecase', autoComplete: true, autoDropDownHeight: false, dropDownHeight: 250 });

I’m letting the user create his/her own option by running the following code on the cellvaluechanged event –

	cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
		// return the old value, if the new value is empty.
		var intCount = 0;
		if (newvalue == "") return oldvalue;
		// Check if value is present.
		var items = _editor.jqxComboBox('getItems');
		for (var intItemCount = 0; intItemCount < items.length; intItemCount++) {
			if (items[intItemCount].label == newvalue) {
				intCount++;
				// Can break if the item is found, means we don't have to process again.
				break;
			}
		}
		debugger;
		if (intCount == 0) {
			if (oldvalue != newvalue) {
				//debugger;
				_editor.jqxComboBox('insertAt', { label: newvalue, value : 0 }, 0);
				_editor.jqxComboBox('selectIndex', 0);
			}
		}
	}

Now the dynamically added element is getting added at the first index, but it isn’t getting selected. I’m also getting an error stating that

Object # has no method ‘toUpperCase’

[AbijeetParticipant]

Also here is a demo page

[DimitarParticipant]

Hello Abijeet,

Access of the editor through cellvaluechanging is not supported. The supported parameters are row, column, columntype, oldvalue and newvalue. You can access the editor in the initeditor, createeditor and geteditorvalue callback functions.

Best Regards,
Dimitar

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

[AbijeetParticipant]

Thanks Dimitar,

Where are these documented?

[AbijeetParticipant]

Also when does the geteditorvalue callback function fire?

[DimitarParticipant]

Hi Abijeet,

For more information on these callback functions, please refer to the columns entry in jqxGrid’s API Documentation.

Best Regards,
Dimitar

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

[AbijeetParticipant]

Thanks again!

How exactly would I use the

geteditorvalue

?

When is this callback fired, it says we have to override this? How would that implementation work?

[DimitarParticipant]

Hi Abijeet,

The geteditorvalue is used to change the value returned by an editor. Here is an example:

columns: [
    {
        text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox',
        createeditor: function (row, column, editor) {
            // assign a new data source to the combobox.
            var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
            editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Please Choose:" });
        },
        // 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;
        },
        geteditorvalue: function (row, cellvalue, editor) {
            // return the editor's value.
            return editor.val() + "123";
        }
    },

In this case, if the editor returns “Strasbourg”, geteditorvalue will return “Strasbourg123”.

Best Regards,
Dimitar

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

[AbijeetParticipant]

Thanks! Dimitar

[Author]

Posts