[Solved] DropDownList in Grid results in 'undefined'

[Jacques]

In the example on this demo page the JavaScript function is responsible for creating and populating the DropDownList in the Grid's cell that is being edited as follows: 

function categoryDropDownEditor(container, options) {
                    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                                }
                            }
                        });
                }

Question: How does the data-bind attribute of the input element work and relate to the grid? In your example the value of options.field = 'Category'

I'm trying to understand how it relates to the code that defines the columns (specifically the template part for the category column): 

columns: [
    { field:"ProductName",title:"Product Name" },
    { field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
    { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
    { command: "destroy", title: " ", width: "90px" }
]

I'm not sure how this is intended to work, or how the DropDownList and the Grid work together in this example. 

Regards,
Jacques

[Kiril Nikolov]

Hello J.Hoventer,

The options object hold the name of the filed being edited, along with the current model (data) that is displayed on the Grid's row. If you inspect the dataSource elements that are loaded in the grid you will see that there is a Category property that is actually an object holding CategoryID, CategoryName, and Description. This is why in the columns declaration you see that a template that is used to tell the grid to display the CategoryName property of the Category object.

I would suggest you to open your developer tools and play around with the grid and its dataSource object, so you will get the whole idea of its implementation.
 
Regards,
Kiril Nikolov
Telerik

[Jacques]

Thanks Kiril, I managed to get it working. 

[Jerry]

 

 

Hi.

I have trouble defining the template dropdownlist within the grid. undefined displays an error in the field IdConcepto

$scope.ddlDataSource = new kendo.data.DataSource({
          type: "odata-v4",
          transport: {
              read: "http://localhost:36113/odata/vTemaConcepto",
          }
      });
      $scope.categoryDropDownEditor = function (container, options) {
          var editor = $('<input kendo-drop-down-list required k-data-text-field="\'DsConcepto\'" k-data-value-field="\'IdConcepto\'" k-data-source="ddlDataSource"  data-bind="value:' + options.field + '"/>')
              .appendTo(container);
      }


      $scope.subdetailGridOptions1 = function (dataItem) {

          return {
              dataSource: {
                  type: "odata-v4",
                  transport: {
                      read: "http://localhost:36113/odata/EntidadFecha"
                  },

                  pageSize: 5,
                  schema: {
                      model: {
                          id: "IdEntidadFecha",
                          fields: {
                              IdEntidadFecha: { editable: false, nullable: true },
                              IdConcepto: { defaultValue: { IdConcepto: 1, DsConcepto: "Ninguno" } },
                              Fecha: { type: "date", validation: { required: true } },

                          }
                      }
                  }
              },
              scrollable: true,
              sortable: true,
              pageable: true,
              navigatable: true,
              editable: {
              },
              toolbar: ["create", "save", "cancel"],
              columns: [
                   {
                       field: "IdConcepto",
                       title: "Categoria",
                       width: "100%",
                       editor: $scope.categoryDropDownEditor,
                       template: "#=? #"
                   },
                   {
                       field: "Fecha", title: "Fecha", type: "date", format: "{0:dd/MM/yyyy}",
                       title: "Fecha",
                       width: "50%"
                   }
              ],

          };
      };

 

Data; http://localhost:36113/odata/vTemaConcepto

{
  "@odata.context":"http://localhost:36113/odata/$metadata#vTemaConcepto","value":[
    {
      "IdTema":10,"IdConcepto":10,"DsConcepto":"Concepto 9"
    },{
      "IdTema":10,"IdConcepto":11,"DsConcepto":"Concepto 10"
    },{
      "IdTema":10,"IdConcepto":12,"DsConcepto":"Concepto 11"
    }
  ]
}

 

 

 

[Kiril Nikolov]

Hi,

Would it be possible to open a separate support request with a runnable sample? We will be happy to help.

Regards,
Kiril Nikolov
Telerik by Progress