Adding Dynamic Expansion methods to Data Binded Collapsible

2 posts, 0 answers
  1. Sherman
    Sherman avatar
    21 posts
    Member since:
    Apr 2014

    Posted 06 Apr 2015 Link to this post

    Hi there, I'm currently working on a project for a client, and part of what we do has to deal with the latest and coolest kendo UI components. In my current project, I'm trying to explore the use of the Kendo UI Mobile Collapsible control. Being a Telerik MVP myself, I figured I can help ask the right questions, and perhaps it will help other developers who face the same issues later find the answers here.

    Here's my coding and what I am trying to achieve.

    <div id="#: data.idValue #" data-role="collapsible" data-expand="onExpand('#: data.idValue #')">

    <h3>#: data.dataItemLabel #</h3> 




    As you can understand from the code, I am using a kendo-template, and I am creating a list of collapsible items, and when each item is being clicked upon, it should trigger the onExpand method, passing the value of the id of the div into the method.


    What's happening right now is that whenever the page is loaded for the first time, the method get executed when the list of collapsible are being created. (Please see my attached screenshot) Any developer with any good ideas on how we can solve this, please do share your ideas and input.


    My intentions are for the method to be executed only when the collapsible item is selected for the first time.

  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 08 Apr 2015 Link to this post

    Hello Sherman,

    Kendo UI data attribute initialization does not allow such syntax:
    <div id="#: data.idValue #" data-role="collapsible" data-expand="onExpand('#: data.idValue #')">

    I suggest you to read the id attribute of the element at the expand event handler:

    function onExpand(e) {
      var id = e.sender.element.attr("id");

    I hope this information will help.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top