Adding Dynamic Expansion methods to Data Binded Collapsible

[Sherman]

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> 

... 

</div>

 

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.

[Alexander Valchev]

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");
  //etc...
}

I hope this information will help.

Regards,
Alexander Valchev
Telerik