DbNetEdit

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="/dbnetedit/dbnetedit.js"></script>

4.x

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

Defining the layout of the edit form

Column placeholders in the form template are now defined with the ColumnExpression attribute which is assigned the name of the database column to be edited. This is instead of defining the ID to be the column name and also specifying a class of dbnetedit.

3.x

...
<div id=dbnetedit1 style='width:33%'>
		<fieldset>
			<legend>Categories</legend>
			<table cellspacing=5>
				<tr>
					<td colspan=2>
						<table>
							<tr>
								<td id=editNavigation> </td>
								<td id=toolbar> </td>
								<td id=navigatorStatus> </td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>Id</td>
					<td><input id=categoryid class=dbnetedit></td>
				</tr>
				<tr>
					<td>Name</td>
					<td><textarea id=categoryname class=dbnetedit></textarea></td>
				</tr>
				<tr>
					<td>Description</td>
					<td><textarea id=description class=dbnetedit></textarea></td>
				</tr>
				<tr>
					<td colspan=2 id=messageLine> </td>
				</tr>
			</table>
		</fieldset>
	</div>
...

4.x

...
    <table id="dbnetedit1">
        <tr>
			<td>Category ID</td>
			<td>
				<span ColumnExpression="CategoryID"/>
			</td>
		</tr>
        <tr>
			<td>Category Name</td>
			<td>
				<span ColumnExpression="CategoryName"/>
			</td>
		</tr>
        <tr>
			<td>Description</td>
			<td>
				<span ColumnExpression="Description"/>
			</td>
		</tr>
		<tr>
            <td colspan="2" style="text-align:right;border-top:1pt solid silver" ID="dbnetedit1_toolbarPanel"></td>
        </tr>
        <tr>
            <td colspan="2" ID="dbnetedit1_messagePanel"></td>
        </tr>
    </table>
...

Assigning properties to columns

The setFieldProperty method has been replaced with the setColumnProperty method.

3.x

...
dbnetedit1 = new DbNetEdit( "dbnetedit1" )

with ( dbnetedit1 )
{
   ...
   setFieldProperty('productname', 'required:true')
   setFieldProperty('categoryid', 'required:true')
   setFieldProperty('unitprice', 'format:c')

   setFieldProperty('categoryid', "lookup:select categoryid, categoryname from categories order by categoryname")
   ...
}

4.x

...
dbnetedit1 = new DbNetEdit( "dbnetedit1" )

with ( dbnetedit1 )
{
   ...
   setColumnProperty("productname", "required", true);
   setColumnProperty("categoryid", "required", true);
   setColumnProperty("unitprice"', "format", "c");

   setColumnProperty('categoryid', "lookup", "select categoryid, categoryname from categories order by categoryname");
   ...
}
...

Specifying the primary key column

The primaryKeyName property has been replaced with the primaryKey column property.

3.x

...
var dbnetedit1 = new DbNetEdit("dbnetedit1")

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

4.x

...
var dbnetedit1 = new DbNetEdit("dbnetedit1");
with (dbnetedit1)
{
  ...
  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 dbnetedit1 = new DbNetEdit("dbnetedit1")

with (dbnetedit1)
{
 ...
 rowValidation = "validateForm"  
 onInitialised = "removeCalendarButton"  


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

 return true
}

function removeCalendarButton(grid)
{
 document.getElementById("birthdate.calendarBtn").style.display = "none";
}

4.x

...
var dbnetedit1 = new DbNetEdit("dbnetedit1");
with (dbnetedit1)
{
  ...
  bind("onRecordValidate" formValidation);
  bind("onInitialized" removeCalendarButton);
  ...
}
...
function formValidation(control, args)
{
 if ( edit validation fails )
 {
    args.cancel = true
    args.message = "Custom validation message"
 }
 return
}

function removeCalendarButton(control, args)
{
    control.$(".calendar-button").hide();
}

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.DbNetEdit" %>

4.x

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

Defining the layout of the edit form

Column placeholders in the form template are now defined with the ColumnExpression attribute which is assigned the name of the database column to be edited. This is instead of defining the ID to be the column name and also specifying a class of dbnetedit.

3.x

				<DNL:DbNetEdit 
					...
					>
					<FormTemplate>
						<fieldset>
							<legend>Categories</legend>
							<table cellspacing="5">
								<tr>
									<td colspan="2">
										<table>
											<tr>
												<td id="editNavigation"></td>
												<td id="toolbar"></td>
											</tr>
										</table>
									</td>
								</tr>
								<tr>
									<td>Id</td>
									<td><input id="categoryid" class="dbnetedit"/></td>
								</tr>
								<tr>
									<td>Name</td>
									<td><input id="categoryname" class="dbnetedit"/></td>
								</tr>
								<tr>
									<td>Description</td>
									<td><textarea id="description" class="dbnetedit"></textarea></td>
								</tr>
								<tr>
									<td id="navigatorStatus" colspan="2"></td>
								</tr>
								<tr>
									<td colspan="2" id="messageLine"></td>
								</tr>
							</table>
						</fieldset>
					</FormTemplate>
				</DNL:DbNetEdit>
				

4.x

	<DNL:DbNetEdit 
		...
		>
		<EditClientEvents>
			<DNL:EditClientEvent EventName="onRecordValidate" Handler="validateRow"/>
			<DNL:EditClientEvent EventName="onColumnValidate" Handler="validateColumn"/>
		</EditClientEvents>
		<FormTemplate>
			<table id="dbnetedit1">
				<tr>
					<td>Category ID</td>
					<td>
						<span ColumnExpression="CategoryID"/>
					</td>
				</tr>
				<tr>
					<td>Category Name</td>
					<td>
						<span ColumnExpression="CategoryName"/>
					</td>
				</tr>
				<tr>
					<td>Description</td>
					<td>
						<span ColumnExpression="Description"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align:right;border-top:1pt solid silver" ID="dbnetedit1_toolbarPanel"></td>
				</tr>
				<tr>
					<td colspan="2" ID="dbnetedit1_messagePanel"></td>
				</tr>
			</table>
		</FormTemplate>
	</DNL:DbNetEdit>

Assigning properties to columns

The EditFieldProperties and SearchFieldProperties collections have been replaced with the EditColumns collection.

3.x

<DNL:DbNetEdit 
...
>
<EditFieldProperties>
                        <DNL:FieldProperty ColumnName="productname" Property="required" Value="true"></DNL:FieldProperty>
                        <DNL:FieldProperty ColumnName="categoryid" Property="required" Value="true"></DNL:FieldProperty>
                        <DNL:FieldProperty ColumnName="categoryid" Property="editLookupMultiSelect" Value="true"></DNL:FieldProperty>
</EditFieldProperties>
<SearchFieldProperties>
                          <DNL:FieldProperty ColumnName="categoryid" Property="searchLookup" Value="select categoryid, categoryname from categories order by categoryname"></DNL:FieldProperty>
</SearchFieldProperties>
...
</DNL:DbNetEdit>

4.x

	<DNL:DbNetEdit 
		...
		>
		<EditColumns>
			<DNL:GridColumn ColumnExpression="CategoryID" Required="true" Lookup="select categoryid, categoryname from categories order by categoryname"/>
			<DNL:GridColumn ColumnExpression="ProductName" Required="true"/>
		</EditColumns>
	</DNL:DbNetEdit>

Specifying the primary key column

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

3.x

				<DNL:DbNetEdit 
					...
					PrimaryKeyName = "CustomerID"
					>
				</DNL:DbNetEdit>

4.x

	<DNL:DbNetEdit 
		...
		>
		<EditColumns>
			<DNL:EditColumn ColumnExpression="CustomerID" Label="Customer" PrimaryKey="true"/>
			...
		</EditColumns>
	</DNL:DbNetEdit>

Assigning events

All events are now assigned using the EditClientEvents 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:DbNetEdit 
					...
					RowValidation = "formValidation"
					>
				</DNL:DbNetEdit>

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

 return true
}

4.x

	<DNL:DbNetEdit 
		...
		>
		<EditClientEvents>
			<DNL:EditClientEvent EventName="onRecordValidate" Handler="formValidation"/>
		</EditClientEvents>
	</DNL:DbNetEdit>

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