Programmatic .expand() of collapsible results in zero height content

10 posts, 0 answers
  1. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 10 Apr 2015 Link to this post

    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?

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Apr 2015 Link to this post

    Hello David,

    I tried to reproduce the scenario in a sample page but to no avail.
    Could you please check my example and let me know what I am missing?
    Looking forward to your reply.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 14 Apr 2015 in reply to Alexander Valchev Link to this post

    It appears it's a dynamic content issue of some sort. My usage always has content that is loaded by way of ajax calls upon the opening of the collapsible. So I guess the data isn't loaded yet. But even when it is loaded the height is still set to the initial value of 0. Is there a way to prevent the default opening until the data is done loading?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 16 Apr 2015 Link to this post

    Hi David,

    By default the widget is collapsed.
    Please try to call the expand method after the content is loaded.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 16 Apr 2015 in reply to Alexander Valchev Link to this post

    Yeah, I guess my problem is I need to populate the widget's content with new data on every "expand" or at least check for new data... It's working as it is, however there is a bit of a jerkiness to the expansion because of this. I'm not sure of a way around it.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 20 Apr 2015 Link to this post

    Hi David,

    You may use kendoWidgetCreated event.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 20 Apr 2015 in reply to Alexander Valchev Link to this post

    I'm not sure that is a valid solution as the behavior that I am looking for is reacting to the user input of wanting to open that specific collapsible section. Its equatable to clicking a different tab in the Tab Strip and requesting new content with that action.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Apr 2015 Link to this post

    Hello David,

    My previous reply (from 20-Apr-2015) was intended for other support thread. Please accept my apology for the mistake.

    You may try to call the resize method of the Collapsible widget to force re-calculation of the content height. Method should be called after widget is opened and the content is changed.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 22 Apr 2015 in reply to Alexander Valchev Link to this post

    Thanks for the clarification.

    Just an FYI... There isn't a reference to this method in the collapsible widget documentation "methods" list... But that seems to do the trick!

  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Apr 2015 Link to this post

    Hi David,

    Thank you for the feedback, I documented the method. The changes should be published live soon.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready