Hi,

I first tried using a loop creating expansion panels which works fine on the face of it but each expansion panel needs to have a Rich Text Editor inside of it and it was not allowing me to click into the editor so I read it may be better to use a PanelBar to achieve what i need.

Basically what I need it to loop through a collection within the ViewModel and create a Panel Bar Item for each one. Each Panel Bar Item will generate 3 Rich Text Editors with Labels.

The markup shows no errors but when running I get "System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index'". This happens with even a single control referencing the index of the for loop e.g.:

An example of the code is:

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {

                        for (int i = 0; i < Model.SomeCollection.Count; i++)
                        {
                            panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
                                .Expanded(false)
                                .Selected(false)
                                .Content(@<text>
                                             
                                @Html.HiddenFor(model => model.SomeCollection[i].SectionUid)

                          </text>);
                        }
                    }))

 

If I don't reference the i of the for loop within the content it works fine e.g.:

 

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {

                        for (int i = 0; i < Model.SomeCollection.Count; i++)
                        {
                            panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
                                .Expanded(false)
                                .Selected(false)
                                .Content(@<text>
                                
                                             <div>Some Text</div>

 

                          </text>);
                        }
                    }))

 

The reason I am using a 'for i =' loop instead of a foreach loop is because the collection was not being returned to the controller on post when I used a foreach loop but this method worked which could be down to my inexperience with MVC but I went with what worked.

The Expansion Panels worked great other than not being able to click into the Kendo().Editor() controls at all when they were inside the for loop. If I bound them to a control outside of the loop then they worked fine.

Any help would be greatly appreciated.

 

 

Hi,

When I add .OpenOnClick(true) to my menu and I click on the menu to display the submenu, the page reloads automatically.

Do I need to add another instruction to prevent the page reloading? What's the problem?

 

Thank's in advance.

 

Ignacio

Does the ExpansionPanel allow for nested objects within individual panels?

Will it handle the Telerik Grid or Tabs (with even more nesting)?

Is there any change required to make the nested items responsive?

Can the content be loaded using ajax (independently per panel)?