Questions on UI for ASP.NET MVC Forum

2 questions

1 answer

82 views

for loop items within PanelBar control throws error

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.:

</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.