The One With

AgDataGrid provides 5 build-in columns types.

1: AgDataGridTextColumn: Allows basic text editing.

2: AgDataGridDateColumn: Allows editing of the dates using a drop down calendar.

3: AgDataGridCheckColumn: Displays a check box and allows editing of bool types.

4: AgDataGridImageColumn: Displays an image inside a column.

5: AgDataGridColumn: Template column that allows custom display and inplace editor templates.

Let's see how to use it.

First, I will drop an AgDataGrid on my page and bind it to a list of Item objects.

<DevExpress:AgDataGrid x:Name="myGrid">
    <DevExpress:AgDataGrid.Columns>
        <DevExpress:AgDataGridTextColumn FieldName="Name"></DevExpress:AgDataGridTextColumn>
        <DevExpress:AgDataGridTextColumn FieldName="Points"></DevExpress:AgDataGridTextColumn>
     </DevExpress:AgDataGrid.Columns>           
</DevExpress:AgDataGrid>

public class Item {
    public string Name {
        get;
        set;
    }
    public int Points {
        get;
        set;
    }
}

myGrid.DataSource = new List<Item>() {
                new Item() { Name = "Item1", Points = 10 },
                new Item() { Name = "Item2", Points = 4 },
                new Item() { Name = "Item3", Points = 10 },
            };

Instead of displaying Points as text, I want to display a little slider control. To do that, I will simply use the AgDataGridColumn.CellDisplayTemplate property

and assign a custom data template with a Slider control in it:

<DevExpress:AgDataGridColumn FieldName="Points">
                    <DevExpress:AgDataGridColumn.CellDisplayTemplate>
                        <DataTemplate>
                            <Slider Maximum="10" Minimum="0" LargeChange="1" IsHitTestVisible="False"/>
                        </DataTemplate>
                    </DevExpress:AgDataGridColumn.CellDisplayTemplate>

</DevExpress:AgDataGridColumn>

The end result is this:

Exactly what I wanted!. One thing remains, binding it to a data value. We will use PrepareCellDisplayElement event to do that.

<DevExpress:AgDataGridColumn FieldName="Points" PrepareCellDisplayElement="AgDataGridColumn_PrepareCellDisplayElement">

private void AgDataGridColumn_PrepareCellDisplayElement(object sender,
    DevExpress.Windows.Controls.PrepareCellDisplayElementEventArgs e) {
    Slider slider = e.DisplayElement as Slider;
    slider.Value = (int)e.CellData.CellValue;
}

The DisplayElement that we get in the event args. corresponds to Slider control that we dropped in our data template. And CellData.CellValue refers to the value for the cell

that is about to be displayed.

There are two parts to developing custom column types. First part is to provide a template for displaying the value (which is what we did above) and the second part is to

provide a template for editing it. We will use the same slider control in our editing template.

<DevExpress:AgDataGridColumn.CellEditingTemplate>
                        <DataTemplate>
                            <Slider Maximum="10" Minimum="0"></Slider>
                        </DataTemplate>
</DevExpress:AgDataGridColumn.CellEditingTemplate>

We will need to hook into the inplace editing events of AgDataGridColumn to read and write the values from and to our slider control.

<DevExpress:AgDataGridColumn FieldName="Points"
                                             BeginEditing="AgDataGridColumn_BeginEditing"
                                             EndEditing="AgDataGridColumn_EndEditing">

private void AgDataGridColumn_BeginEditing(object sender, DevExpress.Windows.Controls.EditingEventArgs e) {
    (e.Editor as Slider).Value = (int)e.Value;
}

private void AgDataGridColumn_EndEditing(object sender, DevExpress.Windows.Controls.EditingEventArgs e) {
    e.Value = (int)(e.Editor as Slider).Value;
}

You can download this sample project from http://tv.devexpress.com/content/AgDataGrid/CustomColumnTypes/CustomColumnTypes.rar

Previous: Silverlight DataGrid - Binding an Image to a Row Preview within the grid control

Next: Silverlight DataGrid - Where are my Facebook friends?

Cheers,

Azret