Step 1 of 5: Create the Controls

Show All

Hide All

Start a new project and add two controls:

A command Button near the top of the form.
A C1FlexGrid control in the area below the button.

If you can't find the C1FlexGrid control in the Toolbox, right-click on the toolbox and select Choose Items. Then, look for the C1FlexGrid control on the list of .NET components and make sure it is checked. If you can't find the grid in the component list, you may need to re-install the product.

Set the following properties in the Properties window:

Command Button

Property	Setting
Dock	Top
Text	"Open XML File…"

C1FlexGrid

Property	Setting
Dock	Fill

Double-click the form caption area to open the code window. At the top of the file, add the following statement:

Visual Basic	Copy Code
Imports C1.Win.C1FlexGrid

C#	Copy Code
using C1.Win.C1FlexGrid;

This makes the objects defined in the C1FlexGrid assembly visible to the project and saves a lot of typing.

Set up the grid either in the designer using the Properties window and editors, or in code by typing (or copying) the following code.

In the Designer

Set the following properties for the C1FlexGrid control in the Properties window:

Property	Setting
Cols.Count	2
Cols.Fixed	0
ExtendLastCol	True
Rows.Count	1
Tree.Column	0
Tree.Style	SimpleLeaf

Set up the styles for the grid:

Open the C1FlexGrid Style Editor by selecting Styles from the C1FlexGrid Tasks menu. For more information on accessing the C1FlexGrid Style Editor, see Accessing the C1FlexGrid Style Editor.
Select Normal in the list of Built-In Styles.
Set the Border.Style property to None, the TextAlign property to LeftCenter, and the WordWrap property to False.
Click the Add button.
Rename CustomStyle1 to Data.
Set the BackColor property to Control.
Click OK to close the editor.

Set up the columns for the grid:

Select Column 0 in the grid. This will open the Column Tasks menu for Column 0.
Set the Column Caption to Element.
Uncheck the Allow Editing check box.
Select Column 1.
Set the Column Caption to Text.

Alternatively, the columns can also be set up through the C1FlexGrid Column Editor:

· Open the C1FlexGrid Column Editor by selecting Designer in the C1FlexGrid Tasks menu. For details on how to access the C1FlexGrid Column Editor, see Accessing the C1FlexGrid Column Editor.
Select Column 0 in the right pane.
In the left pane, set the AllowEditing property to False and the Caption property to Element.
Select Column 1 in the right pane.
In the left pane, set the Caption property to Text.
Click OK to close the editor.

In Code

Visual Basic	Copy Code
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load ' Initialize the grid. C1FlexGrid1.Rows.Count = 1 C1FlexGrid1.Cols.Count = 2 C1FlexGrid1.Cols.Fixed = 0 C1FlexGrid1.ExtendLastCol = True C1FlexGrid1(0, 0) = "Element" C1FlexGrid1(0, 1) = "Text" ' Initialize the outline tree. C1FlexGrid1.Tree.Column = 0 C1FlexGrid1.Tree.Style = TreeStyleFlags.SimpleLeaf C1FlexGrid1.Cols(0).AllowEditing = False ' Initialize styles. C1FlexGrid1.Styles.Normal.Border.Style = BorderStyleEnum.None C1FlexGrid1.Styles.Normal.TextAlign = TextAlignEnum.LeftCenter C1FlexGrid1.Styles.Normal.WordWrap = False Dim cs As CellStyle = C1FlexGrid1.Styles.Add("Data") cs.BackColor = SystemColors.Control End Sub

Visual Basic

Copy Code

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

     ' Initialize the grid.
    C1FlexGrid1.Rows.Count = 1
    C1FlexGrid1.Cols.Count = 2
    C1FlexGrid1.Cols.Fixed = 0
    C1FlexGrid1.ExtendLastCol = True
    C1FlexGrid1(0, 0) = "Element"
    C1FlexGrid1(0, 1) = "Text"

      ' Initialize the outline tree.
    C1FlexGrid1.Tree.Column = 0
    C1FlexGrid1.Tree.Style = TreeStyleFlags.SimpleLeaf
    C1FlexGrid1.Cols(0).AllowEditing = False

     ' Initialize styles.
    C1FlexGrid1.Styles.Normal.Border.Style = BorderStyleEnum.None
    C1FlexGrid1.Styles.Normal.TextAlign = TextAlignEnum.LeftCenter
    C1FlexGrid1.Styles.Normal.WordWrap = False
    Dim cs As CellStyle = C1FlexGrid1.Styles.Add("Data")
    cs.BackColor = SystemColors.Control
End Sub

C#	Copy Code
private void Form1_Load( System.object sender, System.EventArgs e) { // Initialize the grid. c1FlexGrid1.Rows.Count = 1; c1FlexGrid1.Cols.Count = 2; c1FlexGrid1.Cols.Fixed = 0; c1FlexGrid1.ExtendLastCol = true; c1FlexGrid1[0, 0] = "Element"; c1FlexGrid1[0, 1] = "Text"; // Initialize the outline tree. c1FlexGrid1.Tree.Column = 0; c1FlexGrid1.Tree.Style = TreeStyleFlags.SimpleLeaf; c1FlexGrid1.Cols[0].AllowEditing = false; // Initialize styles. c1FlexGrid1.Styles.Normal.Border.Style = BorderStyleEnum.None; c1FlexGrid1.Styles.Normal.TextAlign = TextAlignEnum.LeftCenter; c1FlexGrid1.Styles.Normal.WordWrap = false; CellStyle cs = c1FlexGrid1.Styles.Add("Data"); cs.BackColor = SystemColors.Control;}

Copy Code

private void Form1_Load( System.object sender, System.EventArgs e)
{
    // Initialize the grid.
    c1FlexGrid1.Rows.Count = 1;
    c1FlexGrid1.Cols.Count = 2;
    c1FlexGrid1.Cols.Fixed = 0;
    c1FlexGrid1.ExtendLastCol = true;
    c1FlexGrid1[0, 0] = "Element";
    c1FlexGrid1[0, 1] = "Text";

     // Initialize the outline tree.
    c1FlexGrid1.Tree.Column = 0;
    c1FlexGrid1.Tree.Style = TreeStyleFlags.SimpleLeaf;
    c1FlexGrid1.Cols[0].AllowEditing = false;

     // Initialize styles.
    c1FlexGrid1.Styles.Normal.Border.Style = BorderStyleEnum.None;
    c1FlexGrid1.Styles.Normal.TextAlign = TextAlignEnum.LeftCenter;
    c1FlexGrid1.Styles.Normal.WordWrap = false;
    CellStyle cs = c1FlexGrid1.Styles.Add("Data");
    cs.BackColor = SystemColors.Control;}

Run the program and observe the following:

The code starts by setting up the grid layout and column heading text.

Next, it initializes the outline tree using the Tree property and prevents editing of the XML nodes by setting the AllowEditing property of the first column to False. Note that the user can still edit data in the second column, which contains the data in each XML node.

Now the control is ready. We can start adding some code to it.