[4.5] - Kendo Library issue?

Hi Iram,

First  I want to tell you that this is not Kendo Library issue and you haven't shared entire code ( including template) to debug what is causing trouble.  But I am guessing your rowTemplate could be the problem.

I am not sure why you used rowTemplate config  but when you use row template and you want details view for same Grid your row template <tr> should have a "k-master-row" class and first column should be <td class="k-hierarchy-cell"><a class="k-icon k-i-expand" href="\\#" tabindex="-1"></a></td> .  If you don't add these details you don't see expand/collapse icons and you  will not be able to view details , detailsInit code also won't get called..

It is always recommended to use kendo Grid column config to map your json data to Grid column and then if there are any customization require in rendering column you can add a template  to individual column. In this case Kendo takes care of adding expand/collapse icons..

Refer this kendo example for Details View implementation.

I developed Sample Application to demonstrate how to implement Details View when  rowTemplate config is used in kendo Grid.

Please find attached sample application and try it at your end . You can find the source code from Page Designer.

Sample screenshot:

[View:/cfs-file/__key/communityserver-discussions-components-files/25/DetailViewGrid-Sample_5F00_v2.xml:320:240]

Hope this helps

Vimal.

I will get back to you on this issue Vimal.

Cheers.

Iram

Hello Vimal,

I have had time to investigate into this issue and I can confirm that this is related to a newer version of kendo grid that is being used in V4.5+. In V4.2, the kendo grid library that was being used was: this (2015.3.916), whereas in V4.5 this is v2016.3.914. There seems to be a difference in which the detailTemplate is being used in both of these versions which is why my template and code worked in V4.2 but not in V4.5. Please have a look at these templates, these worked in V4.2 before. I can create a sample app to show this to you and if you can help me with making them work without making any changes to the template, that would be much appreciated.

<script type="text/x-kendo-template" id="notFoundComponent">
<tr class="k-master-row">
<td class="k-hierarchy-cell">
<span class="notFoundName"><a href="\#" class="downArrow k-icon k-plus"></a>
<span class="notFoundNameContainer"> #: name # </span></span>
</td>
</tr>
</script>



<script type="text/x-kendo-template" id="notFoundDetailGridComponent">
<div class="notFoundDetailGrid"></div>
</script>



<script>

var jsonObject = JSON.parse(object);

var localDataSource = new kendo.data.DataSource({
data: jsonObject,
dataType: "jsonp",
sort: {
field: "name",
dir: "asc"
}
});

$("#grid").kendoGrid({
dataSource: localDataSource,
scrollable: false,
detailTemplate: kendo.template($("#notFoundDetailGridComponent").html()),
detailInit: notFoundDetailInit
,rowTemplate: kendo.template($("#notFoundComponent").html())
,columns: [{
field: "name",
title: "Test",
headerAttributes: {
style: "display:none"
}
}],
dataBound: function() {

});

</script>

Hi Iram,

With latest kendo update all icon class is being changed from image to font-icons hence icon classes name being renamed from Kendo Team.  As you can see in template "k-plus" changed to "k-i-expand" . Kendo attach click handler based on this css class name.  Unfortunately these changes are something we can't control from Rollbase side since this was handled from different team. What I can suggest is instead of using "rowTemplate" for Grid I would recommend you to use column Template for your Grid. You can define template for columns that you need customization. And you can define "detailsTemplate" for your detailsView. This way you don't need to worry about kendo upgrade

See below documentation links for more details,

docs.telerik.com/.../grid

demos.telerik.com/.../detailtemplate

Thanks,

Vimal.

Hello Vimal,

Thanks for the suggestions. I don't know if I'm missing something or not but I don't see any columnTemplate option on the links you mentioned. Is it something that I have to cater for in myself?

Cheers.

Iram

Hi Iram,

Here is the sample code that create kendo Grid with column template

<script>

$("#grid").kendoGrid({

 columns: [ {

   field: "name",

   template: "<strong>#: data.name # </strong>",  //Name with bold text

   title:'Name'

 },{

  field:'imgUrl',

   template:'<img src="#=data.imgUrl#" />',  //Profile image

   title:'Profile Image'

 },{

   field:'age', //No template, render as it is

     title:'Age'

 },{

     field:'website',

     template:'<a href="#= data.website #"> #:data.website# </a>', //hyperlink

     title:'Website'

 }],

 dataSource: [ { name: "Jane" , imgUrl:"../images/user/jane.png" , age: 25 , website:"www.xyz.com"}, { name: "Doe", imgUrl:"../images/user/doe.png" , age: 30, website:"www.abc.com" } ]

});

</script>

You should refer my first link from my post which is

docs.telerik.com/.../grid

Thanks,

Vimal.

Hello Vimal,

Thanks for the code sample. Let me try this out and get back to you.

Cheers.

Iram

Assuming the solution suggested by Vimal worked. Closing this post.

Sorry mate, don't close it yet. I am yet to try this out. Will re-open this if I need further help.

Cheers.

Iram