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

[KBN]

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!

[John DeVight]

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

[KBN]

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.

[Robert]

This project throws exception if Create toolbar is added to grid and clicked.