This is a migrated thread and some comments may be shown as answers.

DropDownList in Grid results in 'undefined'

4 Answers 198 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 2
Jacques asked on 05 Nov 2013, 07:20 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 06 Nov 2013, 11:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacques
Top achievements
Rank 2
answered on 15 Nov 2013, 05:33 AM
Thanks Kiril, I managed to get it working. 
0
Jerry
Top achievements
Rank 1
answered on 28 Oct 2016, 06:29 PM

 

 

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"
    }
  ]
}

 

 

 

0
Kiril Nikolov
Telerik team
answered on 31 Oct 2016, 07:45 AM
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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
Grid
Asked by
Jacques
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Jacques
Top achievements
Rank 2
Jerry
Top achievements
Rank 1
Share this question
or