[Solved] How to skin RadGridView Q3 with Blend 3

[Ronald T. Raharjo]

I'm a web designer given the task of skinning Telerik Q3 RadGridView. I have looked through some tutorials and help from a variety of sites including the Telerik Forum to no avail. I'm using Blend 3, and the solution is published as Silverlight 3 by our developer via VS 2009. The Telerik is from Q3 edition.

My questions are:
1. When I drag the RadGridView object in Blend to my artboard, a dummy data is displayed, but when I publish it to the browser, it disappears. How do I create or bind this dummy data so I can see what I'm styling in the browser?

2. I've modified the properties of the RadGridView in the Miscellaneous panel in Blend, to a certain extent. But there are other parts that I need to style like the alternate row, header style, etc. The tutorial on Telerik site states that we should choose the GridView object on the artboard then "Edit a Template > Edit a Copy". This should lead me to a Style Resource section, but in fact this only leads me to a blank "ControlTemplate", not a Style Resource page. So how can we style the different parts of the GridView? What I really need to style are the Column Header, the row and alternating row.

3. How to insert graphic or text data into some columns?

4. How do I style different columns with different text styles?

Please advise,
Ronald

[Kalin Milanov]

Hi Ronald T. Raharjo,

Straight to your questions.
1. The dummy data you see when you drop the grid in Blend is provided by us so you can see what you are doing. This is no real data so once you fire the application nothing will be displayed. To bind the grid with some sample data you can use the Data tab on the right side create a data source and then (holding the shift key) drag and drop the collection onto the grid. Once you do that a dialog will appear prompting for a property to which to bind the data - choose ItemsSource. You can check this short video on the subject.

2. To style the row and alternate row you will need to set both RowStyle and AlternateRowStyle properties of the grid. In case you want to only change simple properties like Background you can use the following piece of XAML.

<Style x:Key="MyRowStyle" TargetType="grid:GridViewRow">
  <Setter Property="Background" Value="Red" />
</Style>

Then apply this style to the grid by setting RowStyle="{StaticResource MyRowStyle}" or by finding RowStyle in the properties grid, right click on the small square and select LocalResource > MyRowStyle. The same applies to AlternateRowStyle.

In case you need to edit the template of the grid you will need to select from the menu Object > Edit Additional Styles > RowStyle > Edit a Copy ... . This will provide you with both the style and the template of the row and you can edit it from there. The bad news in this case is that Blend 3 will report you invalid XAML exception even though there is none. This is a huge issue for us and we are working heavily on addressing it for 2010.Q1. Of course you can always edit the XAML itself manually.

3. As for the columns. You can insert images in the column header using the Header property. However you will need to define the columns in XAML to do so. Here is an example on how to do that by using the grid in the video above.

<telerikGridView:RadGridView Margin="142,18,143,92" ItemsSource="{Binding Collection}">
  <telerikGridView:RadGridView.Columns>
    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding Property1}" />
    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding Property2}" />
  </telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>

Now to insert an image in the first column you can do the following:

<telerikGridView:RadGridView Margin="142,18,143,92" ItemsSource="{Binding Collection}">
  <telerikGridView:RadGridView.Columns>
    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding Property1}">
      <telerikGridView:GridViewDataColumn.Header>
        <Image Source="MyImage.png" />
      </telerikGridView:GridViewDataColumn.Header>
    </telerikGridView:GridViewDataColumn>
    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding Property2}" />
  </telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>

Additionally every column has two style properties - HeaderCellStyle (the column header) and CellStyle (the style for the cells in that column). In this video styling the header cell is being demonstrated. Applying the style to the column header is done as follows:

<telerikGridView:RadGridView Margin="142,18,143,92" ItemsSource="{Binding Collection}">
  <telerikGridView:RadGridView.Columns>
    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding Property1}">
      <telerikGridView:GridViewDataColumn.Header>
        <Image Source="MyImage.png" />
      </telerikGridView:GridViewDataColumn.Header>
    </telerikGridView:GridViewDataColumn>
    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding Property2}" HeaderCellStyle="{StaticResource GridViewHeaderCellStyle1}" />
  </telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>

You can take the same approach for the cell itself.
I hope this information was useful to you. Let us know if you need any further assistance with the styling task at hand.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.