GroupBar Layout Customization

[Daniel Burgess]

I'm working with the GroupBar control in horizontal orientation mode. My problem comes in with the GroupViewItems' text being cut off.

I can almost get around this by changing the GroupView Width property, but this causes only one item to be displayed per line. Also, no scroll bars appear when the items are no longer on the screen.

Here is the xml markup I am using:

<syncfusion:GroupBar x:Name="filterBar" AllowDragandDrop="True" AllowCollapse="False" Orientation="Horizontal" VisualMode="StackMode" >
                <syncfusion:GroupBarItem  HeaderText="Filter" ShowInGroupBar="False">
                    <syncfusion:GroupView IsListViewMode="True" >
                        <syncfusion:GroupViewItem Text="Item Number" />
                        <syncfusion:GroupViewItem Text="Store"/>
                        <syncfusion:GroupViewItem Text="Other View Item"/>
                        <syncfusion:GroupViewItem Text="The next item"/>
                        <syncfusion:GroupViewItem Text="Look at this item"/>
                        <syncfusion:GroupViewItem Text="Another item"/>
                        <syncfusion:GroupViewItem Text="Another item"/>
                        <syncfusion:GroupViewItem Text="Another item"/>
                  </syncfusion:GroupView>
               </syncfusion:GroupBarItem>
</syncfusion:GroupBar>

I've attached the code behind and the xml markup for this.

How do I increase the amount of text shown for each GroupViewItem?

Attachment: GroupBarIssue_3cac0b88.zip

[Daniel Burgess]

After much trial and error, the property I needed to set was the GroupView's MinWidth property.

There are still no scroll bars when there are too many items in the list, however. How then do I cause GroupView items to wrap to the next line and show the scroll bar in this case? 

[Sugapriya Mariappan]

Hi Daniel,

Thank you for contacting Syncfusion Support.

“Query : There are still no scroll bars when there are too many items in the list, however. How then do I
cause GroupView items to wrap to the next line and show the scroll bar in this case? “

We have prepared a workaround sample which tries to meet your requirement. In this sample, we have set the HorizontalScrollBarVisibility to Visible. Now the GroupViewItems are aligned one by one.

Please download the sample from the below location

Sample: http://www.syncfusion.com/downloads/support/forum/127963/ze/GroupbarTesting_new-1120773798.zip

Please check the above solution and let us know if it fulfills your requirement?

Regards,
M.Sugapriya
 

[Daniel Burgess]

Just loaded up the sample project. Unfortunately, this does not fulfill my requirement. I'm looking to have more than one item per line horizontally, but still have the vertical scroll bar.

In your example, when the vertical scroll bar is enabled, I'm no longer seeing more than one item per line, as per my requirement. I've attached a comparison of the two. I need to be able to wrap  the items correctly, and still be able to scroll.

Thanks for your time. :)

Attachment: GroupBarStackPanelWrappingScrolling_543e6270.zip

[Daniel Burgess]

I've ultimately decided to use a custom ListBox control for my horizontally aligned items instead. I was hoping to customize the GroupBox, but it's turned out to be better suited for other things, and more difficult for this application than I had hoped.

Thanks again for the help.

[Vijayalakshmi Roopkumar]

Hi Daniel,

Thank you for your update.

Please let us know if you have any other concerns. We will happy to assist you.

Regards,
Vijayalakshmi V.R.