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. Kendo UI is VS 2017 Ready
  4. 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.
  5. 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
Kendo UI is VS 2017 Ready