[ioanaParticipant]

Below the source code:

$(document).ready(function () {

var column;

var data = [{
“firstname”: {
“value”: “Ioana”
}

}, {
“firstname”: {
“value”: “Mary”
}
}, {
“firstname”: {
“values”: [{
“labelKey”: “Firstname 1”,
“value”: “firstname_1”
}, {
“labelKey”: “Firstname 2”,
“value”: “firstname_2”
}],
“value”: “firstname_2”
}
}];

var getCellValues = function (row, column) {
var values = [];
var rowObject = data[row];
var cellData = rowObject[column];
if (cellData.values != null) {
values = cellData.values;
}
return values;
}

var getCellType = function (row, column) {
var cellProperties = [{
“0firstname”: {
“cellType”: “string”
},
“1firstname”: {
“cellType”: “string”
},
“2firstname”: {
“cellType”: “dropdownlist”
}
}];

var cellType = ‘string’;
var key = row + column;
var cellProp = cellProperties[0][key];
cellType = cellProp.cellType;
return cellType;
};

var source = {
localdata: data,
datatype: “json”,
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
datafields: [{
name: ‘firstname’,
map: ‘firstname.value’
}, {
name: ‘lastname’,
map: ‘lastname.value’
},

]
};

var settings = {
mapChar: ‘.’
};

var dataAdapter = new $.jqx.dataAdapter(source, settings);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid({
width: “100%”,
source: dataAdapter,
editable: true,
theme: “”,
selectionmode: ‘multiplecellsadvanced’,
columns: [{
text: ‘First Name’,
datafield: ‘firstname’,
columntype: ‘custom’,
createeditor: function (row, cellValue, editor, cellText, width, height) {
var cellType = getCellType(row, column);
var cellValues = getCellValues(row, column);

if (cellType === ‘dropdownlist’) {
editor.jqxDropDownList({
autoDropDownHeight: true,
width: width,
height: height,
source: cellValues,
displayMember: ‘labelKey’,
valueMember: ‘value’
});
} else {
var inputElement = $(“”).prependTo(editor);
inputElement.jqxInput({
displayMember: cellValue,
width: width,
height: height
});

}
},
initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
var cellType = getCellType(row, column);
if (cellType === ‘dropdownlist’) {
editor.jqxDropDownList(‘selectItem’, cellvalue);
} else {
var inputField = editor.find(‘input’);
if (pressedkey) {
inputField.jqxInput(‘selectLast’);
inputField.val(pressedkey);
} else {
inputField.val(cellvalue);
inputField.jqxInput(‘selectAll’);
}
}
},
geteditorvalue: function (row, cellvalue, editor) {
var cellType = getCellType(row, column);
if (cellType === ‘dropdownlist’) {
var optionValue = editor.val();
return optionValue;
} else {
return editor.find(‘input’).val();
}
}
}

]
});
// events
$(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
var args = event.args;
column = args.datafield;

});

});

 

[ioanaParticipant]

Hi Peter,

I am using now the Grid version 3.0.2.
As described in my initial question, I have a grid with different type of cell editors (string and dropdown).

The data model for the dropdown is a complex structure, with value and label, similar to the structure found in gridkeyvaluescolumnwitharray.htm.

Since our requirements are for a real grid, I can not set the value of the columntype to ‘dropdownlist’, but to “template” or “custom”.
The grid works just fine, the editors are cell based. The only problem is that the dropdown displayes the values, and not the labels.

I used the “gridkeyvaluescolumnwitharray.htm” example, since there I found a dropdown with complex data structure in grid. In this example I’ve changed the columntype from “dropdownlist” to “template”, and the result is that the dropdown labels are no longer displayed after select. Instead the value is displayed.

Can you please provide me a solution to this problem, or an example with a grid containing a dropdown cell (not column, not row), where the dropdown model contains “label” and “value”?

Thank you,

Ioana

[ioanaParticipant]

Sounds good, thank you.

Regards,
Ioana

[ioanaParticipant]

Hi again,

could you please let me know for which future version (approximately release date) can we expect this functionality?

Thank you

Ioana

[ioanaParticipant]

Hi,

thank you :).

Regards,
Ioana

[ioanaParticipant]

Hi again,

getCellType is not important. It is the way to check what kind of value is expected.
validateValueForCellType is checking the the value is of expected type.

showcellerror is using your API:

	self.showcellerror = function(args, grid, message) {
		grid.jqxGrid('showvalidationpopup', args.rowindex, args.datafield,
				message);
	}

For all other cells in the grid: condition is met, code is executed, message is displayed.
For the last cell in the grid: the condition is met, the code is executed, but the message is not displayed.

All cells are expecting the same type of value: a numeric value.
It seems that there is a display issue. Probably the <div style="overflow: hidden” …./>

Regards,
Ioana

[Author]

Posts