Column Properties

Top  Previous  Next

Columns are initially defined using the setColumnExpressions method. To assign a column property to a column use the setColumnProperty method referencing the column name specified in setColumnExpressions

Basic Properties

columnExpression (string)

This property defines the expression that represents the column in the grid. In most cases this is simply the column name but can also be a more complex SQL expression that is supported by the database. columnExpression is the only required column property and is assigned using the setColumnExpressions method that allows all the columns to be defined in a single method call

label (string)

Defines the text label displayed against the column. Defaults to the database column name if not specified. Column labels can be assigned with the setColumnLabels method or the setColumnProperty method

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"

			setColumnExpressions("CustomerID","EmployeeID","OrderDate","ShipVia");
			setColumnLabels("Customer","Employee","Order Date","Shipped Via");

			setColumnProperty("CustomerID","lookup","select CustomerID, CompanyName from Customers");
			setColumnProperty("EmployeeID","lookup","select EmployeeID, LastName & ', ' & FirstName from Employees");
			setColumnProperty("ShipVia","lookup","select ShipperID, CompanyName from Shippers");
			
			initialize()
		}
	}
	</script>

Run Sample

primaryKey (boolean)

For a grid to be editable or to act as a parent to a child control it is necessary for at least one column to be designated as a PrimaryKey. For multi-part primary keys every column that constitutes the key must have the PrimaryKey property set. In many cases DbNetGrid is able to automatically detect that a column is a PrimaryKey and will set this property automatically.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Customers"

			setColumnExpressions("CustomerID","CompanyName");

			setColumnProperty("CompanyName","label","Company Name");
			setColumnProperty("CustomerID","primaryKey", true;
			
			initialize()
		}
	}
	</script>

Run Sample

Additional Properties

aggregate (string)

The aggregate property specifies that an aggregate value for the column should be displayed in an aggregate row at the foot of the grid. Possible values are Sum, Avg, Min, Max and Count.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Orders join [Order Details] on Orders.OrderID = [Order Details].OrderID"

			setColumnExpressions(
				"[Order Details].ProductID",
				"Orders.OrderDate as FirstOrder",
				"Orders.OrderDate as LastOrder",
				"([Order Details].UnitPrice * [Order Details].Quantity) as TotalValue",
				"([Order Details].UnitPrice * [Order Details].Quantity) as AvgValue"
				)

			groupBy = true

			setColumnProperty("ProductID","lookup","select productid, productname from products")

			setColumnProperty("FirstOrder","aggregate","min")
			setColumnProperty("LastOrder","aggregate","max")
			setColumnProperty("TotalValue","aggregate","Sum")
			setColumnProperty("AvgValue","aggregate","Avg")
			
			initialize()
		}
	}
	</script>

Run Sample

audit (string)

Enables tracking of the date and the user that  changes made to the column in the edit dialog. Possible values are none, summary and detail. In summary mode only the date/user of the last change to the column is recorded, in detail mode all changes to the record are recorded including the previous value of the column and can be viewed in the Audit History dialog.

autoIncrement (boolean)

Indicates that the column value is auto-incrementing and therefore read-only. In the case of some columns such as SQL Server Identity columns this property is set automatically.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnExpressions(
				"EmployeeID",
				"LastName",
				"FirstName"
				)

			setColumnProperty("EmployeeID","autoincrement", true)
			
			initialize()
		}
	}
	</script>

baseTableName (string)

When using a view as a data source the baseTableName property can be used to indicate the name of the underlying table associated with the column

booleanDisplayMode (string)

This property determines how a boolean database value is displayed in the grid. Possible values are Checkbox, TrueFalse and YesNo. If not specified boolean values are displayed as a Checkbox

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{
				connectionString = "SamplesDatabase"
				fromPart = "Products"
	
				setColumnExpressions("ProductName","UnitPrice","UnitsInStock", "Discontinued");
	      setColumnProperty("Discontinued","booleanDisplayMode", "YesNo");
	
				initialize()
			}
	}
	</script>

Run Sample

bulkInsert (boolean)

Setting the bulkInsert column property will change the function of the Insert button to allow multiple records to inserted in a single action based on a selection from a list of values defined by the Lookup property (which must be assigned).

Run Sample

columnPicker (boolean)

Setting the columPicker column property to false will prevent the column from being included in the Column Picker dialog. The default value is true.

clearDuplicateValue (boolean)

Setting the clearDuplicateValue column property will fix the order of the selected rows to the columns assigned the property and will cause duplicated column values to be cleared to enhance the clarity of the grid data.

Run Sample

culture (string)

The culture property allows the default culture derived from the browser language to be overridden for a particular column. For example if a column represents a dollar amount you can force the value to be formatted as a dollar amount irrespective of the default culture.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var ordersGrid = new DbNetGrid("orders");

		with (ordersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"

                         setColumnProperties("Freight", {format:"c", culture:"en-US", toolTip:"Freight charge"});

			initialize()
		}
	}
	</script>

display (boolean)

Indicates that a column is not displayed in the grid. Used for columns that are editable or searchable but not to be displayed. Columns that are not displayed have their values returned as properties of the grid row which can be accessed using the columnValue method

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{
				connectionString = "SamplesDatabase"
				fromPart = "Suppliers"
				setColumnExpressions("CompanyName","Address & ', ' & City as addr","Address","City","Phone & '/' & Fax as phone_fax","Phone","Fax");
				setColumnLabels("CompanyName","Address","Address","City","Phone/Fax","Phone","Fax");
	
				setColumnProperty("addr","edit",false);
				setColumnProperty("address","display",false);
				setColumnProperty("city","display",false);
				setColumnProperty("phone_fax","edit",false);
				setColumnProperty("phone","display",false);
				setColumnProperty("fax","display",false);
	
				initialize()
		}
	}
	</script>

Run Sample

edit (boolean)

Indicates that a column is or is not editable. The default is true.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{
				connectionString = "SamplesDatabase"
				fromPart = "Suppliers"
				setColumnExpressions("CompanyName","Address & ', ' & City as addr","Address","City","Phone & '/' & Fax as phone_fax","Phone","Fax");
				setColumnLabels("CompanyName","Address","Address","City","Phone/Fax","Phone","Fax");
	
				setColumnProperty("addr","edit",false);
				setColumnProperty("address","display",false);
				setColumnProperty("city","display",false);
				setColumnProperty("phone_fax","edit",false);
				setColumnProperty("phone","display",false);
				setColumnProperty("fax","display",false);
	
				initialize()
			}
	}
	</script>

Run Sample

editColumnOrder (number)

Overrides the default edit column order in the Edit dialog allowing control of the position in relation to other columns. Each column has a default value of their 0 based display position multiplied by 100. For example setting the value of the editColumnOrder to a value of between 101 and 199 with move the column to the second position in the edit dialog.
Run Sample

editControlType (string)

The editControlType property allows you to manually specify the type of control used to edit the database value. A default value is assigned based on the type and size of the database column. For example, an editControlType of Html will make the editor an HTML Editor rather than the default Text editor for a text column.

Edit Control Types

Auto

Control type is automatically assigned based on the underlying database column. Default.

TextBox

Single-line text box

TextBoxLookup

Text box with a lookup button that opens a list selection dialog. Requires the Lookup property to be assigned.

TextBoxSearchLookup

Text box with a lookup button that opens a list selection dialog that searches data defined by the Lookup  property to be assigned. The search token will be used to search against all columns in the Lookup SQL apart from the first column.

CheckBox

Forces a field to act as a boolean type

Html

Edits HTML content with WYSIWYG HTML editor. The default editor has a minimal feature set for speed of loading. If a more  fully featured HTML editor is required you can enabled the TinyMCE editor by simply including the TinyMCE libraries in your application. The TinyMCE HTML editor can be customised using the onBeforeTinyMceInit event.

DropDownList

Drop-down list of values specified by the Lookup  property.

RadioButtonList

Radio button list of values specified by the Lookup  property.

ListBox

Multi-line list of values specified by the Lookup  property.

Label

Displays data in a read-only label

TextArea

Multi-line text box

Password

Password field where field contents are obscured

AutoCompleteLookup

Lookup items are suggested in response to typing the first few characters of the required value after searching values specified by the Lookup property. The search token will be used to search against all columns in the Lookup SQL apart from the first column. This lookup is ideal when there are large number of lookup items.

MultiValueTextBoxLookup

Text box with a lookup button that opens a list selection dialog and allows multiple values to be selected which are returned as a comma separated list. Requires the Lookup property to be assigned.

 

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{
				connectionString = "SamplesDatabase"
				fromPart = "Products"
				setColumnExpressions("ProductID","ProductName","CategoryID");
	
				setColumnProperty("CategoryID","editControlType","RadioButtonList");
				setColumnProperty("CategoryID","lookup","select categoryid, categoryname from categories");
				setColumnProperty("CategoryID","required",true);
				setColumnProperty("CategoryID","editControlProperties",{RepeatDirection : "Horizontal", RepeatColumns:2});
	
				initialize()
			}
	}
	</script>

Run Sample

editControlProperties (object)

The editControlProperties property can be used to assign values to the .Net controls used to create the editable controls. For example the following example sets the RadioButtonList server-control RepeatDirection and RepeatColumns properties

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{
				connectionString = "SamplesDatabase"
				fromPart = "Products"
				setColumnExpressions("ProductID","ProductName","CategoryID");
	
				setColumnProperty("CategoryID","editControlType","RadioButtonList");
				setColumnProperty("CategoryID","editControlProperties",{RepeatDirection : "Horizontal", RepeatColumns:2});
				initialize()
			}
	}
	</script>

Run Sample

editDisplay (boolean)

When set to false hides the edit field in the edit input form. The field is created but is hidden and can therefore be

editFormat (string)

Specifies an edit format mask if different from the display Format property. Values are the standard .NET date-time and numeric formatting strings.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{
				connectionString = "SamplesDatabase"
				fromPart = "Orders"
	
				setColumnExpressions("OrderID","OrderDate","RequiredDate","ShippedDate","Freight");
	      setColumnProperties("ShippedDate", {format:"MMM yyyy", editFormat : "d", toolTip:"Date shipped"});
	
				initialize()
			}
	}
	</script>

Run Sample

editLookup (string)

Specifies a lookup for an edit column when different from the Lookup property.

editMaxThumbnailHeight (number)

Specifies the maximum height of an image associated with a column when displayed as a thumbnail in the edit dialog. The width of the image is scaled in proportion to the height.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "SamplesDatabase"
				fromPart = "Employees"
	
	      setColumnProperties("Photo", "editMaxThumbnailHeight", 60);
	
				initialize()
			}
	}
	</script>

editStyle (string)

Allows CSS style attributes to be assigned to an edit field.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "SamplesDatabase"
				fromPart = "Products"
	
				setColumnExpressions("ProductName","UnitPrice","UnitsInStock");
	
				setColumnProperty("UnitPrice","style","background-color:gold");
				setColumnProperty("UnitsInStock","editStyle","background-color:gold;font-weight:bold");
				initialize()
		  }
	}
	</script>

Run Sample

encryption (string)

Specifies the one-way hashing algorithm used to encrypt the database value for fields such as passwords.  Possible values are SHA,SHA1,MD5,SHA256,SHA384 and SHA512

Run Sample

exportFileName (string)

Specifies the download file name for the exported grid

filter (boolean)

Indicates that the column has a filter in the grid header.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "SamplesDatabase"
				fromPart = "Orders"
	
				setColumnExpressions("CustomerID","EmployeeID","OrderDate","ShipVia","ShipCountry");
	      setColumnProperty("CustomerID","label", "Customer");
	      setColumnProperty("CustomerID","lookup", "select customerid, companyname from customers");
	      setColumnProperty("CustomerID","filter", true);
				setColumnProperty("EmployeeID","label", "Employee");
				setColumnProperty("EmployeeID","lookup", "select employeeid, lastname from employees");
				setColumnProperty("EmployeeID","filter", true);
				setColumnProperty("OrderDate","filter", true);
				setColumnProperty("ShipCountry","filter", true);
				setColumnProperty("ShipVia","lookup", "select shipperid, companyname from shippers");
				setColumnProperty("ShipVia","filter", true);
				initialize()
		 }
	}
	</script>

Run Sample

filterMode (string)

Sets the style of the column Filter in the grid header. Can be set to List for a drop-down list of possible values or Input where a free-text column filter is entered.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "SamplesDatabase"
				setColumnExpressions("CustomerID","EmployeeID","OrderDate","ShipVia","ShipCountry");
				setColumnProperty("OrderDate","filter", true);
				setColumnProperty("OrderDate","filterMode", "Input");
				initialize()
		  }
	}
	</script>

Run Sample

foreignKey (boolean)

Indicates that the column is acting as a foreign key in a child grid (either linked or nested). A ForeignKey column is paired with a PrimaryKey column in the parent control in order to establish the relationship between the 2 controls.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var ordersGrid = new DbNetGrid("orders");
		var orderLinesGrid = new DbNetGrid("orderLines");

		with (orderLinesGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "[Order Details]"

			setColumnExpressions("OrderID","ProductID","UnitPrice","Quantity","Discount");
      setColumnProperty("OrderID", "foreignKey", true);
		}

		with (ordersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"

			setColumnExpressions("OrderID","OrderDate","RequiredDate","ShippedDate","Freight");

			addLinkedControl(orderLinesGrid);
			initialize()
		}
	}

	</script>

Run Sample

format (string)

Specifies a format mask for a date-time or numeric value.  Values are the standard .NET date-time and numeric formatting strings. Use the EditFormat property to specify a distinct format string for the editable value. By default, formatting uses the culture indicated by the browser language (or server culture). You can specify the culture for formatting a particular column using the culture property.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var ordersGrid = new DbNetGrid("orders");

		with (ordersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"

			setColumnExpressions("OrderID","OrderDate","RequiredDate","ShippedDate","Freight");

     	setColumnProperties("OrderDate", {format:"D",  toolTip:"Date ordered"});
      setColumnProperties("RequiredDate", {format:"d",  toolTip:"Date required"});
      setColumnProperties("ShippedDate", {format:"MMM yyyy", editFormat : "d", toolTip:"Date shipped"});
      setColumnProperties("Freight", {format:"c", toolTip:"Freight charge"});

			initialize()
		}
	}
	</script>

Run Sample

For text based columns that contain web site or e-mail addresses the value richText can be used with the format property to automatically convert the values into hyperlinks.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var contactsGrid = new DbNetGrid("contactsGrid");

		with (contactsGrid)
		{
			...

     	                setColumnProperty("website","format","richText");
    	                setColumnProperty("email","format","richText");

			initialize()
		}
	}
	</script>

Run Sample

gridData (boolean)

Setting the property to false will suppress selection of data for the column from the database when displaying the grid. This contrasts with the display property which when set to false will still select the data from the database and make the value available as an attribute of the row.

groupHeader (boolean)

The GroupHeader column property can be used to display a column value as a group heading instead of a column to help eliminate redundant data and present data in a more compact style. Setting the property automatically fixes the order of the returned data to be that of the column(s) with the GroupHeader property set.

Run Sample

initialValue (string)

Supplies an initial default value for a column when adding a new record

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "SamplesDatabase"
				fromPart = "Employees"

				...
				setColumnProperty("TitleOfCourtesy","initialValue","Mr");
				...
			}
	}
	</script>

inlineEdit (boolean)

Setting this property to "true" will cause the column value to be editable directly inside the grid.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "SamplesDatabase"
				fromPart = "Products"

				setColumnExpressions("ProductID","ProductName","SupplierID","CategoryID","UnitPrice","Discontinued");
				setColumnProperty("ProductID","display",false);
				setColumnProperty("SupplierID",{lookup : "select supplierid, companyname from suppliers",editControlType : "TextBoxLookup", inlineEdit : true});
				setColumnProperty("CategoryID",{lookup : "select categoryid, categoryname from categories", inlineEdit : true});
				setColumnProperty("UnitPrice",{format : "C", inlineEdit : true, required : true});
				setColumnProperty("Discontinued",{inlineEdit : true});
				updateRow = false
				initialize()
			}
	}
	</script>

Run Sample

insertReadOnly (boolean)

Specifies that the column cannot be edited when a record is being added.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnExpressions("EmployeeID","FirstName","LastName","BirthDate","HireDate")
			setColumnProperty("FirstName","UpdateReadOnly",true)
			setColumnProperty("LastName","UpdateReadOnly",true)
			setColumnProperty("FirstName","Required",true)
			setColumnProperty("LastName","Required",true)
			setColumnProperty("BirthDate","ReadOnly",true)
			setColumnProperty("HireDate","InsertReadOnly",true)

			initialize()
		}
	}
	</script>

Run Sample

isBoolean (boolean)

Specifies that the column should behave like a boolean (bit) column (accepting only true/false). Some databases do not have a dedicated boolean type and with this property you can make a different data type such as an integer act like a boolean database type.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "Oracle"
				fromPart = "Products"

				setColumnExpressions("ProductName","UnitPrice","UnitsInStock", "Discontinued");
				setColumnProperty("Discontinued","isBoolean", true);

				initialize()
			}
	}
	</script>

lookup (string)

The lookup property is used to convert a value to/from its descriptive value typically held in a separate database table. The lookup property has 3 functions:

1. Convert a grid display value to its lookup description
2.Provide a lookup selection when editing the column
3.Provide a lookup selection when searching on the column

 

The lookup property can be specified as either an SQL statement or as a Javascript array. When specified as an SQL Statement the first column is the foreign key column that is matched against the column value and the second value is the descriptive value. When specified as a JavaScript array it should be as an array of 2 element string arrays.

Lookup as a SQL statement

The first column in the SQL statement is the value assigned to the edit field. The second column is the descriptive value displayed to the user. When a lookup is searchable ( i.e editControlType is AutoCompleteLookup or TextBoxSearchLookup) the second column (and any subsequent columns) will be searched against using the supplied user token. If only a single column is specified the column is used as the value and descriptive text.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase";
			setColumnExpressions("CustomerID","CompanyName","Region");			
			setColumnProperty("Region","lookup","select state_code, state_description from us_states")
			setColumnProperty("Region","label","State")
			initialize()
		}
	}
	</script>

Run Sample

Lookup as a Javascript array

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase";
			setColumnExpressions("CustomerID","CompanyName","Region");			
			setColumnProperty("Region","lookup","[['AK','Arkensas'],['CA','California'],['ID','Idaho'],['MT','Massachusetts'],['NM','New Mexico'],['OR','Oregon'],['WA','Washington'],['WY','Wyoming']]")
			setColumnProperty("Region","label","State")
			initialize()
		}
	}
	</script>

Run Sample

The way a lookup is implemented in the Edit Dialog can be controlled by setting the editControlType property to one of the following values DropDownList (default), TextBoxLookup, AutoCompleteLookup, TextBoxSearchLookup, ListBox or RadioButtonList

Run Sample

Using Lookup to add an aggregate value

In addition to descriptive values Lookups can also be used select aggregate values when used in a grid display context

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase";
			fromPart = "categories"
		        setColumnExpressions("CategoryName","Description","CategoryID");
		        setColumnLabels("Name","Description","Products");
		        setColumnProperty("CategoryID","lookup","select CategoryID, count(*) from products group by CategoryID");
		        setColumnProperty("CategoryID","primaryKey",true);
			initialize()
		}
	}
	</script>

Run Sample

lookupSearchMode (string)

The lookupSearchMode property is used to indicate if the search (via the search dialog) should be made directly against the column value or indirectly against the descriptive text as defined by the Lookup property. Possible values are SearchText or SearchValue.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"
			setColumnExpressions("OrderID","CustomerID","OrderDate","Freight")
			setColumnProperty(["OrderID","OrderDate","Freight"],"search",false)
			setColumnProperty("CustomerID",{label : "Customer", lookupSearchMode : "SearchText", lookup : "select CustomerID, CompanyName from Customers" })
			initialize()
		}

		var dbnetgrid2 = new DbNetGrid("dbnetgrid2");
		with (dbnetgrid2)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"
			setColumnExpressions("OrderID","CustomerID","OrderDate","Freight")
			setColumnProperty(["OrderID","OrderDate","Freight"],"search",false)
			setColumnProperty("CustomerID",{label : "Customer", lookupSearchMode : "SearchValue", lookup : "select CustomerID, CompanyName from Customers" })
			initialize()
		}
	}
	</script>

Run Sample

placeHolder (string)

Specifies text for the edit input placeholder

Run Sample

maxThumbnailHeight (number)

Specifies the maximum height of an image associated with a column when displayed as a thumbnail in the grid. The width of the image is scaled in proportion to the height.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{	
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Employees"
			setColumnExpressions("EmployeeID","FirstName","LastName","Photo");
			setColumnProperty("Photo",{uploadExtFilter:"png,jpg,gif", maxThumbnailHeight:100});
			setColumnProperty("EmployeeID","primaryKey", true);
			initialize()
		}
	}
	</script>

Run Sample

 

readOnly (boolean)

Indicates if a field is read-only in both insert and update mode. The column is displayed in the edit dialog but the value cannot be altered.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnExpressions("EmployeeID","FirstName","LastName","BirthDate","HireDate")
			setColumnProperty("FirstName","UpdateReadOnly",true)
			setColumnProperty("LastName","UpdateReadOnly",true)
			setColumnProperty("FirstName","Required",true)
			setColumnProperty("LastName","Required",true)
			setColumnProperty("BirthDate","ReadOnly",true)
			setColumnProperty("HireDate","InsertReadOnly",true)

			initialize()
		}
	}
	</script>

Run Sample

required (boolean)

When set to true then a value must be entered when editing the value

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnExpressions("EmployeeID","FirstName","LastName","BirthDate","HireDate")
			setColumnProperty("FirstName","Required",true)
			setColumnProperty("LastName","Required",true)

			initialize()
		}
	}
	</script>

Run Sample

search (boolean)

Indicates if a column is searchable (via the search dialog). Default is true.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"
			setColumnExpressions("OrderID","CustomerID","OrderDate","Freight")
			setColumnProperty(["OrderID","OrderDate","Freight"],"search",false)
			setColumnProperty("CustomerID",{label : "Customer", lookupSearchMode : "SearchText", lookup : "select CustomerID, CompanyName from Customers" })
			initialize()
		}
	}
	</script>

searchColumnOrder (number)

Overrides the default search column order in the Search dialog allowing control of the position in relation to other columns. Each column has a default value of their 0 based display position multiplied by 100. For example setting the value of the searchColumnOrder to a value of between 101 and 199 with move the column to the second position in the search dialog.
Run Sample

searchLookup (string)

Specifies a lookup for the column in the search dialog when different from the Lookup property.

sequenceName (string)

Specifies the name of an Oracle sequence or Firebird generator that is used to generate the primary key value.

	<script>
	jQuery(document).ready( init )

	function init()
	{
			var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
			with (dbnetgrid1)
			{	
				connectionString = "Oracle"
				fromPart = "Employees"
				setColumnExpressions("EmployeeID","FirstName","Lastname")
				setColumnProperty("EmployeeID","primaryKey", true);
				setColumnProperty("EmployeeID","sequenceName", "Employee_Sequence");

				initialize()
			}
	}
	</script>

simpleSearch (boolean)

Indicates that a column is eligible to be searched against with the Simple Search dialog.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "customers"

			setColumnExpressions("CompanyName","ContactName","Address","City","Phone","Fax");

			setColumnProperty("Address","simpleSearch", false);
			setColumnProperty("Phone","simpleSearch", false);
			setColumnProperty("Fax","simpleSearch", false);

			searchDialogMode = "simple"
			initialize()
		}
	}
	</script>

Run Sample

spellCheck (boolean)

Indicates that a spell checking should be enabled for this column in the edit dialog. To enable for all column use the grid spellCheck property.

style (string)

Specifies CSS style attributes that are applied to the column when displayed in the grid.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Products"

			setColumnExpressions("ProductName","UnitPrice","UnitsInStock");

			setColumnProperty("UnitPrice","style","background-color:gold");
			setColumnProperty("UnitsInStock","editStyle","background-color:gold;font-weight:bold");

			initialize()
		}
	}
	</script>

Run Sample

totalBreak (boolean)

Identifies a column which triggers the creation of sub-totals when the column value changes.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "((customers inner join orders on orders.customerid = customers.customerid) inner join [order details] on [order details].orderid = orders.orderid)"
	        updateRow=true
		    insertRow=false
			
			setColumnExpressions("Orders.CustomerID","Orders.OrderID","[Order Details].ProductID","[Order Details].UnitPrice","[Order Details].Quantity","([Order Details].UnitPrice * [Order Details].Quantity) as OrderValue");

			setColumnProperty("CustomerID", "label", "Company");
			setColumnProperty("CustomerID", "lookup", "select CustomerID, CompanyName from customers");
			setColumnProperty("CustomerID", "totalBreak", true);

			setColumnProperty("OrderID", "totalBreak", true);
			setColumnProperty("ProductID", "lookup", "select productid, productname from products");
			setColumnProperty("UnitPrice", "aggregate", "Avg");
			setColumnProperty("UnitPrice", "format", "C");
			setColumnProperty("Quantity", "aggregate", "Sum");

			setColumnProperty("OrderValue", "aggregate", "Sum");
			setColumnProperty("OrderValue", "format", "C");

			initialize()

		}
	}
	</script>

Run Sample

toolTip (string)

Specifies a tooltip for the edit control that will be displayed when the mouse hovers over the control

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var orderLinesGrid = new DbNetGrid("orderLines");

		with (orderLinesGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "[Order Details]"

			setColumnExpressions("OrderID","ProductID","UnitPrice","Quantity","Discount");
			setColumnProperties("ProductID", {label:"Product",lookup:"select productid, productname from products"});
			setColumnProperties("UnitPrice", {format:"c",toolTip:"Enter the net price (without tax)"});  
			setColumnProperties("Quantity",  {toolTip:"Enter quantity currently in stock"});  
			setColumnProperties("Discount", {format:"p",toolTip:"Enter discount as a percentage"});
			initialize()
		}
	}
	</script>

Run Sample

unique (boolean)

If set to true the column value will be checked for uniqueness when edited. Can be set on more than one column in which case the combination of column values must be unique. Any column that has the unique property set will automatically have the required property set to true.

Run Sample

updateReadOnly (boolean)

Specifies that the column cannot be edited when a record is being amended.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Employees"

			setColumnExpressions("EmployeeID","FirstName","LastName","BirthDate","HireDate")
			setColumnProperty("FirstName","UpdateReadOnly",true)
			setColumnProperty("LastName","UpdateReadOnly",true)
			setColumnProperty("FirstName","Required",true)
			setColumnProperty("LastName","Required",true)
			setColumnProperty("BirthDate","ReadOnly",true)
			setColumnProperty("HireDate","InsertReadOnly",true)

			initialize()
		}
	}
	</script>

Run Sample

uploadDataColumn

Specifies the column name in the Uploaded data source that is mapped to this column. In addition to specifying the name of a column in the uploaded data source the property can also be used to specify one of the following placeholder values which will be substituted with a run-time value.

UploadDataColumn Placeholders

{today}

Todays date

{now}

Current date and time (same for all uploaded records)

{user}

Current User name (either the ASP.NET user name or AuditUser

{filename}

The file name of the uploaded data source

(uniqueid)

A Unique ID (GUID) that can be used to link all the records uploaded together

 

Run Sample

uploadExtFilter (string)

Specifies a comma separated inclusive list of valid file extensions that can be selected for uploading.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid2 = new DbNetGrid("dbnetgrid2");
		with (dbnetgrid2)
		{
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Employees"
			setColumnExpressions("EmployeeID","FirstName","LastName","Photo");
			setColumnProperty("Photo",{uploadExtFilter:"png,jpg,gif", maxThumbnailHeight:100});
			setColumnProperty("EmployeeID","primaryKey", true);
			initialize()
		}
	}
	</script>

Run Sample

uploadMaxFileSize (number)

Specifies the maximum size in KB of a file that can be uploaded.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid2 = new DbNetGrid("dbnetgrid2");
		with (dbnetgrid2)
		{
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Employees"
			setColumnExpressions("EmployeeID","FirstName","LastName","Photo");
			setColumnProperty("Photo",{uploadExtFilter:"png,jpg,gif", uploadMaxFileSize:500});
			setColumnProperty("EmployeeID","primaryKey", true);
			initialize()
		}
	}
	</script>


uploadOverwrite (boolean)

Indicates if an existing file can be overwritten when uploading a new file.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid2 = new DbNetGrid("dbnetgrid2");
		with (dbnetgrid2)
		{
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Employees"
			setColumnExpressions("EmployeeID","FirstName","LastName","Photo");
			setColumnProperty("Photo",{uploadExtFilter:"png,jpg,gif", uploadOverwrite:true});
			setColumnProperty("EmployeeID","primaryKey", true);
			initialize()
		}
	}
	</script>

uploadRename (boolean)

Enables the ability for a user to manually rename a file as part of the upload process.

uploadRootFolder (string)

If a column is storing the path to an uploaded file then the uploadRootFolder must be specified to indicate where on the server the uploaded files should be saved.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Documents"
			setColumnExpressions("DocumentID","DocumentDescription","FilePath")
			setColumnProperty("FilePath",{uploadRootFolder:"~/samples/DbNetGrid/Upload Files",uploadExtFilter:"txt, doc, xls, pdf, ppt, jpg, gif"})
			setColumnProperty("FilePath","uploadOverwrite",true)

			initialize()
		}
	}
	</script>

Run Sample

uploadSubFolder (string)

The uploadSubFolder can be used to specify a portion of the folder information in the database along with the file name. For example you may want to set the uploadSubFolder to be the current year/month so that uploaded files can be grouped in folders by date.

	<script>
	jQuery(document).ready( init )

	function init()
	{
                var today = new Date()
                var monthFolder = (today.getMonth() +1).toString() + "-" + today.getYear().toString();
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabaseVistaDB"
			fromPart = "Documents"
			setColumnExpressions("DocumentID","DocumentDescription","FilePath")
			setColumnProperty("FilePath",uploadRootFolder:"~/samples/files/")
			setColumnProperty("FilePath",uploadSubFolder:" + monthFolder) 
			setColumnProperty("FilePath","uploadOverwrite",true)

			initialize()
		}
	}
	</script>

Run Sample

view (boolean)

Controls the appearance of the column in the View Dialog

width (number)

Specifies the width of a column edit control