We can create a grid by instantiating the DeepGrid class using the new operator. We need to pass the name of the grid, the border size for the grid, and the width of the grid. Any optional parameter in the methods can be ommited by passing null in its place. The following code creates a grid named testGrid with border size 1 and 80% in width. This call to DeepGrid returns the reference to the newly created grid, which is stored in the variable named testGridVar.

		var testGridVar=new DeepGrid("testGrid",1,"80%")
      

The code below creates a grid named testGrid and with width 80%. Since null is passed to the border parameter, the grid acquires to the default border of width 0.

		var testGridVar=new DeepGrid("testGrid",null,"80%")
      

Each grid has a collections object for Columns, called the ColumnHeaders. Columns can be added to the grid by calling the add() function of the ColumnHeaders. The code given below creates a column that is added to the end of the grid and is of type DG_LABEL

		var col1=testGridVar.ColumnHeaders.add()
      

Columns can be customized by passing arguments to the add function. For information on the various arguments, refer to the Column Section in the Developers Manual

    Create a TextBox Column

		// Creates a text box with column header "Email Address" and default value as "[email protected]"
		// and assigns the column object to col1
       var col1=testGridVar.ColumnHeaders.add(null,null,"Email Address",null,null,null,DG_TEXT,"[email protected]")
      

    Create a Select box

		// creates a select box with values populated from the array

		var list=new Array(
		               new Array('Tendulkar','India'), //First Option (text,value)
		               new Array('Lara','West Indies'), //Second Option
		               new Array('Gilchrist','Australia'), //Third Option
		               new Array('Kirsten','South Africa'), //Fourth Option
		               new Array('Astle','New Zealand'), //Fifth Option
					 )

		var col1=testGridVar.ColumnHeaders.add(null,null,"Batsman",null,null,null,DG_SELECT,list)
      

    Create a Check box

		// creates a checkbox that stores "on" if selected and null otherwise, with default checked.

		var col1=testGridVar.ColumnHeaders.add(null,null,"Checked ?",null,null,null,DG_CHECKBOX,"true")

		// creates a checkbox that stores "Completed" if selected and null otherwise, with default checked and "Module 5" as the checkbox text.

		var col1=testGridVar.ColumnHeaders.add(null,null,"Project Status",null,null,null,DG_CHECKBOX,new Array("true","Completed","Module 5"))

      

    Create a Radio button

        // ATTENTION!! ATTENTION!! It is not a good idea to pass the default value for a radio button as true
        // if there are more than one radio button; since only one radio button can be turned on at a point of time,
        // the radio button that is created last gets selected.
        // The best way is to pass the default value as false and then set the required radio button's value

        // creates a radio button that stores "on" if selected and null otherwise.

        var col1=testGridVar.ColumnHeaders.add(null,null,"Machine Status",null,null,null,DG_RADIO)

        // creates a checkbox that stores "Completed" if selected and null otherwise, with default checked.

        var col1=testGridVar.ColumnHeaders.add(null,null,"Project Status",null,null,null,DG_RADIO,new Array("true","Completed"))

        // Note: Each cell of the radio column has to be checked for the value, to determine the radio button that was checked
      

    Create a TEXTeXtension - TEXTX field

        // The textx field behaves like a normal text box but can store a value and a text.
        // The text is displayed in the textbox while the value is not shown.
        // creates a Text extension column, with default text DeepGrid and value [email protected]. On submission only the value is passed

        var col1=testGridVar.ColumnHeaders.add(null,null,"Contact Information",null,null,null,DG_TEXTX,new Array('DeepGrid','[email protected]'))

      

    Create a Image Column

        // The values passed to the default value can either be a string containing the image path
        // or can be an Array(imagePath,imageWidth,imageHeight). The default size (if no width and height are passed) is 32x32 pixels.
        // The following creates a Image type column with size 100x100.

        var col1=testGridVar.ColumnHeaders.add(null,null,"Contact Information",null,null,null,DG_IMAGE,new Array('duke.gif','100','100'))

      

Scripts can be added to the column by specifying the script while adding the column. The script is passed as a string, containing the event and the action to be taken.
NOTE: While passing "this" in a function, a reference to the control object of the cell and not the the cell is passed to the function. To get the cell element from the control, fetch the cell in position getRowNumber(control), getColumnNumber(control). These two methods are present in the DeepGrid class.

		var col1=testGridVar.ColumnHeaders.add(null,null,"Click Event",null,null,null,DG_BUTTON,"Click Me!!",null,"onClick=alert('Wow!! I have clicked')")
        

Styles can be added by passing the style as a string while creating the column. Styles can either be given as inline style or as a class to be applied.

		var col1=testGridVar.ColumnHeaders.add(null,null,"Style",null,null,null,DG_TEXT,"Type Here",null,null,"letter-spacing:5")
        

Setting the properties like background color, foreground color etc.. using style will not be reflected in the cell's backgroundColor, foregroundColor..etc properties

The Rows are accessed via the RowSet class. Adding a new row involves calling the add() from the RowSet class

		var row1=testGridVar.RowSet.add()
      

Data can be accessed via the Cell object. The functions getValue() and setValue(), gets and sets the values in the cell respectively. Certain Column Types offer getText()/setText() to retreive additional information like the checkbox text, TEXTX text etc; For the other columnTypes this function is equivalent to getValue()/setValue()

		testGridVar.rows(1).cells(1).getValue()
		testGridVar.getCell(1,1).getValue()
      

Each class contains the get and set methods for the following.

		testGridVar.rows(1).cells(1).setFontName('comic sans serif')
		testGridVar.rows(2).setBackgoundColor("yellow")