Sample: http://dojo.telerik.com/OCURa
I'm trying to use a mobile Collapsible widget with icons in the header, but toggling the collapsed state will break those icons marked with the km-icon class. Icons in the body are unaffected.
Hi,
How can I bind to the expand or collapse event from code? I tried:
$("#collapsibleDiv").on("expand", function () {
alert("expand");
});
without sucess.
Kind regards,
Marco
I have a jquery mobile app that I'm converting to kendo-ui mobile. It uses forms inside of collapsible's extensively. Kendo UI doesn't like it. I tested by copying the example mobile collapsible index.html from examples to my app, works fine. Then tried pasting various example mobile-forms. They all fail, the page is a mess.
I guess I'll have to figure another way unless you guys have some solution?
I have some collapsible widgets that I am "routing open" by way of a view().param switch on the view's "afterShow" event.
Basically, if a user clicks a nav link I am taking them to a different collapsible in that view. This all works well, however I may have a bug or some odd behavior on my hands.
If in my onAfterShow function I call:
$(
"#giving-collapse"
).data(
"kendoMobileCollapsible"
).expand();
...But I am left with a zero height .km-collapsible-content block:
<div data-role="collapsible-content" class="km-collapsible-content km-animated" style="height: 0px; display: block;"><div>
So I have called this after calling .expand() ...
$(
"#giving-collapse .km-collapsible-content"
).css(
"height"
,
"auto"
);
Which works and shows the proper content.
Am I missing something or should this work straight away without a defined height change?
Is it possible to link multiple collapsible div containers together in operation so that only one can be open at a time?
Right now this is how I have it operating. It works, but I'm not sure if this is the best way to accomplish such a thing.
onCollapsibleExpand:
function
(e){
var
thisID = $(
this
.element).attr(
"id"
);
$(
".km-collapsible"
).each(
function
(k,v){
// if not clicked item and is currently visible
if
( ($(
this
).attr(
"id"
) != thisID) && $(
this
).is(
":visible"
) ){
$(
this
).data(
"kendoMobileCollapsible"
).collapse();
}
});
},
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.