Playing with Read Only in Data Grid

Once in a while you run into a situation where you have a DataGird, where you need make either the whole Grid read only, or a row based on some specific condition or a column based on some specific condition or a specific cell read only. So in this blog, I thought I document it here;

1. Read Only Data Grid:

This is very easy. There is a property in the grid, ‘IsReadOnly’ that you can use to set it to true or false. By setting true you are telling that the grid is read only. Following code shows how to make a C1FlexGrid read only.

<c1:C1FlexGrid Name="_grid" IsReadOnly="True"


2. Columns Read only:

Couple of ways you can go about to set columns read only. If you know before hand which columns are read only, you can either set ‘IsReadOnly’ property of the column to true. You can also set the Binding Mode to One Way or leave out the attribute from the column definition then the column is not editable.

                <c1:Column Binding="{Binding Name, Mode=OneWay}" x:Name="Name1"/>
                <c1:Column Binding="{Binding Age}" x:Name="Age1"/>


3. Read only rows:

This is also simple, in most of the cases you want to make a particular row as read only based on a particular condition. Make sure you have columns set properly to two ways if you want some rows editable and some rows not editable.

<c1:C1FlexGrid Name="_grid" ItemsSource="{Binding People}" AutoGenerateColumns="False" BeginningEdit="C1FlexGrid_BeginningEdit" Style="{StaticResource teststyle}">
                <c1:Column Binding="{Binding Name, Mode=TwoWay}" x:Name="Name1"/>
                <c1:Column Binding="{Binding Age, Mode=TwoWay}" x:Name="Age1"/>

In the above code, if you would see there are two columns, name and age. Both the fields are set to be editable, because we have the mode set to two way. In the grid definition, if you would see there is an even for ‘BeginingEdit’. This event will be fired when you enter into edit mode regardless of any row or cell. Lets look at the code behind to see the implementation

private void C1FlexGrid_BeginningEdit(object sender, C1.Silverlight.FlexGrid.CellEditEventArgs e)
            Person person = _grid.SelectedItem as Person;
            e.Cancel = person.IsReadOnly;

What I am doing in the first line is to identify person object based on the row selected. you enable edit or disable edit by setting e.Cancel.  That’s about it.


4. Read only cells:

In some situation you may want to set a particular cell read only. This is little tricky. If you are using Telerik then you have a property called ‘IsReadOnlyBinding’ where you can use your binding and converter. On the other hand, normal data grid and in Component One, you have to use cell template to achieve this. So you will have cell template to show the data and cell edit template to make cell available to edit. In the cell edit template, when using ‘TextBox’, it has read only property that can be bound to a variable or set using converter.

                <c1:Column Binding="{Binding Name, Mode=TwoWay}" x:Name="Name1">                    
                                <TextBox IsReadOnly="{Binding IsReadOnly}" Text="{Binding Name, Mode=TwoWay}"/>
                <c1:Column Binding="{Binding Age, Mode=TwoWay}" x:Name="Age1"/>

In the above example, I am directly binding the read only property. But if want to do complex logic, you could use Converter in the binding. I really hope, Component One will give us some property like Telerik does without us having to write cell editing template. One thing I do not like in cell edit template is that, even though we mark the cell as read only, when you double click on the cell, it will enter in edit mode but will not allow you to edit. That is not the same behavior us, marking a column read only. When you set a column read only, it will not let you double click on that column period.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s