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

4 posts, 0 answers
  1. KBN
    KBN avatar
    5 posts
    Member since:
    Aug 2012

    Posted 08 Aug 2012 Link to this post

    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!
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 08 Aug 2012 Link to this post

    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
  3. KBN
    KBN avatar
    5 posts
    Member since:
    Aug 2012

    Posted 08 Aug 2012 Link to this post

    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.
  4. Robert
    Robert avatar
    19 posts
    Member since:
    Dec 2012

    Posted 08 Jan 2013 Link to this post

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