Code Library

How to use multiple layouts in a GridEX control.

It is assumed that you are familiarized with the creation of DataSets with multiple tables and changing GridEX control settings at design time


Follow these steps to create multiple layouts at design time:



1 - Create a new Visual Basic or C# project using "Windows Application" Template



2 - Using the JSNorthWind Data Source, select the Customers, Products and Suppliers tables.



3 - Build the application to be able to see JSNorthwindDataSet and the TableAdapters created in the Tool box.



4 - Drag JSNorthwindDataSet and drop it into Form1.



5 - Drag CustomersTableAdapter and drop it into Form1.



6 - Drag ProductsTableAdapter and drop it into Form1.



7 - Drag SuppliersTableAdapter and drop it into Form1.



8 - Add a GridEX control to Form1.



7 - In GridEX control, select JSNorthwindDataSet1 as the DataSource and Customers as the DataMember.



8 - In the Designer window of the GridEX control click on the "Retrieve Structure" button to let GridEX control create the root table and the columns matching those found in the data source.



9 - Once the base structure is created, modify the layout as you want, changing the column positions, column widths, adding an icon column, etc.



9 -Select the "Layout Manager" Tab. A List View will appear with a "Draft Layout" in it. The Draft Layout contains the table structure you just created but it is not saved as a layout in the Layouts collection.



10 - Click on "Save Current Layout" button and set the name "Customers" to the draft layout.



11 -Once the "Customers" layout has been saved, add a new layout for products. To add a new layout click on the "New Layout" button and Layout1 will appear.



12 - Change the name of Layout1 for "Products".



13 - Double click in the "Products" layout to select this empty layout. This action will set the "Products" layout you just created as the CurrentLayout in the GridEX control and all the changes you do will affect this layout only.



14 - In GridEX control properties select JSNorthwindDataSet1 as the DataSource and Products as the DataMember.



15 - Click on "Retrieve Structure" button.



16 - Change any properties in the new layout like column positions or column widths.



17 - Select "Layout Manager" Tab again.



18 - Click in the "New Layout" button and Layout1 will appear.



19 - Change the name of Layout1 for "Suppliers".



20 - Double click in the "Suppliers" layout to select this empty layout. This action will set the "Products" layout you just created as the CurrentLayout in the GridEX control and all the changes you do will affect this layout only.



21 - In GridEX control properties select JSNorthwindDataSet1 as the DataSource and Suppliers as the DataMember



22 - Click on Retrieve Structure button.



23 - Change any properties in the new layout like column positions or column widths.



24 - You have finished adding layouts for the tutorial. To change a property in any of the layouts you have in the Layouts collection, select the layout from Layouts combo in the tool bar of the GridEX designer.



25 - To select a layout at run time use the CurrentLayout property of the GridEX class. In the tutorial we are going to do that using buttons. So, add a button "Button1" and change its Text property to "Show Customers". In the Click event for this button write the following code that set the "Customers" layout as the current layout in the GridEX control:



In VB:

          If GridEX1.CurrentLayout Is Nothing OrElse _

             GridEX1.CurrentLayout.Key <> "Customers" Then

             GridEX1.CurrentLayout = GridEX1.Layouts("Customers")

          End If

In C#

if(gridEX1.CurrentLayout==null || gridEX1.CurrentLayout.Key!="Customers")

{

  gridEX1.CurrentLayout = gridEX1.Layouts["Customers"];

}

26 - Add a buttons to show "Products" and "Suppliers" layouts with similar code in the Click event for those buttons.



27 - Now that we have written code to select the different layouts what rests is to fill the appropriate DataTable when a layout is selected. To do that, we handle the CurrentLayoutChanged event as follows:



In VB:

      'clear the DataTable used by the previous layout

      JsNorthWindDataSet1.Clear()

      If Not GridEX1.CurrentLayout Is Nothing Then

          Select Case GridEX1.CurrentLayout.Key

              Case "Customers"

                  CustomersTableAdapter1.Fill(JsNorthWindDataSet1.Customers)

              Case "Products"

                  ProductsTableAdapter1.Fill(JsNorthWindDataSet1.Products)

              Case "Suppliers"

                  SuppliersTableAdapter1.Fill(JsNorthWindDataSet1.Suppliers)

          End Select

      End If

In C#:

//clear the DataTable used by the previous layout

jsNorthWindDataSet1.Clear();

if (GridEX1.CurrentLayout != null)

{

 switch (GridEX1.CurrentLayout.Key)

 {

    case "Customers":               

       customersTableAdapter1.Fill(jsNorthWindDataSet1.Customers);

       break ;

    case "Products":

       productsTableAdapter1.Fill(jsNorthWindDataSet1.Products);

       break ;

    case "Suppliers":

       suppliersTableAdapter1.Fill(jsNorthWindDataSet1.Suppliers);

       break ;

 }

}

28 - Run the project.

Source Of Information : Janus v3.5 Help Files for VS 2008