Question

I have a DataGrid (dataGrid1) where records can be added and deleted.

Based on that dataGrid1, I want to make a new Grid with buttons in it based on ID and Types’. Cols will also have to given a DataSource of add dynamically, but that will be just while generating for the 1st time in Window_Loaded itself. Rows can be added/removed based on changes in dataGrid1. I want somethign like this :

On each Btn click, a new window will be opened for entry of the particular Type and for the particular ID. If the details are already entered, then the text of btn wil be “Update” else “Add”.

What could be the best resource/control to perform this operations ? At present, I just did a Grid with 2 stable cols. Any ideas for the above to use Grid, DataGrid or something else. And adding/removing rows will be easy in which way and how.

Any help is appreciated.

Answer 1

Okay, let me try to take an example which is similar to your needs

Let’s assume we use this class:

public class MyObject
{
   public int MyID;
   public string MyString;
   public ICommand MyCommand;
}

And we are willing to display a DataGrid listing the ID, and having as a second column a Button, with the property MyString as content, which, when clicked, launches the ICommand MyCommand which opens in a new window whatever you want.

Here is what you should have on the View side:

    <DataGrid ItemsSource="{Binding MyList}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="ID" Binding="{Binding MyID}" />
            <DataGridTemplateColumn Header="Buttons">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Content="{Binding MyString}" Command="{Binding MyCommand}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

This will show a DataGrid taking all the content in an IEnumerable<MyObject> named ‘MyList’, and shows two columns as defined before.

Now if you need to define the command.
First, I recommend you read this introductory link to MVVM and take the RelayCommand class (that’s what we’re gonna use for your problem)

So, in your ViewModel, the one which defines the MyList, here is how you should define some of the useful objects:

public ObservableCollection<MyObject> MyList { get; set; }

// blah blah blah

public void InitializeMyList()
{
  MyList = new ObservableCollection<MyObject>();
  for (int i = 0; i < 5; i++)
  {
    MyList.Add(InitializeMyObject(i));
  }
}

public MyObject InitializeMyObject(int i)
{
  MyObject theObject = new MyObject();
  theObject.MyID = i;
  theObject.MyString = "The object " + i;
  theObject.MyCommand = new RelayCommand(param =< this.ShowWindow(i));
  return theObject
}

private void ShowWindow(int i)
{
  // Just as an exammple, here I just show a MessageBox
  MessageBox.Show("You clicked on object " + i + "!!!");
}

This should be enough to create whatever you want. As you can see, every Button will call a method (ShowWindow) which is defined to show your new window, do whatever you need inside. The RelayCommand is actually just here, as its name says, to relay the command fired by the button to a method which contains the execution logic.

And… I think that’s all you need. Sorry for the late answer BTW

EDIT – generating columns manually/dynamically

The following code is part of a code I had to do when I had a similar problem.
My problem was, I needed to change the columns displayed every time a ComboBox‘s SelectedItem would change. So I put this in a SelectionChanged event handler.
I don’t know where exactly do you need to generate your columns, but I’ll give you a general example.

Assume your ItemsSource is an ObservableCollection<MyNewObject>

MyNewObject is the following:

public class MyNewObject
{
   public IList<string> MyStrings { get; set; }
}

You should put somewhere in your code (should be when you need to generate the column) the following code, which is generating a number of columns equal to the length of the first MyNewObject from the list (note: this is in code-behind, and the DataGrid you’re working on is named dataGrid)

ObservableCollection<MyNewObject> source = dataGrid.ItemsSource as ObservableCollection<MyNewObject>;

if (source == null || source.Count == 0)
{
  return;
}
MyNewObject firstObject = source[0];

for(int i = 0; i < firstObject.MyStrings.Count; i++)
{
   // Creates one column filled with buttons for each string
   DataGridTemplateColumn columnToAdd = new DataGridTemplateColumn();
   columnToAdd.Width = 110; // I set a manual width, but you can do whatever you want
   columnToAdd.Header = "Header number " + i;

    // Create the template with a Button inside, bound to the appropriate string
    DataTemplate dataTemplate = new DataTemplate(typeof(Button));
    FrameworkElementFactory buttonElement = new FrameworkElementFactory(typeof(Button));

    Binding binding = new Binding("MyStrings[" + i + "]");
    binding.Mode = BindingMode.TwoWay;
    binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;

    buttonElement.SetBinding(Button.ContentProperty, binding);

    // Do the same here for your command, or for whatever you want to do when the user clicks on this button

    dataTemplate.VisualTree = buttonElement;
    columnToAdd.CellTemplate = dataTemplate;
    dataGrid.Columns.Add(columnToAdd);
}

This will create one column for each string found in the first object. Then, enhance it with whatever command or display trick you need!