Dropdownlist not showing up in all rows in kendo grid detailInit grid

2 posts, 1 answers
  1. John
    John avatar
    4 posts
    Member since:
    Jun 2018

    Posted 28 Jun 2018 Link to this post

    I am running into an issue when adding a dropdownlist to my grid in my detailInit grid. When I select a row, the dropdownlists are in there, but when I select another row, then the dropdownlist's don't appear.
    However, if I select the 3rd row, I get the dropdownlists appearing and they will appear in the 2nd and 1rst row, but not the fourth.
    Why is this happening and how do I fix it so that regardless which row I select, that all the rows will have the dropdownlists?

    Below is my testing code

     

    <script type="text/x-kendo-template" id="EditAreaGridToolbarTemplate">
            <button class="btn btn-sm btn-primary" id="btnAddNewArea"><i class="fa fa-plus"></i></button>
            <button id="btnDeleteArea" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button>
        </script>
        <div id="TabEditor"></div>
     
    var dropdownData = [{
        "CatalogID": 1,
        "NameVersion": "Catalog1"
      },
      {
        "CatalogID": 2,
        "NameVersion": "Catalog2"
      },
      {
        "CatalogID": 3,
        "NameVersion": "Catalog3"
      },
      {
        "CatalogID": 4,
        "NameVersion": "Catalog4"
      },
    ];
     
    $(document).ready(function() {
     
      //#region Data
     
      var data2 = [{
          "RoomID": 1,
          "RoomName": "Room 1",
          "Areas": [{
            "id": 1,
            "AreaName": "Area 1"
          }, {
            "id": 10,
            "AreaName": "Area 10"
          }]
        },
        {
          "RoomID": 2,
          "RoomName": "Room 2",
          "Areas": [{
            "id": 2,
            "AreaName": "Area 2"
          }, {
            "id": 20,
            "AreaName": "Area 20"
          }]
        },
        {
          "RoomID": 3,
          "RoomName": "Room 3",
          "Areas": [{
            "id": 3,
            "AreaName": "Area 3"
          }, {
            "id": 30,
            "AreaName": "Area 30"
          }, {
            "id": 35,
            "AreaName": "Area 35"
          }]
        },
        {
          "RoomID": 4,
          "RoomName": "Room 4",
          "Areas": [{
            "id": 4,
            "AreaName": "Area 4"
          }, {
            "id": 40,
            "AreaName": "Area 40"
          }]
        }
      ];
     
      //#endregion
     
      ShowTabEditor(data2);
    });
     
    function ShowTabEditor(data) {
      $('#TabEditor').kendoGrid({
        dataSource: {
          data: data
        },
        schema: {
          model: "RoomID",
          fields: {
            RoomID: {
              editable: false,
              hidden: true
            },
            RoomName: {
              editable: false,
              type: "string",
              hidden: false
            },
            AreaCount: {
              editable: false,
              type: "number",
              hidden: false
            }
          }
        },
        columns: [{
            field: "RoomID",
            title: "RoomID",
            hidden: true
          },
          {
            field: "RoomName",
            title: "RoomName",
            hidden: false
          },
          {
            field: "AreaCount",
            title: "AreaCount",
            hidden: false
          }
        ],
        selectable: "row",
        //change: onTabEditorRowSelect,
        //detailTemplate: kendo.template($("#TabAreaTemplate").html()),
        detailInit: TabEditorDetailInit,
        detailExpand: function(e) {
          this.select(e.detailRow.prev());
          this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
        }
      }).data("kendoGrid");
    }
     
    function TabEditorDetailInit(e) {
      //var masterRow = e.masterRow;
      //var roomID = e.data.RoomID;
     
     
      $("<div id='EditAreaGrid' />").appendTo(e.detailCell).kendoGrid({
        scrollable: true,
        sortable: true,
        selectable: "row",
        filterable: false,
        toolbar: kendo.template($("#EditAreaGridToolbarTemplate").html()),
        columns: [{
          title: "id",
          field: "id",
          hidden: true
        }, {
          field: "AreaName",
          title: "Area Name",
          width: "20px",
          template: "<div >#=AreaName #</div>"
        }, {
          title: "Catalog",
          field: "Catalog",
          template: "<input class='edit-area-catalog-dropdown' type='text' />",
          width: "40px",
          editable: false
        }],
        editable: {
          mode: "incell",
          confirmation: false
        },
        dataSource: {
          data: e.data.Areas,
          schema: {
            model: {
              fields: {
                id: {
                  nullable: true
                },
                AreaName: {
                  nullable: true,
                  editable: true
                },
                Catalog: {
                  editable: false
                }
              }
            }
          }
        },
        dataBound: function(e) {
          abindCatalogDropDownInCellProcess();
        }
      });
    }
     
    function abindCatalogDropDownInCellProcess() {
      $("#EditAreaGrid").data("kendoGrid").tbody.find("td input.edit-area-catalog-dropdown").each(function() {
        $(this).kendoDropDownList({
          dataTextField: "NameVersion",
          dataValueField: "CatalogID",
          optionLabel: "Select Catalog...",
          dataSource: {
            transport: {
              read: function(options) {
                if (dropdownData.length > 0) {
                  options.success(dropdownData);
                  return;
                }
     
                options.success(dropdownData);
              }
            }
          },
          select: function(e) {
            var grid = $("#EditAreaGrid").data("kendoGrid");
            var dataItem = grid.dataItem(grid.select());
            var drpDataItem = this.dataItem(e.item);
          }
        });
      });
    }
  2. Answer
    Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 02 Jul 2018 Link to this post

    Hi John,

    I examined the provided code, and I believe that the problem comes from the fact that the jQuery selector in the "abindCatalogDropDownInCellProcess" is looking for inputs inside the parent Grid, and it is reinitializing the DropDowns from the other Child Grids. A better approach is to look only in the current Child Grid. For example:

    //...
              },
              dataBound: function(e) {
                abindCatalogDropDownInCellProcess(e);
              }
            });
          }
     
          function abindCatalogDropDownInCellProcess(e) {
            e.sender.element.find("td input.edit-area-catalog-dropdown").each(function() {
              $(this).kendoDropDownList({
    //...

    I hope this helps. Do not hesitate to write back if I can assist you any further.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top