The DataGrid

2015-01-30_10-00-04

We’ve recently received several questions around the DataGrid control, and I thought why not just talk about one control with more depth. The DataGrid is a very nice and simple control which allows to display data as a grid ;-). That means you have several rows and several columns. Now, the nice thing of this control is that with very little settings you can get already a nice looking result. Let’s have a first try. Just place the following XAML code at a meaningful position in your XAML file.

<DataGrid Name="myDataGrid"/>

Ok, our DataGrid now has a name (myDataGrid), so that we can address it via PowerShell. Now, as this control displays a list of values, it has a property called ItemsSource. We can either set the ItemsSource via PowerShell, for instance within the InitializeWindow, like this:

$dsWindow.FindName("myDataGrid").ItemsSource = @("test1","test2","test3")

or via the XAML, like this

<DataGrid Name="myDataGrid" ItemsSource="{Binding PsList[GetDataForTheGrid]}"/>

with the according PowerShell function called GetDataForTheGrid which provides data, like this

function GetDataForTheGrid
{
   return @("test1","test2","test3")
}

The difference between the first and second approach is that via PowerShell (first approach) we can set and change the ItemsSource whenever we like from within PowerShell. In case of the second way (binding via XAML) the user interface will take care to get the values as needed. This happens once, right at the beginning, when the dialog is generated. And unless there is no need to refresh the UI, the data will no longer be pulled. So, if you have all your information available at the beginning, then the second approach, loading via binding to a function, might be best. But if you have the data available just later in the process, then setting the ItemsSource via PowerShell, is what you are looking for. Of course you can mix those two techniques.

Anyway, let’s have a look at the result of this few lines:

2015-01-30_08-26-08

Ok, we see three lines, which makes sense, as in our array we passed three values. Btw, if you didn’t know it already, now you know that with @(“”,””,””,””,….) you can create an array, either of strings “” or number or whatever. But why do we have a column called Length and all the values are set to 5??? Well, as the DataGrid displays information as a grid with columns, the control tries to interpret the information passed and map them into columns. We passed three strings, and each string has a property called Length, and the length of each text is 5 (“test1” = 5 characters). So the DataGrid thought to do us a favour and instead of showing the data, it interprets the properties of the passed objects and show them as columns.

Well, now that we know this, we can just pass objects instead of strings (actually a string is an object, but not the kind we want). This means we have to create a little object with properties. Here, unfortunately, we have to write a bit C# code, as, as far as I know, there is no easy way to create an object with properties.

So, in case you use setting the ItemsSource via PowerShell code, for instance within the InitializeWindow, then your code might look like this. Place this code right at the beginning of your PowerShell script, outside of any function.

Add-Type @"
public class myRow
{
  public string Text {get;set;}
}
"@

The reason is that this code should be executed just once in order to define the class, and cannot be executed every time the Data Standard dialog gets opened.

Within the InitializeWindow you can then place this code

$test1 = New-Object myRow -Property @{Text = "test1"}
$test2 = New-Object myRow -Property @{Text = "test2"}
$test3 = New-Object myRow -Property @{Text = "test3"}
$dsWindow.FindName("myDataGrid").ItemsSource = @($test1, $test2, $test3)

As you can see, we now generated 3 variables of type myRow and set the one property Text to the according value. The result now looks like this

2015-01-30_09-02-15

Better!! Now, that we have one  property, why not add additional properties to our class and populate them. I’m adding an additional property of type bool (true, false).

Add-Type @"
public class myRow
{
   public string Text {get;set;}
   public bool Check {get;set;}
}
"@

You will notice that when you change the class properties, you will have to restart either Inventor, AutoCAD or Vault in order to get these changes reflected. And this is the new PowerShell code:

$test1 = New-Object myRow -Property @{Text = "test1"; Check = $false }
$test2 = New-Object myRow -Property @{Text = "test2"; Check = $true}
$test3 = New-Object myRow -Property @{Text = "test3"; Check = $false}
$dsWindow.FindName("myDataGrid").ItemsSource = @($test1, $test2, $test3)

And this is how it looks

2015-01-30_09-16-50

As you can see, the columns are added automatically, and the column header (title) is the same as the property name. So if you have more properties, then more columns will show up with according title and values, for free.

However, in case you want to have more control on the behavior of the DataGrid and columns, then there are more XAML attributes that can help. For instance, you will notice that by now you can also edit the text, which is cool as you can read the changed values (ItemsSource) anytime and do something with them. However, if you just want to show something, then you will set the DataGrid to IsReadOnly=True:

<DataGrid Name="myDataGrid" <strong>IsReadOnly="True"</strong>/>"

In the next step, let’s also make the columns a bit nicer and introduce sorting. We do have a Check property which is a bool (true,false), so let’s show a checkbox instead of displaying the text. In order to do that, we have to disable the AutoGenerateColumns and then define the columns by ourselves like this

<DataGrid Name="myDataGrid" IsReadOnly="True" <strong>AutoGenerateColumns="False"</strong>>
  <strong><DataGrid.Columns></strong>
<strong>    <DataGridTextColumn Binding="{Binding Text}" Header="Text"/></strong>
<strong>    <DataGridCheckBoxColumn Binding="{Binding Check}" Header="Check"/></strong>
<strong>  </DataGrid.Columns></strong>
</DataGrid>

The result is that we have now columns that looks nicer and we can sort them, like this

2015-01-30_09-38-56

As you can see, there are different types of DataGridxxxColumn types. Here we used the Text and CheckBox, but you can search the web for more types. Now, there is more to tell about the DataGrid, as for instance you can also display images in the list, such as the file thumbnails from Vault, and even more. Of course, the more you like to get, the more effort you have to put into it.

So far you (hopefully) have now a better understanding of the power of DataGrid and some simple approaches to get started! Now it’s up to your imagination.

This entry was posted in Data Standard, PowerShell. Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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