select rendering

[RedBully]

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.

[paramvir]

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.

[RedBully]

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.

[paramvir]

add this property to the column editor

Code: [Select]

getData: function (ui){
  return ui.$cell.find("select option:selected").text();
}


[RedBully]

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.

[RedBully]

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.

[paramvir]

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

Code: [Select]

editor: {
      type: 'select',
      options: VPbHoptionsDayOption,
      labelIndx: 'label',
      valueIndx: 'label'
}

no need to implement editor callback, getData or render.

[paramvir]

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

[RedBully]

Savekey already defined at the global editModel level but I'll try the simplified approach and see if that makes a difference.

[RedBully]

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.

[paramvir]

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

[RedBully]

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?

[RedBully]

Any idea why this wouldn't be working? Do you need any further info?

Ta.

[paramvir]

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