This is a migrated thread and some comments may be shown as answers.

foreach PanelBar arrows expand collapse

3 Answers 267 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 17 Aug 2018, 05:40 PM

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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 21 Aug 2018, 01:27 PM
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.
0
Danny
Top achievements
Rank 1
answered on 21 Aug 2018, 02:14 PM

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>
0
Ivan Danchev
Telerik team
answered on 22 Aug 2018, 12:00 PM
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.
Tags
PanelBar
Asked by
Danny
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Danny
Top achievements
Rank 1
Share this question
or