Dropdownlist input within a Kendo grid

Question

Quick explanation of my issue: I have an editable Kendo grid, and one of the columns is a dropdownlist, defined as such:

$('<input required data-text-field="fullName" data-value-field="approverGuid" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        index: 0,
        dataTextField: "fullName",
        dataValueField: "approverGuid",
        autoBind: false,
        dataSource: {
            transport: {
                read: {
                    dataType: 'json',
                    url: '/requisitions/ajax/getreqapprovers?account=' + accountNum
                }
            },
        },
        value: options.field
    });

My problem is that on initial grid load, the column is just a regular text element, populated with the approverGuid field, when I want to display the fullName field. As soon as I click in the grid, the dropdownlist is created, and we now see the correct fullName that corresponds with the approverGuid we saw previously. I can select any name in my dropdown, update, and it correctly writes the approverGuid to my DB but it also reverts back to the approverGuid in my grid, since the dropdownlist element is gone.

Any suggestions on how to display the name initially, without losing the Guid value which is needed to update my DB?

cwishva cwishva · Accepted Answer · 2014-08-15T06:59:17

If I Understand you correctly you need to show the "fullName" instead of "approverGuid"

If So I Hope You have a model Define in your dataSource . if not Look in to Kendo API MODEL

eg:

var dataSource = new kendo.data.DataSource({
  schema: {
    model: {
       id: "ID",
       fields: {
         ID: { editable: false, nullable: true },
         approverGuid: { type: "number", validation: { required: true } },
         fullName: { type: "string", validation: { required: true } }
    }
  }

once you have a model you will have access to a dataitem , with the use of this you can define a template for the grid column

eg:

columns: [
        {
          field: "approverGuid",
          title: "approverGuid",
          template: function (dataItem) {
              var html = '<span class="">' + kendo.htmlEncode(dataItem.fullName) + '</span>';
                    return html;
          },
          editor: function (container, options) {
            $('<input required data-text-field="fullName" data-value-field="approverGuid" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
             .kendoDropDownList({
                index: 0,
             dataTextField: "fullName",
             dataValueField: "approverGuid",
             autoBind: false,
             dataSource: {
               transport: {
                  read: {
                    dataType: 'json',
                    url: '/requisitions/ajax/getreqapprovers?account=' + accountNum
                }
             },
          },
          value: options.field
            });
           }
        }]

So now The Template will Show the fullname and Once you are in edit mode you will the the dropdown list . Hope this helps

Dropdownlist input within a Kendo grid

1 Answers