DropDownList in Grid results in 'undefined'

5 posts, 1 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 05 Nov 2013 Link to this post

    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
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 14 Nov 2013 Link to this post

    Thanks Kiril, I managed to get it working. 
  5. Jerry
    Jerry avatar
    3 posts
    Member since:
    Aug 2015

    Posted 28 Oct in reply to Kiril Nikolov Link to this post

     

     

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

     

     

     

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 31 Oct Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready