WebGrid EXP References

1. COLUMNS (property)

The COLUMNS property specifies the table fields to be displayed in a grid.

Example :

We have a table called Orders that contains fields : ID, Product, Quantity and Price. We can set the COLUMNS property :

obj1.COLUMNS    =	["ID","Product","Quantity","Price","Total"]

Note :
Calculation field can also be used. In this example, "Total" does not exist on the Orders table. It is a result of "Quantity" x "Price" value. We can include "Total" to be displayed in a grid since its values may exist on the XML data returned from the server. This can be brought by SQL command :

SELECT ID, Product, Quantity, Price,  Quantity * Price AS Total FROM Orders

Assumed that this SQL command is used on the server side page where WebGrid EXP get the (XML) data from the database.

In addition, query field can also be used. For example, we have a table called Test that contains fields : TestID, CaseDesc, TestResult, Comment, NeedToFix and AssignedTo, and we have another table called Users that contains fields : UserID and FullName. In this case, field AssignedTo from table Test is a Foreign Key of UserID from table Users, as illustrated on the following diagram :

We need to display table Test in a grid. For this purpose, We can set the COLUMNS property :

obj1.COLUMNS    =	["TestID","CaseDesc","TestResult","Comment","NeedToFix","AssignedTo","FullName"]

In this example, "FullName" does not exist on the table Test, however it exists on another table called Users. This can be brought by SQL command :

"SELECT Test.TestID,Test.CaseDesc,Test.TestResult,Test.Comment,Test.NeedToFix,Test.AssignedTo, 
Users.FullName FROM Users INNER JOIN Test ON Users.UserID = Test.AssignedTo"



2. IDENTITY (property)

The IDENTITY property specifies the table Identities / Primary Keys.

Example :

We have a table called Orders that contains fields : ID, Product, Quantity and Price. The Identity/Primary Key of this table is ID. Then, we can set the IDENTITY property :

obj1.IDENTITY   =	["ID"]

Note :
It is possible to have more than one Identities.



3. INPUTTYPES (property)

The INPUTTYPES property defines the cell input types of each columns.

Example :

We have defined the COLUMNS property as :

obj1.COLUMNS    =	["ID","Product","Quantity","Price","Total"]
To display these fields in a grid, we need to define their input types :
obj1.INPUTTYPES =	[Array("Text",255,false,false),
		Array("Text",255,true,true),
		Array("Number",0,"","",true,true),
		Array("Number",2,"$","",true,true),
		Array("Number",2,"$","",false,false)] 

There are 10 input types that you can choose :

Input Type Description
Text To specify a "Text" input type, you need to define an array with elements :
  • "Text"
  • Maximum Length
  • Is Required (true/false)
  • Is Editable (true/false)
For example : Array("Text",255,false,false)

Number To specify a "Number" input type, you need to define an array with elements :
  • "Number"
  • Number of Decimal Places
  • Prefix (for example : "$","")
  • Suffix (for example : "%")
  • Is Required (true/false)
  • Is Editable (true/false)
For example :
if you need to display currency : Array("Number",2,"$","",true,true)
if you need to display percentage : Array("Number",0,"","%",true,true)

Boolean To specify a "Boolean" input type, you need to define an array with elements :
  • "Boolean"
  • Is Editable (true/false)
For example : Array("Boolean",true)

Date To specify a "Date" input type, you need to define an array with elements :
  • "Date"
  • Is Required (true/false)
For example : Array("Date",false)

DateTime To specify a "DateTime" input type, you need to define an array with elements :
  • "DateTime"
  • Is Required (true/false)
For example : Array("DateTime",false)

Image To specify a "Image" input type, you need to define an array with elements :
  • "Image"
  • Is Required (true/false)
  • Is Editable (true/false)
For example : Array("Image",false,true)

Link To specify a "Link" input type, you need to define an array with elements :
  • "Link"
  • MethodCalled (this is your custom function that you want to call when the link is clicked)
For example : Array("Link","getRecord()")

LookupSmall To specify a "LookupSmall" input type, you need to define an array with elements :
  • "LookupSmall"
  • Index Of Display Value
  • Lookup Name
  • Is Required (true/false)
For Example : Array("LookupSmall",6,"dsoUsers",true)
If you use this input type, you also need to call setLookupData() function (See setLookupData function).
For example :
obj1.setLookupData("dsoUsers","dataGET/sampleGet_Users.asp?PageSize=100");	
As seen, setLookupData function specifies the Lookup Name, which is "dsoUsers".

To learn more about this input type, please see tutorial : "Attaching Lookup Table"

LookupLarge To specify a "LookupLarge" input type, you need to define an array with elements :
  • "LookupLarge"
  • Index Of Display Value
  • Lookup Source (a valid path of your custom lookup page)
  • Lookup Width
  • Lookup Height
  • Is Required (true/false)
For example : Array("LookupLarge",6,"sample6_lookup.htm",300,400,true)


To learn more about this input type, please see tutorial : "Attaching Custom Lookup Table"

None This type is only for fields which the purpose is only to provide display value (See COLUMNS property).
You just need to set empty string : ""



4. CAPTIONS (property)

The CAPTIONS property defines the captions of each columns. Captions will be displayed as table header in grid.

Example :

obj1.CAPTIONS   =	["ID",
		"Case Description",
		"Result",
		"Comment",
		"Need To Fix",
		"AssignedTo",
		"Select User"]



5. CELLWIDTH (property)

The CELLWIDTH property defines the cell width of each columns.

Example :

obj1.CELLWIDTH  =	[35,190,190,190,95,160,null]



6. CELLHEIGHT (property)

The CELLHEIGHT property defines the cell height.

Example :

obj1.CELLHEIGHT =	80



7. UrlGET (property)

The UrlGET property specifies the URL for getting the XML data (from database). The UrlGET property is mandatory and needs to point at a valid server page URL value that can be loaded.

Example :

obj1.UrlGET  =	"dataGET/sampleGet4.asp" 



8. UrlPOST (property)

The UrlPOST property specifies the url for posting the updated XML data (to update database). The UrlPOST property is used only for editable grid.

Example :

obj1.UrlPOST   =	"dataPOST/samplePost4.asp"



9. ImgURL (property)

The ImgURL property specifies the path/location for WebGrid EXP icons. The ImgURL property is mandatory and needs to point at a valid image path.

Example :

obj1.ImgURL  =	"include"



10. OrderBy (property)

The OrderBy property specifies the default field ordering.

Example :

obj1.OrderBy  =  "TestID"



11. OrderType (property)

The OrderType property specifies the ordering type : Ascending ("ASC") or Descending ("DESC").

Example :

obj1.OrderType  =  "DESC"



12. PageSize (property)

The PageSize property defines the number of records to be displayed on one page. If not set, the default value is 7.

Example :

obj1.PageSize = 5



13. FormatDate (property)

The FormatDate property defines the format date. The FormatDate property can be set to one of the folowing values :

Example :

obj1.FormatDate = "Mdyyyy"

Note : The use of this property needs to consider the format date of returned XML from the server (if there is a date field). For example, if the server returns XML data containing date : 15/09/2002, then we must set the FormatDate = "ddMMyyyy". On the server side, you can control the date format using Session.LCID.



14. DateSeparator (property)

The DateSeparator property defines the date separator. The DateSeparator property can be set to one of the folowing values :

Example :

obj1.DateSeparator = "/"

Note : The use of this property needs to consider the format date of returned XML from the server (if there is a date field). For example, if the server returns XML data containing date : 15/09/2002, then we must set the DateSeparator = "/". On the server side, you can control the date format using Session.LCID.



15. setLookupData (function)

The setLookupData specifies lookup name & lookup source (URL). Lookup name will be used as a parameter of "LookupSmall" input type (see INPUTTYPES property).

Example :

obj1.setLookupData("dsoUsers","dataGET/sampleGet_Users.asp?PageSize=100");	

To learn more about this function, please see tutorial : "Attaching Lookup Table"



16. SelectedRecord (property)

The SelectedRecord property can be read to determine the selected record/row.

Example :

var arrRecord = obj1.SelectedRecord;
alert(arrRecord[1]); //this is Identity
alert(arrRecord[2]); //this is displayed value

To learn more about this function, please see tutorial : "Attaching Custom Lookup Table"



17. getData (function)

The getData function is used to request data from the server (UrlGET) and display the returned data in a grid.

Example :

obj1.getData();



18. NumOfDisplayedRecords (function)

The NumOfDisplayedRecords property can be read to determine the number of displayed records in a grid.

Example :

alert(obj1.NumOfDisplayedRecords);



19. getCell (function)

The getCell property can be read to determine value of a certain cell.

Example :

alert(obj1.getCell(0,1));



20. QueryString (property)

The QueryString can be set to add additional string to be submitted when the getData() function is called. This property is useful when we create custom search. The additional string can contains search keywords that can be used to construct SQL command on the server side to get the data.

Example :

function Search()
		{
		obj1.QueryString = "Keyword=" + inpKeyword.value;
		obj1.getData();
		}

To learn more about this function, please see tutorial : "Creating Custom Search"



21. useBtnDelete (property)

The useBtnDelete property can be set false to disable/hide the Delete button. If not set, the default value is true.



22. useBtnAddNew (property)

The useBtnAddNew property can be set false to disable/hide the Add New button. If not set, the default value is true.



23. useBtnSave (property)

The useBtnSave property can be set false to disable/hide the Save button. If not set, the default value is true.



24. viewUnexpError (property)

The viewUnexpError can be set false to disable returned error to be displayed in a textarea below the grid. If not set, the default value is true.