Binding Markup for AgDataGrid

2009 February 8
markup6, used with permission by Wonderlane

markup6, used with permission by Wonderlane

DevExpress has a free data grid for Silverlight.  You can download the source code and use it royalty free.

If you want to use DataTemplates that include binding markup with this control, there is a slight difference from the standard Silverlight DataGrid.  I put together this sample to illustrate the difference.  In the sample, I have both types (System.Windows.Controls.DataGrid and AgDataGrid).  Each bind to a list of employees and each are supposed to display the employee Name within a TextBox (within each row).

The standard Silverlight grid works but AgDataGrid does not.  Change “{Binding Name}”  to “{Binding RowValue.Name}” and now the AgDataGrid will work.  It’s a small change, but one that took more than a few hours to figure out!

Page.xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<UserControl 
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:my="clr-namespace:DevExpress.Windows.Controls;assembly=DevExpress.AgDataGrid.v8.2"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*"/>
            <RowDefinition Height="0.5*"/>
        </Grid.RowDefinitions>
        <my:AgDataGrid x:Name="agDataGrid" Grid.RowSpan="1" />
        <data:DataGrid x:Name="standardDataGrid" Grid.RowSpan="1" Grid.Row="1" />
    </Grid>
</UserControl>

Page.xaml.cs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using DevExpress.Windows.Controls;
using System.Text;
using System.Windows.Markup;
 
namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            // get data
            var employees = this.GetEmployees();
 
            // bind it to both grids
            this.standardDataGrid.ItemsSource = employees;
            this.standardDataGrid.AutoGenerateColumns = false;
            this.agDataGrid.DataSource = employees;
            this.agDataGrid.AutoGenerateColumns = false;
 
            // create a template column for each grid
            var standardColumn = new DataGridTemplateColumn();
            var agColumn = new AgDataGridColumn();
 
            // Create a DataTemplate
            var sb = new StringBuilder();
            sb.Append("<DataTemplate ");
            sb.Append("xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' >");
            sb.Append("<TextBox Text='{Binding Name}' />"); // Change to "{Binding RowValue.Name}" for AgDataGrid! 
            sb.Append("</DataTemplate>");
            var template = (DataTemplate)XamlReader.Load(sb.ToString());
 
            // Add it to the standard and ag columns we just created.
            standardColumn.CellTemplate = template;
            agColumn.CellDisplayTemplate = template;
 
            // Add the columns to thier respective grids.
            this.standardDataGrid.Columns.Add(standardColumn);
            this.agDataGrid.Columns.Add(agColumn);
        }
 
        private List<Employee> GetEmployees()
        {
            var employees = new List<Employee>();
            employees.Add(new Employee() 
                { ID = 2, Name = "John Doe", DOB = DateTime.Now });
            employees.Add(new Employee() 
                { ID = 3, Name = "Jane Doe", DOB = DateTime.Now });
            return employees;
        }
    }
 
    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime DOB { get; set; }
    }
}

Hopefully this helps someone with the same problem.
Happy Coding!

4 Responses leave one →
  1. 2009 March 11
    Richard Moss permalink

    Thanks for this tip… I’ve been trying to figure out why my DataTemplates weren’t working. It’s a real shame they haven’t put out any real documentation.

  2. 2009 August 26

    Ryan Tupper has reported that {Binding RowValue.Name} does not work after version 9.2.4. I haven’t tested this, but I wanted to make readers aware. Thanks Ryan!

    see: http://community.devexpress.com/forums/p/70585/274158.aspx#274158

  3. 2009 September 1
    tutoo permalink

    but in the data grid only ID column is visble. how to show all other columns in the grid Name ,date . Pls send the response

  4. 2009 September 2

    Hi tutoo,

    It has been a while since I’ve used this control. Rather than Silverlight, I’m working more with ASP.Net MVC these days.

    I vaguely remember dealing with an issue where the ID column would display and the others would not, but I don’t remember the solution. Maybe you can find help on the forums. http://community.devexpress.com/forums

Leave a Reply

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS

This work by Robert Claypool is licensed under a Creative Commons Attribution 3.0 United States.