Adding a column dynamically with mvvm pattern

[Darryl]

Hi guys

Ok two basic classes:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;

namespace ProjectMaster.Core.Business
{
    public class Project
    {
        #region Fields

        private string _name;
        private double _budget;
        private DateTime _startDate;
        private DateTime _finishDate;
        private int _duration;
        private ObservableCollection<Phase> _phases;

        #endregion

        #region Properties

        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public double Budget
        {
            get { return _budget; }
            set { _budget = value; }
        }

        public DateTime StartDate
        {
            get { return _startDate; }
            set { _startDate = value; }
        }

        public DateTime FinishDate
        {
            get { return _finishDate; }
            set { _finishDate = value; }
        }

        public int Duration
        {
            get
            {
                _duration = (_finishDate - _startDate).Days;
                return _duration;
            }
            set { _duration = value; }
        }

        public ObservableCollection<Phase> Phases
        {
            get { return _phases; }
            set { _phases = value; }
        }

        #endregion

        public Project(string name, int budget, DateTime startDate, DateTime finishDate)
        {
            this._name = name;
            this._budget = budget;
            this._startDate = startDate;
            this._finishDate = finishDate;
            _phases = new ObservableCollection<Phase>();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;

namespace ProjectMaster.Core.Business
{
    public class Phase
    {
        #region Fields

        private string _name { get; set; }
        private double _budget { get; set; }
        private DateTime _startDate { get; set; }
        private DateTime _finishDate { get; set; }
        private int _duration { get; set; }
        private ObservableCollection<Task> _tasks { get; set; }

        #endregion

        #region Properties

        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public double Budget
        {
            get { return _budget; }
            set { _budget = value; }
        }

        public DateTime StartDate
        {
            get { return _startDate; }
            set { _startDate = value; }
        }

        public DateTime FinishDate
        {
            get { return _finishDate; }
            set { _finishDate = value; }
        }

        public int Duration
        {
            get
            {
                _duration = (_finishDate - _startDate).Days;
                return _duration;
            }
            set { _duration = value; }
        }

        public ObservableCollection<Task> Tasks
        {
            get { return _tasks; }
            set { _tasks = value; }
        }

        public Phase(string name, int budget, DateTime startDate, DateTime finishDate)
        {
            this._name = name;
            this._budget = budget;
            this._startDate = startDate;
            this._finishDate = finishDate;

            _tasks = new ObservableCollection<Task>();
        }

        #endregion
    }
}

And the xaml that binds these classes to a RadTreeListView to get the expected output:

<telerik:RadTreeListView Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="6,0,0,0" AutoGenerateColumns="True" ItemsSource="{Binding Project, Mode=TwoWay}" SelectedItem="{Binding Item}">

     <telerik:RadTreeListView.ChildTableDefinitions>
         <telerik:TreeListViewTableDefinition ItemsSource="{Binding Phases}"/>
         <telerik:TreeListViewTableDefinition ItemsSource="{Binding Tasks}"/>
     </telerik:RadTreeListView.ChildTableDefinitions>

     <telerik:RadTreeListView.Columns>
         <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Header="Name" />

         <telerik:GridViewDataColumn Header="Start Date" DataType="{x:Type System:DateTime}">
             <telerik:GridViewDataColumn.CellTemplate>
                 <DataTemplate>
                     <telerik:RadDatePicker SelectedValue="{Binding StartDate, Mode=TwoWay}" />
                 </DataTemplate>
             </telerik:GridViewDataColumn.CellTemplate>
         </telerik:GridViewDataColumn>

         <telerik:GridViewDataColumn Header="Finish Date" DataType="{x:Type System:DateTime}">
             <telerik:GridViewDataColumn.CellTemplate>
                 <DataTemplate>
                     <telerik:RadDatePicker SelectedValue="{Binding FinishDate, Mode=TwoWay}" />
                 </DataTemplate>
             </telerik:GridViewDataColumn.CellTemplate>
         </telerik:GridViewDataColumn>

         <telerik:GridViewDataColumn Header="Duration" DataMemberBinding="{Binding Duration}" DataType="{x:Type System:Int32}" />

         <telerik:GridViewDataColumn Header="Budget (Hrs)" DataMemberBinding="{Binding Budget}" DataType="{x:Type System:Double}" />

     </telerik:RadTreeListView.Columns>

 </telerik:RadTreeListView>

I've attached an image to show what the output is like.

Not what I want to be able to do is if the user clicks on a button, a new column is added to the TreeListVIew for eg a Resource column. Im really not sure how to go about this so any help/tips to get me in the right direction will be greatly appreciated!!

Thanking you in Advance! 

[Dimitrina]

Hello,

You can check how to add an additional column in code behind in our online documentation. 

Kind regards,
Didie
the Telerik team

[Darryl]

Hi Didie

Thank you for your response. However the documentation does not provide the information I am looking for.

Basically, I need to add a column dynamically at run-time when the user clicks a button. That's easy enough when using code-behind. However, I am using Prism Unity and the Mvvm pattern which I did not mention in my initial question. I do apologise for that.

Do you have any ideas/pointers in the direction I could take to achieve this?

Regards
Darryl Chetty

[Dimitrina]

Hello Darryl,

What I can suggest you in order to dynamically add columns with the MVVM pattern, would be to use a Behavior for setting the Columns. This is demonstrated on the "ComboBox Column" example with the WPF Demos. 

I hope this helps.

All the best,
Didie
the Telerik team