igTree and jQueryUI Accordion | Infragistics Forums

State See Verified Answer
Replies 5 replies
Subscribers 13 subscribers
Views 1530604 views
Users 0 members are here

igTree

2048

igTree and jQueryUI Accordion

Flavio posted over 11 years ago

Hi,

I tried to put igTree object in a div classed as accordion with JQueryUI 1.10.2, but I got a bad behavior.
Tree is created right and it is correctly rendered if I lay it at the root level, but:

if I try to expand it I have scrollbar in the accordion, probably because my external accordion does not see the internal one(I think igTree is something like accordion, right?)
if I put on javascript level $(document).delegate("#tree_id", "igtreeselectionchanged", function (e, args) {...}); and $(document).delegate("#tree_id", "igtreerendered", function (e, args) {...}); I get asview resultthe igTree with all the javascript I wrote visible as string...

Do you think is it possible to change something to rendere igTree better?

Thanks

Flavio

Parents

5105

Offline Konstantin Dinev posted over 11 years ago

Hi Flavio,

Could you provide us with a small html page reproducing the issue?

Thanks!
Cancel
Reply

Cancel
2048

Flavio posted over 11 years ago in reply to Konstantin Dinev

Hi,

download TreeAndAccordion.zip at this link.

You will have only one controller, Tree, and one View, Index. Project already strats from Tree Url and reproduce the issue. In the view you can try to comment/uncomment the script section to see different behavior of treeModel (without accordion OK, with accordion code is reproduced instead the tree).

Thanks for your effort,

Flavio M.
Cancel
Reply

Cancel
5105

Verified Answer
Offline Konstantin Dinev posted over 11 years ago in reply to Flavio

Hi again,

I looked at your sample and this is definitely an issue with how the jQuery UI Accordion handles the markup it receives. I managed to get the tree to display, however the accordion still disregards the height of the content and it shows a small content holder with scrollbar. Here's what I did:

<h2>Tree and Accordion</h2>

    @Html.Infragistics().Tree(Model)

<div id="divAccordion">

<h3>Accordion Title</h3>

<div></div>

</div>

<script>

    $(function () {

        $('#tree_1').appendTo('#divAccordion > div:first');

        $("#divAccordion").accordion({

          collapsible:true

        });

    });

</script>
Cancel
Reply

Reject Answer

Cancel

Reply

2048

Verified Answer
Flavio posted over 11 years ago in reply to Konstantin Dinev

Hi,

sorry for the late answer.

I put heightStyle: "content" on the accordion definition and it solved the problem of the scrollbar.
Now I am perfectly rendering 2 trees in an accordion and expand-collapse them does not create problems ;-)

Thanks again

Flavio M.
Cancel
Reply

Reject Answer

Cancel

Children

5105

Offline Konstantin Dinev posted over 11 years ago in reply to Flavio

Hey Flavio,

I am glad that I was able to help!
Cancel
Reply

Cancel