[Solved] Disable some of the cells in GridViewDataColumn in RadGridView

[Nalaka]

Hi,

I'm using RadGridView to display list of contacts. The grid contains three fixed columns and set of dynamic columns which is fetched from a web service.Dynamic columns are added to the grid from the View model. Each contact has a dictionary(Dictionary<Guid, DynamicCellValue >) .Here key of dictionary is the Id of 'DynamicColumn' object. 'DynamicCellValue' object has Value property and IsRelevant propery. Value property is bounded to DisplayMemberPath of dynamic column. But some contacts doesn't need value for some dynamic columns. Those cells should be empty and disabled. The IsRelevant property for that cells will be false. I want to disable the cell depending on the IsRelevant boolean property of DynamicCellValue. I couldn't find a way to do this.

Can any one please help me in this?
e.g. I want to disable the cell for Dynamic Column1 for first contact since the IsRelevant property is false for that cell for first contact.

And also I'm not sure if using a dictionary is a proper way to bind the data. I appreciate your suggestions regarding this as well.

This is a sample code which explains the scenario.

public class DynamicCellValue

   {

       public Guid ColumnId { get; set; }

       public string Value { get; set; }

       public bool IsRelevant { get; set; }

 

   }
 

public class DynamicColumn
   {
       public string Header { get; set; }
       public Guid Id { get; set; }

   }

public class Contact
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Mobile { get; set; }
        public Dictionary<string, DynamicCellValue> DynamicValuesList { get; set; }
    }

public class ViewModel : NotifyPropertyChanged

   {

       MainPage mainPage;

       public ViewModel(MainPage mp)

       {

           mainPage = mp;

           GetDynamicColumns();

           CreateGrid();

           GetContacts();

       }

 

       private ObservableCollection<Contact> contactsList = new ObservableCollection<Contact>();

       public ObservableCollection<Contact> ContactsList

       {

           get { return contactsList; }

           set

           {

               contactsList = value;

               OnPropertyChanged("ContactsList");

           }

       }

 

       public List<DynamicColumn> DynamicColumnsList { get; set; }

 

       /// <summary>

       /// add dynamic columns to the grid and bind data

       /// </summary>

       private void CreateGrid()

       {

           foreach (var col in DynamicColumnsList)

           {

               GridViewDataColumn column = new GridViewDataColumn();

               var bindingPath = "DynamicValuesList[" + col.Id.ToString() + "].Value";

               Binding bind = new Binding();

               bind = new Binding(bindingPath);

               column.DataMemberBinding = bind;

               column.Header = col.Header;

               mainPage.contactsGrid.Columns.Add(column);

           }

       }

 

       /// <summary>

       /// Get list of dynamic columns from the web service

       /// </summary>

       private void GetDynamicColumns()

       {

           //These dynamic columns will be fetched from a web service

           DynamicColumnsList = new List<DynamicColumn>();

           DynamicColumnsList.Add(new DynamicColumn { Header = "Dynamic Column1", Id = Guid.NewGuid() });

           DynamicColumnsList.Add(new DynamicColumn { Header = "Dynamic Column2", Id = Guid.NewGuid() });

       }

 

       /// <summary>

       /// Get list of contacts with dynamic column values from the web service

       /// </summary>

       private void GetContacts()

       {

           //These contacts will be fetched from a web service

           ContactsList.Add(new Contact { FirstName = "John", LastName = "Carter", Mobile = "2123d456" });

           ContactsList.Add(new Contact { FirstName = "Shane", LastName = "Watson", Mobile = "31266748" });

           ContactsList.Add(new Contact { FirstName = "Erik", LastName = "Hansen", Mobile = "88907446" });

 

           for (int i = 0; i < contactsList.Count; i++)

           {

               var dynamicValues = new Dictionary<string, DynamicCellValue>();

               for (int j = 0; j < DynamicColumnsList.Count; j++)

               {

                   bool isRelevant = true;

                   string value = "";

                   if (i == 0 && j == 0)

                   {

                       isRelevant = false; // Disable first dyanamic column value for first contact

                   }

                   else

                   {

                       value = contactsList[i].FirstName + " " + DynamicColumnsList[j].Header;

                   }

                   var dynamicValue = new DynamicCellValue { Value = value, IsRelevant = isRelevant };

 

                   dynamicValues.Add(DynamicColumnsList[j].Id.ToString(), dynamicValue);

               }

               contactsList[i].DynamicValuesList = dynamicValues;

 

 

           }

 

 

 

       }

   }

 

public class NotifyPropertyChanged : INotifyPropertyChanged
   {
       public event PropertyChangedEventHandler PropertyChanged;

       protected virtual void OnPropertyChanged(string propertyName)
       {
           if (this.PropertyChanged != null)
           {
               this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
           }
       }
   }

MainPage.xaml

<UserControl x:Class="GridViewDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White"  >
        <telerik:RadGridView  x:Name="contactsGrid" ItemsSource="{Binding ContactsList,Mode=TwoWay}" AutoGenerateColumns="False" >
            <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn Header="First name" DataMemberBinding="{Binding FirstName}" />
            <telerik:GridViewDataColumn Header="Last name" DataMemberBinding="{Binding LastName}" />
                <telerik:GridViewDataColumn Header="Mobile" DataMemberBinding="{Binding Mobile}" />

            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

public partial class MainPage : UserControl
    {
        public MainPage()
        {

            InitializeComponent();
            this.DataContext = new ViewModel(this);
        }
    }

[Dimitrina]

Hello,

You can take a look at the article on Read Only Rows and Cells for a reference on how to conditionally disable some cells.

Regards,
Didie
Telerik

 

 

[Nalaka]

Hi Didie,

Thank you for quick response. I read it. But the problem is I want to bind from the ViewModel like this

column.IsReadOnlyBinding = new Binding("DynamicValuesList[" + col.Id.ToString() + "].IsRelevant");

 If I bind like this It's not setting the cell read only. Is there any other way to bind Value and IsRelevant property in the ViewModel?

[Dimitrina]

Hello,

It seems the correct source/property cannot be resolved that way. You can try explicitly specifying the Source for the Binding to be your ViewModel.
If this does not help, may I ask you to open a new support ticket and attach a demo project there? That way I will be able to advise further.

Regards,
Didie
Telerik

 

 

[Nalaka]

Hi, 
 I could be able to make read only cell by using 

column.IsReadOnlyBinding = new Binding("DynamicValuesList[" + col.Id.ToString() + "].IsRelevant");

Now I want to change the background colour of read only cells depending on the IsRelevant property. ​I tried to use CellStyleSelector. But it takes the whole row to CellStyleSelector. IsRelevant property is not from object which is bounded to the row.It's in the object bound to dynamic column cell. I want to change the colour depending on the IsRelevant property on specific cell. Is there a way to achieve this?

[Dimitrina]

Hi,

When applying a CellStyleSelector, you are just aware of the information passed through the parameters item and container.
The item is the data item bound to the parent row of the cell a Style should be selected for.
You can use the container parameter and search for the parent Window. That way you can use its DataContext in case it holds a reference to the property you are interested in.
For example:

public override Style SelectStyle(object item, DependencyObject container)

{  
             var userControl = (container as GridViewCell).ParentOfType<UserControl>(); 

    var DataContext = userControl.DataContext;

    ...

  }

Regards,
Didie
Telerik

 

 

[Nalaka]

Hi,

The property i'm interested in is not in parent data context.  I can explain it like this,
'Contact' is the object which I bind in to the grid row.Each contact has this dictionary

Dictionary<string, DynamicCellValue> DynamicValuesList

DynamicCellValue contains the Value property and IsRelevant property. Value property is displayed in the cell. Depending on IsRelevant property I want to apply the color.

[Yoan]

Hello,

I am not entirely sure that I can understand your question. It would be great if you can provide us a sample project which demonstrates the exact problem you have. We will debug it on our side and will assist you further.

Regards,
Yoan
Telerik

 

 

[Nalaka]

Hi Yoan,

I have posted all classes in demo project in the first post. I need to change the background colour of the cell and disable cell depending on a property bounded to the cell. I have disabled the cell using IsReadOnlyBinding property. But I couldn't change the colour using same property(IsRelevant). 

[Dimitrina]

Hi,

You say you need to ​change the background color of the cell and disable it based on a property bound to the cell.

I believe you can achieve your goal to conditionally style the cells applying a CellStyleSelector for the column. You can check our documentation on how the CellStyleSelector works.

Regards,
Didie
Telerik