[4.5] - Kendo Library issue? - Forum - Rollbase - Progress Community

[4.5] - Kendo Library issue?

 Forum

[4.5] - Kendo Library issue?

This question is answered

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

Verified Answer
  • Hello Vimal,

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

    Cheers.

    Iram

All Replies
  • 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:


    DetailViewGrid Sample_v2.xml

     

    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