We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Restyling SfMultiColumnDropDownControl to minimise height

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

3 Replies

MK Muthukumar Kalyanasundaram Syncfusion Team June 5, 2017 09:23 AM UTC

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> 
 
 
 
 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 



SC Sam Chan June 8, 2017 11:21 AM UTC

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

Regards,

Sam




MK Muthukumar Kalyanasundaram Syncfusion Team June 9, 2017 12:57 PM UTC

Hi Sam, 
 
Thanks for the update. Please let us know if you need any other assistance. 
 
Regards, 
Muthukumar K 


Loader.
Live Chat Icon For mobile
Up arrow icon