[4.5] - Kendo Library issue?

Posted by IramK on 19-Apr-2017 08:46

Hello,

I have created a kendo grid myself using the detailTemplate option that's available on this link. However, with this new version V4.5 of Rollbase, my detailTemplate kendo grid just doesn't work. It does not go into the detailInit function that I have defined. Kindly have a look at this demo code. I'm sure Rollbase is using this detailTemplate option in many places throughout the platform and I was wondering if someone could highlight the issue with my approachplease.

<script type="text/x-kendo-template" id="temp1">
#if(_ === "Option1"){#
<div id="option1"></div>
#}else{#
<div id="option2"></div>
#}#
</script>
<div id="example">
<div id="mainGrid"></div>

function performGridConversion(searchStr) { // This is the dataSource for the grid var staticDataSource = [ { _: "Option1"}, { _: "Option2"} ]; var mainGridElement = $("#mainGrid").kendoGrid({ dataSource: staticDataSource, sortable: false, pageable: false, scrollable: false, detailTemplate: kendo.template($("#temp1").html()), rowTemplate: kendo.template($("#mainTemplate").html()), detailInit: detailsInitialization, dataBound: function() { var thisMasterRow = this.tbody.find("tr.k-master-row"); this.collapseRow(thisMasterRow); this.expandRow(thisMasterRow); } }); function detailsInitialization(e) { // Not coming here... alert("Here"); }

Cheers.

Iram

Posted by IramK on 25-May-2017 06:41

Hello Vimal,

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

Cheers.

Iram

All Replies

Posted by Vimalkumar Selvaraj on 19-Apr-2017 10:01

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.

Posted by IramK on 27-Apr-2017 09:12

I will get back to you on this issue Vimal.

Cheers.

Iram

Posted by IramK on 12-May-2017 11:01

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>
Posted by Vimalkumar Selvaraj on 19-May-2017 04:32

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.

Posted by IramK on 23-May-2017 08:39

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

Posted by Vimalkumar Selvaraj on 24-May-2017 23:34

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.

Posted by IramK on 25-May-2017 06:41

Hello Vimal,

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

Cheers.

Iram

Posted by Ramana Kaza on 30-Jun-2017 07:09

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

Posted by IramK on 30-Jun-2017 07:19

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

This thread is closed