How to code an editable grid

It is possible to edit the 'current row' with the DTC Grid Control. This is based upon a sample from Microsoft.

http://msdn.microsoft.com/workshop/languages/vinterdev/bin/updateablegrid/editgrid0.asp

** You will need VInterdev Service Pack 3 or higher **
See also thread thread117-87230

For the DTC Grid Control, you will need to construct DTC text-box / check-box / select list etc. controls - one for each column of the grid. Attach these to the recordset(s) as required, but then make them 'hidden'. [Placing them AFTER the grid also seems to help].

In the Grid, instead of simply outputting the recordset data, you need to call a function that:
1. Checks if you are on the Current Row of the recordset
2. If NOT current row, then output the column data
3. If Current Row, then get the HTML of the editable DTC control (switching it to visible first).
An example Grid Column in the DTC properties could now look like:
=this.editCell(txtFullName, [USR_Full_Name])
Where:
this.editCell is a new method added to the GridDTC. If the code is NOT in the GridDTC, then you cannot use the 'this' bit;
txtFullName is the name of a DTC control, in this case a text INPUT control - but it could be any DTC (even another grid!)
[USR_Full_Name] is the recordset column with data to display on the non-editable rows.

I have extended the DATAGRID.ASP library code for the DTC Grid to include just such a function. You can adapt this code if you want to place it directly in the web page or an INC include file - in which case all references to this must be replaced with the name of your grid.

function _DG_editCell(vCurrentRowItem, vOtherRowItem) {
//
// Allow in-grid editing of the 'current' row
//
// You must have DTC controls already defined on
// the page, and bound to the appropriate recordset columns.
// - The DTC controls will be become hidden except in the grid area.
//
// 19-jan-2001 MBeedell From a sample page developed by Microsoft

var vItemToDisplay;

// are we on the 'current' row?
if(this._objDataSource.absolutePosition == this._markPos)
vItemToDisplay = vCurrentRowItem;
else
vItemToDisplay = vOtherRowItem;

//if the item to display is a DTC object (text box / combo etc.)
//then get the HTML for that object...
switch (typeof vItemToDisplay) {
case 'object':
// make current row INPUTs
var oControl = vItemToDisplay;
oControl.show();
//return the HTML as a string
vItemToDisplay = oControl.display(true);
oControl.hide();
break;
case 'undefined':
vItemToDisplay = '& n b s p ;' //non-braking space HTML value!!!
break;
}
//Return the HTML to display in the grid cell
return vItemToDisplay;
}

If you extend the DATAGRID.ASP as above, then you will also need to add the following line near the top of function _DG__Prototype() where you see other similar lines:

_DataGrid.prototype.editCell = _DG_editCell; //row edit feature


Unfortunately, extending any DTC in this way will not result in the new method or property showing in the handy pop-up lists in the VI editor.

A useful feature of the Grid that is rarely used is the 'Anchor' method - this re-positions the 'current row' to the one that you click. This is ideal when used with the editing feature. Place the following into an 'Unbound' column of a GridDTC and see what happens...
=this.anchor('Edit')
The text ('Edit') could be a complete HTML Image tag, if you want to be a bit more flash. You may want to edit the Anchor code in the DATAGRID.ASP to allow other parameters - such as the text to display on current row ('Save') and/or a style name to use.... =this.anchor('Edit', 'Save', 'clsGridLink'). But I'll leave you to figure this out!


Good luck!I