Example
Source
Run as client-side object
This example uses the
transform
property with the
ColumnProperty
tag to display the
Discontinued
column as a checkbox.
Register the component libraries
<%@ Register TagPrefix="DNL" Namespace="DbNetLink.Web.UI" Assembly="DbNetLink.DbNetGrid" %>
Server Control
<form id="Form1" name="Form1" method="post" runat="server"> <table> <tr> <td> <DNL:DbNetGrid id="dbnetgrid1" runat="server" ConnectionString = "samples" FromPart = "[products]" SelectPart = "ProductName,QuantityPerUnit,UnitPrice,UnitsInStock,UnitsOnOrder,ReorderLevel,Discontinued" Headings = "Product Name,Quantity Per Unit,Unit Price,Units In Stock,Units On Order,Reorder Level,Discontinued" PrimaryKeyColumn = "productid" EditRowInitialisation = "initialiseEditRow" VirtualDir=".." > <GridColumnProperties> <DNL:ColumnProperty ColumnName="Discontinued" Property="transform" Value="DiscontinuedCellTransform"></DNL:ColumnProperty> </GridColumnProperties> <EditColumnProperties> <DNL:ColumnProperty ColumnName="Discontinued" Property="insertReadOnly" Value="true"></DNL:ColumnProperty> <DNL:ColumnProperty ColumnName="Discontinued" Property="initialValue" Value="true"></DNL:ColumnProperty> </EditColumnProperties> </DNL:DbNetGrid> </td> </tr> </table> </form>
Client-side script
////////////////////////////////////////////////////////////////////////////////////////////// function initialiseEditRow( editControl ) ////////////////////////////////////////////////////////////////////////////////////////////// { if (editControl.mode != 'update') // Don't apply to records being added return var discontinued = editControl.inputControl('Discontinued').checked editControl.inputControl('ProductName').readOnly = discontinued editControl.inputControl('QuantityPerUnit').readOnly = discontinued editControl.inputControl('UnitsInStock').readOnly = discontinued editControl.inputControl('UnitsOnOrder').readOnly = discontinued editControl.inputControl('ReorderLevel').readOnly = discontinued editControl.inputControl('UnitPrice').readOnly = discontinued } ////////////////////////////////////////////////////////////////////////////////////////////// function DiscontinuedCellTransform( cell ) ////////////////////////////////////////////////////////////////////////////////////////////// { var checked = "" if (cell.innerText == 'Yes' || cell.innerText.toLowerCase() == 'true' ) checked = "checked" cell.innerHTML = "<input type=checkbox " + checked + " style='height:14px;margin:0px;' onclick='return false;'></input>" cell.style.textAlign = "center" }