ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: RedBully on March 17, 2014, 07:56:23 pm
-
I think this should be pretty standard, simple out of the box functionality but haven't been able to find/ modify an example so that when I select a drop down element it is the text of the option that is displayed in the grid cell rather than the value (as it seems to be by default):
var VPbHoptionsDayOption = [{ "0": "Sat" }, { "1": "Sun" }, { "2": "Mon" }, { "3": "Tue" }, { "4": "Wed" }, { "5": "Thu" }, { "6": "Fri" } ];
{
title: 'DayOption',
editor: {
type: 'select',
options: VPbHoptionsDayOption
},
width:100,
},
This is a stripped down example of what I'm trying to achieve anyway.
Ta.
-
By default
1) value of select list is saved into dataModel.data of the grid.
2) view of the cell is rendered from dataModel.data unless overridden by render callback.
So if you want to see text of the select list in the cell, then either use
the format [ "Sat", "Sun", "Mon" ...]
or override the view of the cell with render callback.
-
Ta. It'll have to be the latter as this is for the form of data coming in and then out to the database - standard key -value pairs.
If you have an example handy you can point me at all the better.
Cheers.
-
add this property to the column editor
getData: function (ui){
return ui.$cell.find("select option:selected").text();
}
-
Thanks but I had understood I needed to use render to translate the value to the text. Here's what I have now as I'm making little progress:
{
title: 'DayOption',
editable: true, width: 200,
dataType: 'select',
editor: {
type: function (ui) { oa.editMultipleChoiceCell(ui, VPbHoptionsDayOption); },
getData: function (ui) {
return ui.$cell.find("select option:selected").text();
}
},
render: function (ui) { oa.RenderMultipleChoiceCell(ui, VPbHoptionsDayOption); }
},
//TODO CS 14.03 - displaying value rather than text in the grid
oa.editMultipleChoiceCell = function (ui, arr) {
oa.log('ParamGrid: Editing MultipleChoice Cell');
var $cell = ui.$cell;
var data = ui.data;
//this won't work with Pro API
//var cellData = $.trim(data[ui.rowIndx][ui.colIndx]);
var cellData = $.trim(ui.rowData[ui.column.dataIndx]);
var str = "";
for (var i = 0; i < arr.length; i++) {
var label = arr.label;
var value = arr.value;
//we are assuming the cell will contain the 'label' string rather than the value
//we need to make sure this is the case
if (cellData == label)
str += "<option value='" + value + "' selected='selected'>" + label + "</option>";
else
str += "<option value='" + value + "'>" + label + "</option>";
}
var $sel = $("<select style='width: 100%; height: 100%'>" + str + "</select>")
.appendTo($cell);
}
//we need to override the default render of a grid cell containing a multiselect so that it is the text/ label of a select rather than the value (as stored in the grid)
oa.RenderMultipleChoiceCell = function (ui, arr) {
var cellData = $.trim(ui.rowData[ui.column.dataIndx]);
for (var i = 0; i < arr.length; i++)
{
var label = arr.label;
var value = arr.value;
//we are assuming the cell will continue the 'label' string rather than the value
//we need to make sure this is the case
if (cellData == value)
//returning the corredt value but this is not rendering in the UI
return label;
}
return "";
}
var VPbHoptionsDayOption = [
{ label: 'Sat', value: 0 },
{ label: 'Sun', value: 1 },
{ label: 'Mon', value: 2 },
{ label: 'Tue', value: 3 },
{ label: 'Wed', value: 4 },
{ label: 'Thu', value: 5 },
{ label: 'Fri', value: 6 }];
Currently:
The grid is not rendering the text returned correctly by oa.RenderMultipleChoiceCell.
The default 'Enter' is not updating the value in the grid - it does nothing (GetData is hence not firing?)
Thanks in advance.
-
Making some progress - was missing a return in the call to render - now text is coming back instead of values.
Main issue remaining (hopefully) is that when the editor (dropdownlist) is rendered enter isn't selecting the current value/ exiting from edit mode.
-
It's a lot easier for the below data:
var VPbHoptionsDayOption = [
{ label: 'Sat', value: 0 },
{ label: 'Sun', value: 1 },
{ label: 'Mon', value: 2 },
{ label: 'Tue', value: 3 },
{ label: 'Wed', value: 4 },
{ label: 'Thu', value: 5 },
{ label: 'Fri', value: 6 }];
editor: {
type: 'select',
options: VPbHoptionsDayOption,
labelIndx: 'label',
valueIndx: 'label'
}
no need to implement editor callback, getData or render.
-
Main issue remaining (hopefully) is that when the editor (dropdownlist) is rendered enter isn't selecting the current value/ exiting from edit mode.
It requires saveKey propery of editModel
http://paramquery.com/pro/api#option-editModel
-
Savekey already defined at the global editModel level but I'll try the simplified approach and see if that makes a difference.
-
Thanks - a combination of your code and mine seems to be working. I needed the render function as well to present the initial data from the db.
I would be interested to know if you have any idea why my global saveKey isn't working for my custom editor
editor: {
type: function (ui) { oa.editMultipleChoiceCell(ui, VPbHoptionsDayOption); },
getData: function (ui) {
return ui.$cell.find("select option:selected").text();
}
},
Thanks for the help today. Hopefully this will get easier as my knowledge of the grid increases as there is lots more to be done.
-
check it should be in camelCase saveKey
Have you implemented cellEditKeyDown event.
var $sel = $("<select style='width: 100%; height: 100%'>" + str + "</select>")
you should add name and class as shown for custom editor in this demo
http://paramquery.com/pro/demos/editing_custom
-
Thanks. Just noticed:
editor: {
type: 'select',
options: VPbHoptionsDayOption,
labelIndx: 'label',
valueIndx: 'value'
},
with
var VPbHoptionsDayOption = [
{ label: 'Sat', value: 0 },
{ label: 'Sun', value: 1 },
{ label: 'Mon', value: 2 },
{ label: 'Tue', value: 3 },
{ label: 'Wed', value: 4 },
{ label: 'Thu', value: 5 },
{ label: 'Fri', value: 6 }];
isn't rendering { label: 'Sat', value: 0 }, in the select. Strange?
-
Any idea why this wouldn't be working? Do you need any further info?
Ta.
-
It isn't taking 0 because it's equating it with "" which is incorrect and would be fixed in next version.
Could you make it "0" which is supposed to work instead of 0