Problem with rowTemplate, altRowTemplate and detailInit properties

[Tomas]

Hi, in the following code I am using a sample grid, setting the rowTemplate, altRowTemplate and detailInit properties.

I tested these code with 2016.3.914 in Dojo and the detail button of grid doesn't work. 

The versions in next list we show where code works and not.

 2018 R1 SP1    - 2018.1.221     DOESN'T WORK
 2016 R3 SP1    - 2016.3.1028   DOESN'T WORK
 2016 R3            - 2016.3.914     DOESN'T WORK
 2016 R2 SP2    - 2016.2.714     WORKS WELL
 2016 R2 SP1    - 2016.2.607     WORKS WELL
 2016 R2            - 2016.2.504     WORKS WELL

Currently I updated to 2016.3.914 version so the grid doesn't work.

Could are you tell me why does that occur?  and How could I solved this problem?

<div id="grid"></div>

  // 2018 R1 SP1    - 2018.1.221    DOES NOT WORK
  // 2016 R3 SP1    - 2016.3.1028   DOES NOT WORK
  // 2016 R3        - 2016.3.914    DOES NOT WORK
  // 2016 R2 SP2    - 2016.2.714    WORKS WELL
  // 2016 R2 SP1    - 2016.2.607    WORKS WELL
  // 2016 R2        - 2016.2.504    WORKS WELL

var parentObj = this,
rowTemplateString = '<tr class="k-master-row row" data-uid="#: uid #">' +
          '<td class="k-hierarchy-cell"> '+
            '<div class="baseBttn button-expand-schedules #:DeactivatedAll === "0/0" ? '+
          ' \"iconGreyBttn disabledBttn\" : \"iconYellowBttn\"#"><a class="k-icon k-plus" tabindex="-1"></a>'+
                                          '</div> </td>' +
          '<td>#: name #</td>' +
           '<td>#: DeactivatedAll #</td>' +
      '</tr>';

  var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "Deactivated"}
  ],
  rowTemplate: rowTemplateString,
  altRowTemplate: altRowTemplateString,
  dataSource: [
    {
      name: "Beverages",
      DeactivatedAll: "0/0",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      DeactivatedAll: "1/1",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailTemplate: 'Products: <div class="grid"></div>',
  detailInit: function(e) {
    e.detailRow.find(".grid").kendoGrid({
      dataSource: e.data.products
    });
  }
});

Thanks.

[Viktor Tachev]

Hello Tomas,

The newer versions of Kendo components are using Font icons. This is why when applying the same classes there are no icons displayed with the more recent versions. For more information on the Font Icons and the new classes that are applied please refer to the following article.

• https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

With that said, when changing the classes in the template to correspond to the ones in the latest release the Grid was working as expected on my end.

• http://dojo.telerik.com/ObuXaPeh

Give the modification a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik