DbNetGrid

Converting a client-side implementation

Including the client-side libraries

In version 4 all content including the client-side libraries are included in the DLL and are extracted using HTTP handlers (dbnetsuite.js.ashx).

3.x

<script src="/dbnetgrid/dbnetgrid.js"></script>

4.x

<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
<script language="JavaScript" src="dbnetsuite.js.ashx"></script>

Specifying columns and labels

The selectPart, headings, searchFields, searchLabels, editFields and editLabels properties have been replaced with the setColumnExpressions and setColumnLabels methods. The ability to display, search on or edit a column is now control by assigning the display, search and edit column properties.

3.x

...
dbnetgrid1 = new DbNetGrid( "dbnetgrid1" )

with ( dbnetgrid1 )
{
   ...
   selectPart = ["customerid","companyname","address","city","region","phone","fax"]
   headings = ["Customer ID","Customer Name","Address","City","Region","Phone","Fax"]
   ...
}

4.x

...
var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
with (dbnetgrid1)
{
     ...
     setColumnExpressions("CompanyName","Address","City","Phone","Fax");
     setColumnLabels("Company Name","Address","City","Phone","Fax");
     ...
}

Assigning properties to columns

The setColumnProperty, setEditColumnProperty and setSearchColumnProperty methods have been replaced with the setColumnProperty method.

3.x

...
dbnetgrid1 = new DbNetGrid( "dbnetgrid1" )

with ( dbnetgrid1 )
{
   ...
   selectPart = ["OrderID", "CustomerID","EmployeeID", "OrderDate", "RequiredDate", "ShippedDate", "ShipVia", "Freight"] 
   headings = ["OrderID", "Customer","Employee", "Ordered", "Required", "Shipped", "Ship Via", "Freight"] 
 
   searchFields = ["CustomerID", "OrderDate", "RequiredDate", "ShippedDate", "Freight"] 
   searchLabels = ["Customer", "Ordered", "Required", "Shipped", "Freight"] 

   setEditColumnProperty("customerid","lookup:select customerid, companyname from customers order by 2");
   setEditColumnProperty("EmployeeID","lookup:select employeeid,lastname + ', ' + firstname from employees order by 2");
   setEditColumnProperty("shipvia","lookup:select shipperid, companyname from shippers order by 2");

   setSearchColumnProperty("CustomerID","searchLookup:select CustomerID,companyname from customers order by 2");		setSearchColumnProperty("EmployeeID","searchLookup:select employeeid,lastname + ', ' + firstname from employees order by 2");
   setSearchColumnProperty("shipvia","searchLookup:select shipperid, companyname from shippers order by 2");

   setColumnLookup( "customerid","customerid","companyname","customers")
   setColumnLookup("employeeid","employeeid","lastname + ', ' + firstname","employees");
   setColumnLookup("shipvia","shipperid","companyname","shippers");

   setColumnProperty( "freight","format:c") 
   setEditColumnProperty( "freight","format:c") 

   setColumnProperty( "requireddate","format:MMM yy") // August, 2000
   setColumnProperty( "shippeddate","format:MMM yy") // August, 2000

   setEditColumnProperty( "requireddate","format:MMM yy") // August, 2000
   setEditColumnProperty( "shippeddate","format:MMM yy") // August, 2000   
   ...
}

4.x

...
var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
with (dbnetgrid1)
{
  ...
  setColumnExpressions("OrderID", "CustomerID","EmployeeID", "OrderDate", "RequiredDate", "ShippedDate", "ShipVia", "Freight");
  setColumnLabels("OrderID", "Customer","Employee", "Ordered", "Required", "Shipped", "Ship Via", "Freight");

  setColumnProperty((["OrderID","EmployeeID","ShipVia"], "search", false);

  setColumnProperty("customerid","lookup","select customerid, companyname from customers order by 2")
  setColumnProperty("EmployeeID","lookup","select employeeid,lastname + ', ' + firstname from employees order by 2")
  setColumnProperty("shipvia","lookup","select shipperid, companyname from shippers order by 2")

  setColumnProperty( "freight","format", "c") 

  setColumnProperty( ["requireddate","shippeddate"],"format", "MMM yy")
  ...

}
...

Specifying the primary key column

The primaryKey grid property have been replaced with the primaryKey column property.

3.x

...
var dbnetgrid1 = new DbNetGrid("dbnetgrid1")

with (dbnetgrid1)
{
 ...
 primaryKeyColumn = "orderid"
 ...
}
...

4.x

...
var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
with (dbnetgrid1)
{
  ...
  setColumnProperty("OrderID","primaryKey", true);
  ...
}
...

Assigning events

All events are now assigned using the bind method. All events handlers are passed a reference to the control as the first argument and in some cases are passed a second argument object with event specific properties.

3.x

...
var dbnetgrid1 = new DbNetGrid("dbnetgrid1")

with (dbnetgrid1)
{
 ...
 rowValidation = "customersRowValidation"
 deleteValidation = "customersDeleteValidation"

 ...
}
...
function customersRowValidation(editControl)
{
 if ( edit validation fails )
    return false

 return true
}

function customersDeleteValidation(grid)
{
 if ( delete validation fails )
    return false

  return true
}

4.x

...
var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
with (dbnetgrid1)
{
  ...
  bind("onRecordValidate" customersRowValidation);
  bind("onBeforeRecordDeleted" customersDeleteValidation);
  ...
}
...
function customersRowValidation(control, args)
{
 if ( edit validation fails )
 {
    args.cancel = true
    args.message = "Custom validation message"
 }
 return
}

function customersDeleteValidation(control, args)
{
 if ( delete validation fails )
 {
    args.cancel = true
    args.message = "Custom validation message"
 }
  return
}

3.x events and their 4.x equivalents

Converting a server-control implementation

Registering the tag prefix

The Namespace and Assembly need to be modified when registering the server-control tag prefix.

3.x

<%@ Register TagPrefix="DNL"  Namespace="DbNetLink.Web.UI" Assembly="DbNetLink.DbNetGrid" %>

4.x

<%@ Register TagPrefix="DNL"  Namespace="DbNetLink.DbNetSuite.UI" Assembly="DbNetLink.DbNetSuite" %>

Specifying columns and labels

The SelectPart, Headings, SearchFields, SearchLabels, EditFields and EditLabels properties have been replaced with the GridColumns collection. The ability to display, search on or edit a column is now control by assigning the Display, Search and Edit column properties.

3.x

<DNL:DbNetGrid 
id="customers" 
...
SelectPart = "customerid, companyname, address, city, region, phone, fax"
Headings = "Customer ID, Customer Name, Address, City, Region, Phone, Fax"
EditFields = "companyname, address, city, region, phone, fax"
EditLabels = "Customer Name, Address, City, Region, Phone, Fax"
SearchFields = "companyname, city"
SearchLabels = "Customer Name, City"
...
>
</DNL:DbNetGrid>				

4.x

	<DNL:DbNetGrid 
		...
		>
		<GridColumns>
			<DNL:GridColumn ColumnExpression="CustomerID" Label="Customer ID" Edit="false" Search="false"/>
			<DNL:GridColumn ColumnExpression="CompanyName" Label="CompanyName" Required="true"/>
			<DNL:GridColumn ColumnExpression="Address" Label="Address" Display="false" Search="false"/>
			<DNL:GridColumn ColumnExpression="City" Label="City" Display="false"/>
			<DNL:GridColumn ColumnExpression="Phone" Label="Phone" Display="false" Search="false"/>
			<DNL:GridColumn ColumnExpression="Fax" Label="Fax" Display="false" Search="false"/>
		</GridColumns>
	<DNL:DbNetGrid>

Assigning properties to columns

The GridColumnLookups, GridColumnProperties, SearchColumnProperties and EditColumnProperties collections have been replaced with the GridColumns collection.

3.x

				<DNL:DbNetGrid 
					...
					Headings = "Order ID,Customer,Employee ,Ordered,Required,Shipped,Ship Via,Freight"
					SelectPart = "OrderID,CustomerID,EmployeeID,OrderDate,RequiredDate,ShippedDate,ShipVia,Freight"
					...
					>
					<GridColumnLookups>
						<DNL:GridColumnLookup ColumnName="CustomerID" ForeignKeyColumn="customerid" ForeignDescriptionColumn="companyname" ForeignTable="customers"></DNL:GridColumnLookup>					
						<DNL:GridColumnLookup ColumnName="EmployeeID" ForeignKeyColumn="employeeid" ForeignDescriptionColumn="lastname + ', ' + firstname" ForeignTable="employees"></DNL:GridColumnLookup>					
						<DNL:GridColumnLookup ColumnName="ShipVia"	ForeignKeyColumn="shipperid" ForeignDescriptionColumn="companyname" ForeignTable="shippers"></DNL:GridColumnLookup>
					</GridColumnLookups>
					<GridColumnProperties>
						<DNL:ColumnProperty ColumnName="OrderDate" Property="format" Value="MMM yy"></DNL:ColumnProperty>
						<DNL:ColumnProperty ColumnName="RequiredDate" Property="format" Value="MMM yy"></DNL:ColumnProperty>
						<DNL:ColumnProperty ColumnName="ShippedDate" Property="format" Value="MMM yy"></DNL:ColumnProperty>
					</GridColumnProperties>
					<SearchColumnProperties>
						<DNL:ColumnProperty ColumnName="CustomerID" Property="searchLookup" Value="select customerid, companyname from customers order by 2"></DNL:ColumnProperty>
						<DNL:ColumnProperty ColumnName="EmployeeID" Property="searchLookup" Value="select employeeid,lastname + ', ' + firstname from employees order by 2"></DNL:ColumnProperty>
						<DNL:ColumnProperty ColumnName="ShipVia" Property="searchLookup" Value="select shipperid, companyname from shippers order by 2"></DNL:ColumnProperty>
					</SearchColumnProperties>
					<EditColumnProperties>
						<DNL:ColumnProperty ColumnName="CustomerID" Property="lookup" Value="select customerid, companyname from customers order by 2"></DNL:ColumnProperty>
						<DNL:ColumnProperty ColumnName="EmployeeID" Property="lookup" Value="select employeeid,lastname + ', ' + firstname from employees order by 2"></DNL:ColumnProperty>
						<DNL:ColumnProperty ColumnName="ShipVia"	Property="lookup" Value="select shipperid, companyname from shippers order by 2"></DNL:ColumnProperty>
					</EditColumnProperties>
				</DNL:DbNetGrid>

4.x

	<DNL:DbNetGrid 
		...
		>
		<GridColumns>
			<DNL:GridColumn ColumnExpression="OrderID" Label="Order ID"/>
			<DNL:GridColumn ColumnExpression="CustomerID" Label="Customer" Lookup="select CustomerID, CompanyName from Customers"/>
			<DNL:GridColumn ColumnExpression="EmployeeID" Label="Employee" Lookup="select EmployeeID, LastName & ', ' & FirstName from Employees"/>
			<DNL:GridColumn ColumnExpression="OrderDate" Label="Ordered" Format="MMM yy"/>
			<DNL:GridColumn ColumnExpression="RequiredDate" Label="Required" Format="MMM yy"/>
			<DNL:GridColumn ColumnExpression="ShippedDate" Label="Shipped" Format="MMM yy"/>
			<DNL:GridColumn ColumnExpression="ShipVia" Label="Shipped Via" Lookup="select ShipperID, CompanyName from Shippers"/>
			<DNL:GridColumn ColumnExpression="Freight"/>
		</GridColumns>
	</DNL:DbNetGrid>

Specifying the primary key column

The PrimaryKeyColumn grid property have been replaced with the PrimaryKey column property.

3.x

				<DNL:DbNetGrid 
					...
					PrimaryKeyColumn = "CustomerID"
					>
				</DNL:DbNetGrid>

4.x

	<DNL:DbNetGrid 
		...
		>
		<GridColumns>
			<DNL:GridColumn ColumnExpression="CustomerID" Label="Customer" PrimaryKey="true"/>
			...
		</GridColumns>
	</DNL:DbNetGrid>

Assigning events

All events are now assigned using the GridClientEvents collection. All events handlers are passed a reference to the control as the first argument and in some cases are passed a second argument object with event specific properties.

3.x

				<DNL:DbNetGrid 
					...

					RowValidation = "customersRowValidation"
					DeleteValidation = "customersDeleteValidation"
					>
				</DNL:DbNetGrid>

...
function customersRowValidation(editControl)
{
 if ( edit validation fails )
    return false

 return true
}

function customersDeleteValidation(grid)
{
 if ( delete validation fails )
    return false

  return true
}

4.x

	<DNL:DbNetGrid 
		...
		>
		<GridClientEvents>
			<DNL:GridClientEvent EventName="onRecordValidate" Handler="customersRowValidation"/>
			<DNL:GridClientEvent EventName="onBeforeRecordDeleted" Handler="customersDeleteValidation"/>
		</GridClientEvents>
	</DNL:DbNetGrid>

...
function customersRowValidation(control, args)
{
 if ( edit validation fails )
 {
    args.cancel = true
    args.message = "Custom validation message"
 }
 return
}

function customersDeleteValidation(control, args)
{
 if ( delete validation fails )
 {
    args.cancel = true
    args.message = "Custom validation message"
 }
  return
}