Custom datagrid row

HI Can somebody help me. i want to do something like this with WpfElement Datagrid

• if the number of character exceeds the width of the column, put 3 points at the end.
• and display tooltip for this cell.

Is it possible to do that with wpfelement datagrid??. Thanks in advance

Hello Alveen

Yes this is possible. The cells of the DataGrid have 2 modes: display mode and edit mode. What you'll want to do is provide a custom display template for each column that you want to apply this look. Below is an example of the code you would use inside a DataGridColumn that you've set up in the xaml.

<ms:DataGridColumn.DisplayTemplate>
  <DataTemplate>
    <TextBlock Name="Label" Text="{Binding ProductName}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" />
  </DataTemplate>
</ms:DataGridColumn.DisplayTemplate>

This is just a TextBlock where the text is binding to the appropriate property on your model objects for that column. The TextTrimming property is how you display the elipsis. To display the ToolTip you can set the ToolTip property to also bind to your model object. WPF does not automatically disable the ToolTip is the elipsis is not displayed. But there are ways you can implement this: http://tranxcoder.wordpress.com/2008/10/09/showing-tooltips-on-a-trimmed-textblock-wpf/

Let me know if you need help setting the display template.

-Jason Fauchelle

Thanks Jason . Your code work well using TextTrimming,

but i need help to display template. Here is my code

<Window.Resources>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                   <Trigger Property="IsTextTrimmed" Value="True">
                   <Setter Property="ToolTip" Value="{Binding}" />
                  </Trigger>
            </Style.Triggers>

        <Style.Setters>
            <Setter Property="TextWrapping" Value="NoWrap" />
            <Setter Property="TextTrimming" Value="WordEllipsis" />
        </Style.Setters>
         </Style>
</Window.Resources>

And

                               <ms:DataGrid x:Name="dgViewPreview"    ItemsSource="{Binding}"   Margin="0,49,0,7" AutoGenerateColumns="False"  ShowRowHeaders="False" >
                                    <ms:DataGrid.Columns>
                                        <ms:DataGridColumn PropertyName="product_name"  Width="250" Header="Product Name" AllowResize="False" AllowEditing="False" >
                                            <ms:DataGridColumn.DisplayTemplate>
                                                <DataTemplate>
                                                    <TextBlock Name="Label" Text="{Binding product_name}"  ToolTip="{Binding product_name}"  VerticalAlignment="Center" TextTrimming="CharacterEllipsis"  />
                                                </DataTemplate>
                                            </ms:DataGridColumn.DisplayTemplate>
                                        </ms:DataGridColumn> 
                                    </ms:DataGrid.Columns>
                                </ms:DataGrid>

I have yhis error Member 2 "IsTextTrimmed" is not recognized or is not accessible

Thank you in advance

Hello Alveen

The IsTextTrimmed property comes from a custom control that they made in a previous blog post. Here are 2 blog posts from them that can help you implement this for your application. The first post uses reflection to get some private fields that can be used to calculate if the text is trimmed. The second post is probably a better approach which statically does some estimate calculations instead of using reflection, and then puts the result in an attached property (IsTextTrimmed) on the TextBlock which can be bound to.

http://tranxcoder.wordpress.com/2008/10/09/customizing-lookful-wpf-controls/

http://tranxcoder.wordpress.com/2008/10/12/customizing-lookful-wpf-controls-take-2/

-Jason Fauchelle

Hello Jason ,

I have two issues while apply DataGridColumn.DisplayTemplate for TextTrimming .

Attached is sample project.

Thanks, Yap

Hello Yap

Thanks for the repro project. Both these issues can be resolved with the same fix. All you need to do is set the PropertyName property of the DataGridColumn to "Surname".

The model functionalities of features like grouping and filtering need to be told what property they are dealing with. The display template is unfortunately not enough because this is purely a visual component that is difficult for the model to interpret. So telling the column what property to group/filer via the PropertyName is the way to fix this. I've made a note to see if we can improve the discoverability of this for this scenario in a future version, as well as avoid the null reference exception.

-Jason Fauchelle

Hello Jason, Thanks you .