Telerik RadGridView Settings in Silverlight


We all use Telerik’s Rad Grid View in our projects, at some point of time the requirement might come as unexpected. In this article we are going to see one of the peculiar requirements. As you know Telerik’s Rad Grid View provides a handful of opportunities to customize the Rad Grid View Settings. Imagine a Silverlight client project has some requirements like; user should be able to save the Rad Grid View Settings at Admin and User level. This article is all about this.

Starts With

Let’s starts with creating a Silverlight project, where we would need Rad Controls from Telerik. If you have Telerik control’s installed, you could create a project from Telerik’s Template or you could add the required assemblies later after creating a simple Silverlight application project.

The following two snapshots are to provide the project template from Telerik and the further dialog which would help you opt for the required assemblies.


First of all we would add a Rad Grid View to our page, and feed it some sample data.

To add a settings view let’s add a user control to the application and name it as GridSettingsTestView. The idea is to take the current settings to the user control and in the user control we would be able to modify it.

We need to display the user control in a child window, as we are using rad controls why not to use Rad Window.

Let’s have a button somewhere in the main page, which would invoke the Rad Window on Click event.

Also in the User Control, we should have some buttons such as Apply and Cancel to apply the settings or cancel the operation respectively.

Now that we have seen the method where we could open the user control as a rad window and able to apply or cancel using the buttons respective Click events.

Now let’s design the settings view page. Basically we would need an items control where we would be able to display all the columns and some of the settings. The settings we are going to test on are Is Visible, Is Filterable, Is Groupable, Display Index, and Width.

Also a quick reminder that, the settings we are going to bind to the respective controls and the mode should be Two Way for those you need to affect the original grid.

The xaml for the design is goes like this.

As we have already created the Click event handlers for the Apply and Cancel buttons, let’s add some more code to the Apply button’s Click event. This is required because, even if some of the properties are changed in a mode Two Way, the properties would not be in affect; such as Width property of the column.

As you see in the above code display, we are looping through all the Columns of the Original grid and taking the temporary grid’s changed properties and apply the same to the original grid.

As I mentioned earlier that, Width property would not be affected, but I am adding all the properties that I am modifying in the Grid Settings View; this is to be in a safe side that all the changes are affected.

Now let’s test our proceedings.

The above image displays the Grid with sample data and the button as Settings.

As you see in the above image, we are able to see the current properties of the original grid. This has happened due to the following.

I have created a Property of type Rad Grid View to behave as the temporary grid. And assigning the data context of the user control as the temporary grid. The following code would be helpful.

As we have got the idea of modifying the grid properties, let’s create another settings view where we would add some of the common properties that could be set at Grid level and some of the properties that could be set at columns level.

From previous discussion, let’s have two expander controls from Telerik and add the properties to be modifiable as controls respectively.

The above image shows the basic design for the settings view.

The above image shows the Column Settings expander which has the following controls to display the properties of the original grid.

A ListBox to show the column names on the left hand side and on the right hand side some checkboxes and a rad numeric control to adjust the width of the column and finally a GridViewHeader control to display the preview of the width is being changed.

The above image shows the common properties that could be changed at grid’s root level.

Let’s have a test run.

As you see in the above image, we are displaying the properties in a better manner. The only thing is the left hand side panel would be visible, irrespective of the selection of the listbox. To fix this, let’s have a converter.

The converter would make the visibility collapsed if the value is null and otherwise it would return the visibility as visible.

Let’s include it in the user control and bind the visibility of the left hand side panel to it.

Let’s run the application again.

Yes, it is working as expected.

Let’s add some cosmetics to the application, not too much but a little, let’s change the settings button to a settings icon.

Added an image as settings and modified the content as the image.

Xaml goes like this.

Ends With

We have successfully modified the grid settings at run time, the grid settings are for the admin level and the column properties are for user level. Well to decide which one for which level, let the project owner decide it. To save the settings we could use couple of ways, such as saving it in Isolated Storage to be available at client level. Otherwise we could save the settings as a json string and save it at server side. So that the user could use the settings anywhere he wants. The second option sound good. To apply the saved settings, we should load the settings after the grid is loaded. To achieve that you could use the Loaded event handler of the Grid.

Thanks for reading, hope this article helps.

Full Source Code: Click Here

Related Posts:

1) TextBox Row Filter in Telerik’s RadGridView in Silverlight

2) Air Space Issue in Web Browser Control in Silverlight