WinForms Grid - Save and Restore Grid Customizations

The XtraGrid supports saving and restoring custom views and grid layouts created during runtime. In this video, I’ll demonstrate how to customize a grid’s view by applying user-filters, and then we’ll go over the steps on how to save and reload the customizations.

1. I’ll start off with a new WinForms project.

2. I drop a button and dock it to the top of the form.

3. I’ll set its caption to “Save Layout”.

4. I’ll add a second button and dock it to the bottom.

5. This one, let it be called “Restore Layout”.

6. Finally, I’ll add an XtraGrid control and make it fill the available client area.

7. I’ll bind the grid to a data source by invoking its smart tag and clicking the “Add Project Data

Source” link.

8. I’ll use an existing Connection String for the CarsDB database.

9. I click “Next” and select the “Cars” Table that will supply data to the grid. 10. Click finish to complete the wizard.

11. Now, I’ll run the Grid’s Designer.

12. I switch to the Columns page, highlight the extra fields… and remove them.

13. I’m now done with column customization so I close the designer.

14. Next, I’m going to enable the Filter Editor button in the footer of the grid.

15. To do this, I select the GridView, expand its “OptionsView” property and set the

“ShowFilterPanelMode” property to “ShowAlways”. 16. Now I need to add some code to enable saving and restoring the grid layout.

17. Double-click on the “Save Layout” button to create an event handler for its Click Event.

18. I will add the following code to save the grid’s layout.

19. Note that I am creating a new XML file in the application directory, called “layout.xml”.

20. Then I write the current layout to the stream by using the SaveLayoutToStream method of the

GridView.

21. Finally, when the view settings have been written to the XML file, I close the stream.

22. Switch back to Design view.

23. I am now going to add a line of code to the “Restore Layout” button’s Click Event.

24. Double-click the button and add the following code to its event handler.

25. I will use the “RestoreLayoutFromXml” method to load the view settings from the XML file.

26. And I’m done!

27. I run the application to see the results.

28. I invoke the filter editor by clicking the “Edit Filter” button. 29. Let’s create a filter to display cars that have engines with 6 or more cylinders.

30. I apply the filter condition and close the editor. 31. Next, I’m going to change the view even more by grouping the data by specific columns.

32. Now that I have customized the view, I am going to save it by clicking the “Save Layout” button. 33. First, let’s see what the content of this XML file looks like.

34. I locate the “layout.xml” file in my application folder and open it.

35. You can see the GridView properties listed as “property” nodes.

36. Additionally, our custom filter is also saved in the “ActiveFilterString” property.

37. Let’s return to our application.

38. I’m going to clear the filter criteria and the column groupings.

39. I click the “Restore Layout” button and the custom view settings, including the user filter

criteria, are read back from the xml file and applied to the grid!

For more information, please refer to the XtraGrid’s Documentation (http://devexpress.com/Help/? document=XtraGrid).

Thanks for watching and thank you for choosing DevExpress!