foreach PanelBar arrows expand collapse

4 posts, 1 answers
  1. Danny
    Danny avatar
    4 posts
    Member since:
    Aug 2018

    Posted 17 Aug 2018 Link to this post

    Hi there,

    I'm using kendo PanelBar with foreach for the nested contents, here is the code:

    <div class="col-lg-12">
                    @(Html.Kendo().PanelBar()
                    .Name("OrganizerTour")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .HtmlAttributes(new { style = "" })
                    .Items(panelbar =>
                    {
                        foreach (var result in Model)
                        {
                            panelbar.Add().Text("Organizer: " + @result.organizerName).Expanded(true)
                                .Items(tour =>
                                {
                                    tour.Add().Expanded(true).Content(@<div class="panel-content">
                                        <div class="row dashboard-grid">
                                            @RenderGrid(result.Result)
                                        </div>
                                    </div>);
                                });
                        }
                    })
                    )
                </div>

    When each PanelBar is expanded, there are two arrows showing (see attached) - it's fine when collapsed.

    How can I remove the bottom arrow? Or is it something wrong with the codes above?

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2092 posts

    Posted 21 Aug 2018 Link to this post

    Hi Danny,

    The appearance issue is caused by the child items not having text set, which causes the child item's dropdown arrow to be positioned incorrectly. We would suggest either to set text to child items, e.g.:
    .Items(tour =>
    {
        tour.Add().Expanded(true).Text("SubItem").Content(@<div class="panel-content">
            <div class="row dashboard-grid">
                @RenderGrid(result.Result)
            </div>
        </div>);
    }

    Or to add the content directly to the parent and not within child items with no text.

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Danny
    Danny avatar
    4 posts
    Member since:
    Aug 2018

    Posted 21 Aug 2018 in reply to Ivan Danchev Link to this post

    Great, thanks so much. I changed it to this instead:

    <div class="col-lg-12">
        @(Html.Kendo().PanelBar()
            .Name("OrganizerTour")
            .ExpandMode(PanelBarExpandMode.Multiple)
            .HtmlAttributes(new { style = "" })
            .Items(panelbar =>
            {
                panelbar.Add().Text("Tour Search Results").Expanded(true)
                .Items(tour =>
                {
                    foreach (var result in Model)
                    {
                        tour.Add().Expanded(true).Text("Organizer: " + result.organizerName).Content(@<div class="panel-content">
                            <div class="row dashboard-grid">
                                @RenderTourGrid(result.TourResult)
                            </div>
                        </div>);
                    }
                });
            })
        )
    </div>
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2092 posts

    Posted 22 Aug 2018 Link to this post

    Hi Danny,

    Thank you for the follow up. I am glad the suggested change to the nested items configuration fixes the issue.

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top