DropDownList as cell editor in Grid

[hzeiMember]

Hi,

I have a jqxGrid, where an editable column is defined as columntype ‘dropdownlist’. The list itself is defined in a data array and assigned as the source in createeditor(). This works fine for normal lists. Once I use categories (group), the dropdownlist shows strange behavior: I can select a value, which is stored correctly in the data record. But when I select that field again and the dropdownlist is created (not yet opened), the value changes automatically.

I have tested with versions 2.5.5 and 2.4.2

Here is a sample code to reproduce that issue. It’s a modified version of the cellediting.htm demo (only the $(document).ready part).

anyone got an idea how to solve that?
thanks,
Harald

$(document).ready(function () {
var theme = “”;

// prepare the data
var data = generatedata(200);
var productList =
[
{ “group”: “Tea”, “product”:”Black Tea” },
{ “group”: “Tea”, “product”:”Green Tea” },
{ “group”: “Espresso”, “product”:”Caffe Espresso” },
{ “group”: “Espresso”, “product”:”Doubleshot Espresso” },
{ “group”: “Coffee”, “product”:”Caffe Latte” },
{ “group”: “Coffee”, “product”:”White Chocolate Mocha” },
{ “group”: “Coffee”, “product”:”Caramel Latte” },
{ “group”: “Coffee”, “product”:”Caffe Americano” },
{ “group”: “Coffee”, “product”:”Cappuccino” },
{ “group”: “Espresso”, “product”:”Espresso Truffle” },
{ “group”: “Espresso”, “product”:”Espresso con Panna” },
{ “group”: “Coffee”, “product”:”Peppermint Mocha Twist” }
];

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);
}
};

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

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 680,
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,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ source: productList, valueMember: “product”, displayMember: “product” });
}
},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 110, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
if (value == “”)
return true;

var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: “Ship Date should be before 1/1/2013” };
}
return true;
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (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’, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (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”).bind(‘cellbeginedit’, function (event) {
var args = event.args;
$(“#cellbegineditevent”).html(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});

$(“#jqxgrid”).bind(‘cellendedit’, function (event) {
var args = event.args;
$(“#cellendeditevent”).html(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
});

[Peter StoevKeymaster]

Hi hzei,

The built-in jqxDropDownList in jqxGrid does not enable Groups. As you customize the editor for your scenario, you will have to customize its selection behavior, too. You can do that in the “initeditor” callback. In that function, you can set the editor’s selectedIndex.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts