Column header sort indicator and validation tool tip.

[Vasanth]

Hi,

1. I have a column with size barely fitting the HeaderText, but when clicking on the header to do sorting. Sort Indicator is hiding the header text. Is there any way I can make the SortIndicator transparent or not make it hide header text?

2. Validation tool tip only shows when you hover the red indicator. I like to show the message always when the validation fails, dont want the user to hover to see the message. How to acheive that?

Attached a screen shot of a sample SfDataGrid with above issues.

Attachment: SfDataGrid_3655f69b.zip

[Elavarasan M]

Hi Vasanth,
Thank you for using Syncfusion Products.
We have analysed your query and please find the details below.

Query 1: Sort Indicator hides the column header text
By default, column width is calculated based on the fixed FontSize, FilterIconWidth,and SortIconWidth. GridHeaderCellControl Padding will not be considered while calculating column width. So the column header text is not displayed fully while sorting the column. You can overcome this by setting SortIconWidth in sample level. Please refer the below code snippet.
Code snippet:

this.sfGrid.GridColumnSizer.SortIconWidth = 42;

Please refer the below UG links regarding column sizer.

UG Link:

http://help.syncfusion.com/ug/winrt/index.html#!Documents/howtochangefiltericonwidthandsorticonwidthwhenyoucalculatecolumn.htm

You can refer the following UG Link to know about customizing the GridColumnSizer.
http://help.syncfusion.com/UG/winrt/index.html#!Documents/columnsizing.htm

Query 2: Show the message always when validation fails

By customizing control template of GridCell, you can show the error message in top of the cell without mouse hover the red indicator.
Please refer the below code snippet to customize the GridCell control template.
Code snippet:

<Style TargetType="syncfusion:GridCell">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="Gray" />

<Setter Property="BorderThickness" Value="0,0,1,1" />

<Setter Property="Padding" Value="0,0,0,0" />

<Setter Property="FontFamily" Value=" Segoe UI" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="syncfusion:GridCell">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="IndicationStates">

<VisualState x:Name="HasError">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">

<EasingDoubleKeyFrame KeyTime="0" Value="0" />

<EasingDoubleKeyFrame KeyTime="0" Value="10" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="NoError">

<Storyboard BeginTime="0">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">

<EasingDoubleKeyFrame KeyTime="0" Value="1" />

<EasingDoubleKeyFrame KeyTime="0" Value="0" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="BorderStates">

<VisualState x:Name="NormalCell" />

<VisualState x:Name="FooterColumnCell">

<Storyboard BeginTime="0">

<ObjectAnimationUsingKeyFrames BeginTime="0"

Duration="1"

Storyboard.TargetName="PART_GridCellBorder"

Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0" Value="1,0,1,1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="BeforeFooterColumnCell">

<Storyboard BeginTime="0">

<ObjectAnimationUsingKeyFrames BeginTime="0"

Duration="1"

Storyboard.TargetName="PART_GridCellBorder"

Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Background="{TemplateBinding CellSelectionBrush}" Visibility="{TemplateBinding SelectionBorderVisibility}" />

<Border x:Name="PART_GridCellBorder"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<ContentPresenter Margin="{TemplateBinding Padding}"

FontFamily="{TemplateBinding FontFamily}"

FontSize="{TemplateBinding FontSize}"

Foreground="{TemplateBinding Foreground}" />

</Grid>

</Border>

<Border Margin="0,0,0,0"

Background="Transparent"

BorderBrush="{TemplateBinding CurrentCellBorderBrush}"

BorderThickness="{TemplateBinding CurrentCellBorderThickness}"

IsHitTestVisible="False"

Visibility="{TemplateBinding CurrentCellBorderVisibility}" />

<Border x:Name="PART_InValidCellBorder"

HorizontalAlignment="Left"

VerticalAlignment="Top">

<Border BorderBrush="Blue" BorderThickness="1">

<TextBlock FontSize="10"

Foreground="Red"

Text="{TemplateBinding ErrorMessage}" />

</Border>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Please refer the sample from below location regarding query 1 and query 2.
Sample location:
http://www.syncfusion.com/downloads/support/forum/118903/SfDataGridSample-1038966574.zip
Thanks,
Elavarasan M

[Vasanth]

Hi Elavarasan,

Thanks for prompt response!

Query 1: Sort Indicator hides the column header text

Setting SortIconWidth will only work when you have ColumnSizer set to SizeToHeader, but my columns have a fixed width. I cannot increase or reduce its width.

Query 2: Show the message always when validation fails

Your sample works but my validation messages are lengthier  and showing it on top on the input doesn't look user friendly. Is there anyway I can show it like tooltip? Data in the grid will be valid during initial page load, I only need to show the message when user inputs wrong data and that wont get saved to DB. So worst case there will be only 1 validation message active at any given time.

Vasanth

[Elavarasan M]

Hi Krishna,
Thanks for your reply.
We have analysed your query and please find the details below.
Query 1: Sort Indicator hides the column header text
You can achieve your requirement by change the Padding in GridHeaderCellControl.
Please refer the below code snippet to change the padding to GridHeaderCellControl
Code Snippet:

<Style TargetType="syncfusion:GridHeaderCellControl">

<Setter Property="Padding" Value="1" />

</Style>

Query 2: Show the message always when validation fails
By customizing control template of GridCell, you can show the error message in top of the cell without mouse hover the red indicator.
Please refer the below code snippet to customize the GridCell control template.
Code snippet:

<Style TargetType="syncfusion:GridCell">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="Gray" />

<Setter Property="BorderThickness" Value="0,0,1,1" />

<Setter Property="Padding" Value="0,0,0,0" />

<Setter Property="FontFamily" Value=" Segoe UI" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="syncfusion:GridCell">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="IndicationStates">

<VisualState x:Name="HasError">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">

<EasingDoubleKeyFrame KeyTime="0" Value="0" />

<EasingDoubleKeyFrame KeyTime="0" Value="10" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<x:Boolean>True</x:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="NoError">

<Storyboard BeginTime="0">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">

<EasingDoubleKeyFrame KeyTime="0" Value="1" />

<EasingDoubleKeyFrame KeyTime="0" Value="0" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<x:Boolean>False</x:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="BorderStates">

<VisualState x:Name="NormalCell" />

<VisualState x:Name="FooterColumnCell">

<Storyboard BeginTime="0">

<ObjectAnimationUsingKeyFrames BeginTime="0"

Duration="1"

Storyboard.TargetName="PART_GridCellBorder"

Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0" Value="1,0,1,1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="BeforeFooterColumnCell">

<Storyboard BeginTime="0">

<ObjectAnimationUsingKeyFrames BeginTime="0"

Duration="1"

Storyboard.TargetName="PART_GridCellBorder"

Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Background="{TemplateBinding CellSelectionBrush}" Visibility="{TemplateBinding SelectionBorderVisibility}" />

<Border x:Name="PART_GridCellBorder"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<ContentPresenter Margin="{TemplateBinding Padding}"

FontFamily="{TemplateBinding FontFamily}"

FontSize="{TemplateBinding FontSize}"

Foreground="{TemplateBinding Foreground}" />

</Grid>

</Border>

<Border Margin="0,0,0,0"

Background="Transparent"

BorderBrush="{TemplateBinding CurrentCellBorderBrush}"

BorderThickness="{TemplateBinding CurrentCellBorderThickness}"

IsHitTestVisible="False"

Visibility="{TemplateBinding CurrentCellBorderVisibility}" />

<Border x:Name="PART_InValidCellBorder"

Width="10"

Height="10"

HorizontalAlignment="Right"

VerticalAlignment="Top">

<ToolTipService.ToolTip>

<ToolTip Name="ValidationToolTip"

Background="#FFDB000C"

Placement="Right"

Tag="{TemplateBinding ErrorMessage}"

Template="{StaticResource ValidationToolTipTemplate}" />

</ToolTipService.ToolTip>

<Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z"

Fill="Red"

Stretch="Fill" />

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Please refer the sample from below location regarding query 1 and query 2.
Sample location:
http://www.syncfusion.com/downloads/support/forum/118903/SfDataGridSample-1843387643.zip


Please let us know if you have any queries.

Thanks,
Elavarasan M

[Vasanth]

This is perfect!! thank you so much for quick and wonderful solution.

[Saranya CJ]

Hi Vasanth,

Please let us know if you require any other assistance.

Regards,
Saranya