How to format a GridView Cell using CellTemplateSelector.

[Willy Vidable]

Hi
I have a GridView that shows a bunch of rows and has 15 columns, let me name them A1, A2, A3, M1, M2, ...to M12.
Each "M" column can have a value that is either "1" or "0".
I want to show the cell that are "1" with background="Black" and those that are "0" with Background="White".

Following the documentation  I use a class CellTemplateSelector that implement a DataTemplateSelector ( object item, DependencyObject container ).

In the documentation the Template selector is used for formatting one column of the GridView based in its value.So it works for one column in the whole row.

In my case I need to call my CelllTemplateSelector from every "M" column cell in the row and decide what format apply to the cell based on its value (0 or 1).

If I use the Selector implemented in the documentation, I notice that when I call it, I get the parameter "item" that gives me the whole row but I don't know what column I am calling from.

I need to get the column from where I am calling from in order to check for the value of that specific column in order to select the template to apply.

So my question is: How should I call my TemplateSelector and pass the row but also the column name I am calling from.. 

Thanks

[Maya]

Hi Willy Vidable,

In case you want to find and work with specific column, you may use the Columns Collection of the grid:

this.playersGrid.Columns[int index];
this.playersGrid.Columns[string columnUniqueName];

Thus you may use either the index or the uniqueName of a column in order to get it from the collection.
However, in your scenario you can try to work directly with the properties of the item and apply the template according to their value.
I am sending you a sample project illustrating the proposed solution.
 

Best wishes,
Maya
the Telerik team

[Willy Vidable]

HI Maya,

Thanks for your answer and the code you sent me. I reviewed and run your code and it seems to me it is not addressing my issue.  I may be wrong but I don’t see your grid behaving like I want it.

So let me rephrase my issue:

Given a GridView with a set of columns (A,B,C,M1,M2,…M12),

For any cell, on a subset of columns (M1 to M12), on each row of the GridView I need to apply one of two cell templates, based on the value that the cell has.

If the value of the cell is “1”, I apply the template called “Busy” and if the cell is “0” I apply a template called “Idle”.

I understand that I need to create a CellTemplateSelector class that should be called from each cell in the columns subset. This code will inspect the current cell value and based on its value (0 or 1) will return a value (Busy or Idle) that will select the template to apply.

My question is: How can I implement this. How can I call the method and pass as parameter the cell I am calling from (M1 or M2 . . .or M12) and then apply a cell template based on the result of the value inspection.

Thanks

[Willy Vidable]

Is there any news about this post?

[Maya]

Hi Willy Vidable,

Please excuse me for the delay in my response. I have updated the sample project so that the values (0,1) on a single row are different for each column. Still the template is applied for each one, thus making them look the same once they are with equal values.
I hope it solves your problem. Let me know in case it does not correspond to your exact requirement and feel free to change the application in the way you need it. 
 

Sincerely yours,
Maya
the Telerik team

[Willy Vidable]

HI Maya,

 Thanks for your answer, I appreciate your help. The code you provided told me what I wanted to know so from there I came up with my own solution.

Let me show it just in case it may be of interest for somebody else.

The Grid Resources look like:

 

<Grid.Resources>
    <!-- This Brush create the effect of a horizontal bar on the GridView cell -->
    <LinearGradientBrush x:Key="BlueButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="LightGreen"  Offset="0" />
        <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>

     <local:MyCellTemplateSelector x:Key="myCellTemplateSelector" >
        <!-- This Cell Template make the cell that is "0" be white as it was empty -->
        <local:MyCellTemplateSelector.zeroStyle>
            <DataTemplate>
                 <TextBlock
                    Background="White"
                    Foreground="White"
                />
            </DataTemplate>
        </local:MyCellTemplateSelector.zeroStyle>
        <!-- THis Cell Template makes the cell that is "1" show a bar -->
        <local:MyCellTemplateSelector.oneStyle>
            <DataTemplate>
                <TextBlock Background="{StaticResource BlueButtonBackground}"  />
            </DataTemplate>
        </local:MyCellTemplateSelector.oneStyle>
    </local:MyCellTemplateSelector>

    <!-- This style make the cells merge to create the effect of a continue bar -->
    <Style x:Key="GridViewCellStyle1" TargetType="{x:Type telerik:GridViewCell}">
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0,5" />
    </Style>
</Grid.Resources>

 

The GridView column looks like:

<telerik:GridViewDataColumn DataMemberBinding="{Binding M1}" Header="M1"
                    CellStyle="{StaticResource GridViewCellStyle1}"
               CellTemplateSelector="{StaticResource myCellTemplateSelector}" />

 

And finally the MyCellTemplateSelector looks like:

public class MyCellTemplateSelector : DataTemplateSelector

{

    public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)

    {

        GridViewCell cell = container as GridViewCell;

        GridViewDataColumn column = cell.Column as GridViewDataColumn;  

                if (cell.Value.ToString() == "0")

                { return zeroStyle;}

          else if (cell.Value.ToString() == "1")

                { return oneStyle;}
                      return null;


        }

    public DataTemplate zeroStyle { get; set; }

    public DataTemplate oneStyle { get; set; }

}

The code produce a grid with a kind of Gantt Chart to the right. Check the attachment for a snapshot of it.

Thanks

P.S.:  For those that are looking for a more general solution to the problem of creating a template selector, there is a very good approach proposed by Matthew MacDonald in his book Pro WPF in C# 2008 on page 561.