This is a migrated thread and some comments may be shown as answers.

DropDownList in grid display value instead of text after resolving edit mode

3 Answers 891 Views
Grid
This is a migrated thread and some comments may be shown as answers.
KBN
Top achievements
Rank 1
KBN asked on 08 Aug 2012, 03:10 PM
My drop down list, which is in a grid column is set up as follows:

...
editor: function (container, options) {
                      $('<input data-bind="value:Operator"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            optionLabel: " ",
                            dataSource: Adhoc._operatorDataSource,
                            dataTextField: "Description",
                            dataValueField: "ID",                        });
                  },
...

The control works as expected in edit mode, but when the control resolves from edit mode, the ID is displayed in the grid column. I want the text to be displayed in the grid column. What is necessary to make this happen?

Thanks!

3 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 08 Aug 2012, 05:44 PM
The way that I have solved this is to use a template for the grid column that takes the id, looks up the value and returns the value to be displayed in the field.

Let's say that I had a grid that displays a list of people and their positions.  Here is the data:

var gridData = [
    { id: 1, name: "John", positionId: 1 }
];
  
var dropdownData = [
    { id: 1, position: "Software Engineer" },
    { id: 2, position: "QA Engineer" },
    { id: 3, position: "Requirements Analyst" }
];

I would define the grid as follows where the positionId column has a template that calls a function to look up the name of the position to display:

$("#grid").kendoGrid({
    dataSource: gridData,
    columns: [
        {
            field: "name",
            title: "Name"
        },
        {
            field: "positionId",
            title: "Position",
            template: "${displayPosition(positionId)}",
            editor: function (container, options) {
                $("<input />")
                    .attr("data-bind", "value:positionId")
                    .appendTo(container)
                    .kendoDropDownList({
                        dataSource: dropdownData,
                        dataTextField: "position",
                        dataValueField: "id"
                    });
            }
        }
    ],
    editable: true
});

And finally, here is the displayPosition function that looks up the position based on the id passed in:

function displayPosition(id) {
    var position = "";
    $.each(dropdownData, function() {
        if (this.id == id) {
            position = this.position;
            return false;
        }
    });
    return position;
}

Attached is a working example.

Hope that helps.

Regards,

John DeVight
0
KBN
Top achievements
Rank 1
answered on 08 Aug 2012, 06:17 PM
The problem with your solution is that I do not want the positionID in the dataSource of the grid. I need to have the position text in the dataSource of the grid.
0
Robert
Top achievements
Rank 1
answered on 09 Jan 2013, 01:37 AM
This project throws exception if Create toolbar is added to grid and clicked.
Tags
Grid
Asked by
KBN
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
KBN
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Share this question
or