Restyling SfMultiColumnDropDownControl to minimise height

[Sam Chan]

Hi,

I'm using a SfMultiColumnDropDownControl in a GridTemplateColumn of a SfDataGrid. I have a requirement to allow the font size to be changed by the user to something as small as 8pt to allow more rows and columns to be viewable at once.

When the default font size is used, the row height is set such that the row is a bit taller than necessary to allow the dropdown icon of the SfMultiColumnDropDownControl to be visible. When I adjust the row height based on the font size only in the QueryRowHeight handler, the row height is too small to see the dropdown icon of the SfMultiColumnDropDownControl. I can compensate that by increasing the calculated height by 8 to make the dropdown icon fully visible. The issue with that is there appears to be too much vertical space between rows when a small font size is used. Is it possible to restyle the SfMultiColumnDropDownControl to econimise the vertical space, e.g. smaller margin and possibly a smaller dropdown icon.

I've attached an example of the issue. When you uncomment the code for adding the QueryRowHeight handler, the dropdown icon is visible, otherwise the row height is not tall enough. Could you please show me how to retyle the SfMultiColumnDropDownControl such that the dropdown button and the associated TextBox would still fit the row height of a SfDataGrid when the font size is as small as 8, even 10 would still be okay.

Regards,

Sam

Attachment: WPF1449676857_StylingSfMultiColumnDropDownControl_to_minimise_height_c27147a5.zip

[Muthukumar Kalyanasundaram]

Hi Sam, 

 

Thank you for contracting Syncfusion support. 

 

We have analyzed your query. You can achieve your requirement by customizing the style of  DropDownToggleButtonStyle in SfMultiColumnDropDownControl as shown like below code, 

 

Code Snippet: 

 

<Style x:Key="DropDownToggleButtonStyle" TargetType="ToggleButton"> 

    <Setter Property="ClickMode" Value="Release" /> 

    <Setter Property="Foreground" Value="#FF000000" /> 

    <Setter Property="IsTabStop" Value="False" /> 

    <Setter Property="Focusable" Value="False" /> 

    <Setter Property="Template"> 

        <Setter.Value> 

            <ControlTemplate> 

                <Border Background="White"> 

                    <Grid> 

                        <!-- change the height and width of dropdown button --> 

                        <Path Width="8"                                      

                        Height="6" 

                        Margin="1" 

                        Data="F1M10.6668,-9.99999999997669E-05L6.0008,4.6669L1.3328,-9.99999999997669E-05L-0.000199999999999534,1.3339L6.0008,7.3329L11.9998,1.3339z" 

                        Fill="{TemplateBinding Foreground}" 

                        RenderTransformOrigin="0.5,0.5" 

                        Stretch="Uniform" /> 

                    </Grid> 

                </Border> 

            </ControlTemplate> 

        </Setter.Value> 

    </Setter> 

</Style> 

 

 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130802/ze/SfMultiColumnDropDownControl_tominimise_height-800917380 

 

Please let us know if you have any query. 

 

Regards, 

Muthukumar K 

[Sam Chan]

Thank you Muthukumar, the solution works just the way I wanted.

Regards,

Sam

[Muthukumar Kalyanasundaram]

Hi Sam, 

 

Thanks for the update. Please let us know if you need any other assistance. 

 

Regards, 

Muthukumar K