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.
Unfortunately, activation email could not send to your email. Please try again.

Column header sort indicator and validation tool tip.

Thread ID:

Created:

Updated:

Platform:

Replies:

118903 Apr 21,2015 05:00 PM Apr 24,2015 02:33 AM WinRT 5
loading
Tags: SfDataGrid
Vasanth
Asked On April 21, 2015 05:00 PM

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 [Syncfusion]
Replied On April 22, 2015 01:55 PM

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
Replied On April 22, 2015 03:33 PM

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 [Syncfusion]
Replied On April 23, 2015 04:11 PM

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
Replied On April 23, 2015 04:27 PM

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

Saranya CJ [Syncfusion]
Replied On April 24, 2015 02:33 AM

Hi Vasanth,

Please let us know if you require any other assistance.

Regards,
Saranya

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;