Using ItemSource for RadAccordion?

[Unb]

I have a performance problem with RadExpder. Accordion menu works faster (or it may be same because I still have not tested how I want)

I have an ObservableCollection list as my source and want to create AccordionItem for each collection item. But somehow I cannot bind what I want. I am adding my code for radaccordion and radexpander. It works with radaccordion but radaccordion seems does not have ItemSource property.

<telerikPrimitives:RadAccordion x:Name="accordion" BindingContext="{Binding Source}" Grid.Row="1"   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <telerikPrimitives:AccordionItem HeaderText="{Binding GroupName}"  IsExpanded="False"  >
                        <telerikPrimitives:AccordionItem.Content>
                            <ScrollView>
                                <customCellItem:CustomParamMeterListItem ItemsSource="{Binding MeterValues2}" />
                            </ScrollView>
                        </telerikPrimitives:AccordionItem.Content>
                    </telerikPrimitives:AccordionItem>
                </telerikPrimitives:RadAccordion>

 

So First of all HeaderText="{Binding GroupName}"  this part gave null exception... If I delete it and write something it works but I cannot see content..

 

Here is the radexpander

<datacontrols:RadListView x:Name="listView" Grid.Row="1"   ItemsSource="{Binding Source}" SelectionMode="None" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
              <datacontrols:RadListView.ItemTemplate>
                  <DataTemplate>
                      <telerikListView:ListViewTemplateCell >
                          <telerikListView:ListViewTemplateCell.View>
                              <ScrollView VerticalOptions="FillAndExpand" Margin="0,20,0,0" >
                                  <telerikPrimitives:RadExpander x:Name="expander" Style="{StaticResource ExpanderStyle}">
                                      <telerikPrimitives:RadExpander.Header>
                                          <telerikPrimitives:ExpanderHeader>
                                              <Label Text="{Binding GroupName}"  Style="{StaticResource GrouppingTitle}"   />
                                          </telerikPrimitives:ExpanderHeader>
                                      </telerikPrimitives:RadExpander.Header>
                                      <telerikPrimitives:RadExpander.Content>
                                          <ScrollView  Style="{StaticResource ExpanderContent}">
                                              <customCellItem:CustomParamMeterListItem ItemsSource="{Binding MeterValues2}"/>
                                          </ScrollView>
                                      </telerikPrimitives:RadExpander.Content>
                                  </telerikPrimitives:RadExpander>
                              </ScrollView>
                          </telerikListView:ListViewTemplateCell.View>
                      </telerikListView:ListViewTemplateCell>
                  </DataTemplate>
              </datacontrols:RadListView.ItemTemplate>
          </datacontrols:RadListView>

 

So the radexpander is independ on the other radexpander so I created a radlistview and with binding, many expander. I did the same thing with radaccordion but the radaccordion's items always expand, it does not behave same as radexpander. Thats why I need to create one radaccordion and many items depend on my source.

 

I cheched your sample source but not saw any thing what I want. Is there a way to do that?

 

If not:then how I can collapse the radaccordion ITEM in radaccordion when there is only one AccordionItem. The code below works but I just want I can collapse the AccordionItem. (because radaccordion does not allow to collapse the item when there is only one in the radaccordion)

<datacontrols:RadListView x:Name="listView" Grid.Row="1"   ItemsSource="{Binding Source}" SelectionMode="None" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
              <datacontrols:RadListView.ItemTemplate>
                  <DataTemplate>
                      <telerikListView:ListViewTemplateCell >
                          <telerikListView:ListViewTemplateCell.View>
                              <ScrollView VerticalOptions="FillAndExpand" Margin="0,20,0,0" >
                                  <telerikPrimitives:RadAccordion x:Name="accordion">
                                      <telerikPrimitives:AccordionItem HeaderText="Hebele"  IsExpanded="False"  >
                                          <telerikPrimitives:AccordionItem.Content>

                                              <ScrollView>

                                                  <customCellItem:CustomParamMeterListItem
                                                  ItemsSource="{Binding MeterValues2}"
                                              />
                                              </ScrollView>

                                          </telerikPrimitives:AccordionItem.Content>
                              </telerikPrimitives:AccordionItem>

                                  </telerikPrimitives:RadAccordion>
                              </ScrollView>
                          </telerikListView:ListViewTemplateCell.View>
                      </telerikListView:ListViewTemplateCell>
                  </DataTemplate>
              </datacontrols:RadListView.ItemTemplate>
          </datacontrols:RadListView>

 

By the way, I still cannot bind HeaderText like HeaderText="{Binding GroupName}"  Thats why in the code, I gave a hard-coded name.

 

If you can help me, it would be really great. I tried to create a custom expander but the performance was same as the radexpander. Thats why I want to use radaccordion and bind my source.

 

Thank you

 

[Didi]

Hello,

Thank you for the provided code.

Let me get straight to your questions

1) Accordion control with ItemsSource:

RadAccordion control does not provided this functionality out of the box. We have a feature request logged and you could follow and vote for it on the provided link below:
https://feedback.telerik.com/Project/168/Feedback/Details/259025-accordion-implement-itemssource-property

You could achieve this using attached properties. I have created a sample example shows how this could be implemented. Please take a look at the attached project and let me know if you have any additional questions.

2) All Accordion items collapsed:

The RadAccordion is designed in a way that opening one AccordionItem automatically closes the previous displayed content. In this case you can not have all items collapsed/expanded at same time. 

Regards,
Didi
Progress Telerik

[Unb]

Thank you for your detailed explanation and the sample. We will try to implement your code to our project and lets see. I hope we will not have  performance problems..I feel that when I add my custom UI elements in to list/expander, the app is being slow and slow.. And it consumes a lot of memory.. For example, there are 75 custom UI element in the list and each ui element has 3 controls. somehow it makes the app slow while rendering. The c# code works fast but rendering is slow.. Thats why we have to solve the performance problem and unfortunately radexpander did not help as well as my custom list.. Let see how it will goe with the radaccordion

 

Thank you again.

[Didi]

Hello,

Indeed, I guess adding such a number of custom UI components may slow down any app rendering.

I hope the RadAccordion control will match the needs of the application. Give it a try and let me know if you have any additional questions or concerns. 

Regards,
Didi
Progress Telerik