for loop items within PanelBar control throws error

[Ian]

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.

 

 

[Vasko]

Hello Ian,

After thorough debugging of this scenario, I found out why the System.ArgumentOutOfRange exception occurs. As you have stated when you don't reference the i variable, the loop works.

In this specific scenario, the following things happen:

1. We first go through the for loop Count times (for example, imagine you have 5 elements in the collection you are looping, so i = 0, 1, 2, 3, 4)
2. After the looping, we have i = 4, which is less than 5 so we exit the loop, but after we exit, the i increments so after the end of the loop we have i = 5
3. The exception happens due to the behavior of the loop
4. To fix this, adjust the indexing:

   .Content(
                @<text>
                        @Html.HiddenFor(model => model.SomeCollection[i-1].SectionUid) // subtract 1
                 </text>);

Let me know if you have any further trouble.

Regards,
Vasko
Progress Telerik

[Ian]

Hi Vasko,

Thanks for looking into it for me. I tried your method but still go thte error but it put me on the right track. When I changed:

Model.SomeCollection.Count

to:

Model.SomeCollection.Count-1

It didn;t error but there are 17 rows and instead of building 17 separate panel bars it seemed to nest them all in the 1st one and the data was all the same not row specific.

I think I will revisit it in future but have just used the code to create text areas for now and my look to put the rich text controls in at a later date when I have more time.

Thanks again for your help.

Ian