Unable to reproduce a dropdownlist example

[MarcParticipant]

Hi,

[Context info]
I’m trying to implement on of the jqWidgets site demo code. From this page, select :

• Editing
• Custom DropDownList Column
• View Source tab

It is said that a picture tells thousand words, so here is an illustration that shows all the code flow :

On the right side, the diagram shows the Drop Down List data flow (value/label data -> source -> data adaptor).
On the left side, bottom-up, the grid data flow : grid data -> source -> data adaptor > data displayed in grid)

[Problem statement]

When I implement this code (unless there are bugs in my implementation), I can’t get the label (CustomerName in my case) displayed. Unstead, the value (CustomerID) gets displayed.

I’d normally think the bug is on my side, so I double or triple checked. What puzzles me, and it appears clearly on the diagram, is that, in gridSource, the field “Country”, which is the displayed one, has a ‘value’ property that points to countryCode in the database. While I would expect the gridSource countryCode field, not Country, to refer to it.

[Questions]
Am I missing something, or is there a mistake in the provided code ?
Is there a working example of a classical use of a dropdown list in a grid : storing the ID in the database, and entering/retrieving the associated label ?

Thank you

Marc.

[MarcParticipant]

To complete the previous post, even if I doubt it’s really useful, due to its size, here is the relevant part of my code.

`$(document).ready(function () {

// Customer Dropdown List – Source and DataAdapter
//——————————————————

var ddSrcCustomer =
{
datatype: “json”,
datafields: [
{ name: ‘CustomerID’ },
{ name: ‘CustomerFullName’ }
],
id: ‘CustomerID’,
url: ‘Customer/GetCustomers’
};

// create a new instance of the jqx.dataAdapter.
var ddDaCustomer = new $.jqx.dataAdapter(ddSrcCustomer, {
autoBind: true
});

// Grid – Date Format
//——————-
var dateFormat = “dd-MM-yyyy”;

// Grid – Source and DataAdapter
//——————————
var gSrcMission =
{
datatype: “json”,
datafields: [
{ name: ‘MissionID’ },
{ name: ‘Name’ },
{ name: ‘DateStart’, type: ‘date’, format: dateFormat },
{ name: ‘DateEnd’, type: ‘date’, format: dateFormat },
// {name: ‘DateStart’, type: ‘date’ },
// { name: ‘DateEnd’, type: ‘date’ },
{ name: ‘EmployeeID’ },
{ name: ‘CustomerID’, value: ‘CustomerID’, values: { source: ddDaCustomer.records, value: ‘CustomerID’, name: ‘CustomerFullName’} },
{ name: ‘CustomerFullName’ }
],

sortcolumn: ‘MissionID’,
id: ‘MissionID’,
url: ‘Mission/GetMissions’,
// update the grid and send a request to the server.
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘Mission/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true, data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘Mission/Delete/’ + rowid,
data: rowid,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
if (rowdata.DateStart != null) {
rowdata.DateStart = gDaMission.formatDate(rowdata.DateStart, dateFormat);
}
if (rowdata.DateEnd != null) {
rowdata.DateEnd = gDaMission.formatDate(rowdata.DateEnd, dateFormat);
}

$.ajax({
cache: false,
dataType: ‘json’,
url: ‘Mission/Update/’ + rowid,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
}
};

var gDaMission = new $.jqx.dataAdapter(gSrcMission);

// Initialize Grid
//—————-

$(“#gMissions”).jqxGrid(
{
width: 750,
source: gDaMission,
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
editable: true,
selectionmode: ‘singlerow’,
rendergridrows: function (obj) {
return obj.data;
},
theme: ‘ui-sunny’,
columns: [
{ text: ‘ID’, datafield: ‘MissionID’, width: 50 },
{ text: ‘Mission’, datafield: ‘Name’, width: 250 },
{ text: ‘Début’, datafield: ‘DateStart’, width: 100, cellsformat: dateFormat },
{ text: ‘Fin’, datafield: ‘DateEnd’, width: 100, cellsformat: dateFormat },
// { text: ‘Début’, datafield: ‘DateStart’, width: 150, cellsformat: dateFormat, columntype: ‘datetimeinput’ },
// { text: ‘Fin’, datafield: ‘DateEnd’, width: 150, cellsformat: dateFormat, columntype: ‘datetimeinput’ },
// { text: ‘Collaborateur’, datafield: ‘EmployeeID’, width: 0 },
{text: ‘Client’,
datafield: ‘CustomerID’,
displayfied: ‘CustomerFullName’,
width: 250,
columntype: ‘dropdownlist’,

createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({
source: ddDaCustomer,
valueMember: “CustomerID”,
displayMember: “CustomerFullName”
}); // Closing editor
}, // Closing createditor function

initeditor: function (row, cellvalue, editor) {
// alert(“initeditor”);
} // Closing initeditor function
} // Closing CustomerID definition
] // Closing columns property list
}); // Finally, closing mission grid definition

// Setup a selectedRow object, to be used below
//———————————————-
var selectedRow = {};
selectedRow.Index = -1;
selectedRow.ID = -1;

// CRUD Buttons
//——————-
$(“#btnAdd”).jqxButton({ theme: ‘ui-sunny’, width: ’60px’, height: ’18px’ });
$(“#btnUpdate”).jqxButton({ theme: ‘ui-sunny’, width: ’60px’, height: ’18px’ });
$(“#btnDelete”).jqxButton({ theme: ‘ui-sunny’, width: ’60px’, height: ’18px’ });

// ————- CRUD buttons code goes here / Removed for the sake of readability ————–

// Context CRUD menu
// —————–

// ————- Context CRUD menu code goes here / Removed for the sake of readability ————–

});

[MarcParticipant]

and just in case it helps, here my implementation custom diagram. Almost exactly the same as the previous one, except for some fields and variables names : Customer ID instead of countryCode, Customerfn (standing for CustomerFullName) instead of Country, etc.

Best regards

[Peter StoevKeymaster]

Hi Marc,

The sample is working fine. The problem in your code is that is assumes that source: ddDaCustomer.records contains something, but that’s an Empty Array at the point you refer to it because the ddDaCustomer makes an Ajax call. So, the solution is to set async: false to the ddDaCustomer’s source object.

Best Regards,
Peter Stoev

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

[MarcParticipant]

Hi Pete,

Thank you very much, that fixed half of the issue : the values now get correctly displayed when the grid is rendered.

However, when changing the selected value in the dropdown list, the udpate is triggered with wrong values : CustomerID contains the label, which should normally be in CustomerFullName. While CustomerFullName’s value is “” (empty string).

I’ll try to investigate it later, but if you have an easy fix, or a pointer to the doc, it would certainly be very helpful.

Thanks and regards.

[Author]

Posts