// The InitializeLayout event is called when the grid binds to data. Many of these

// settings can be set at design time, rather then run time, via the property window.

// For this sample, these properties are set in code so that the settings are more easily visible.

// Turn on addnew, update and delete for the grid

e.Layout.AllowAddNewDefault = AllowAddNew.Yes;

e.Layout.AllowUpdateDefault = AllowUpdate.Yes;

e.Layout.AllowDeleteDefault = AllowDelete.Yes;

//Add the AddNew button

e.Layout.AddNewBox.Hidden = false;

e.Layout.Bands[0].AddButtonCaption = “Add New”;

e.Layout.Bands[0].AddButtonToolTipText = “Click here to Add New.”;

//// The Primary key field in most cases is an autogenerated number and will not be updated or set by the user. This

//// will prevent user action to modify the value

e.Layout.Bands[0].Columns.FromKey(“Sr”).AllowUpdate = AllowUpdate.No;

//// The DataKeyField of the Band should be set to PrimaryKey of the underlying table. To set the DataK

e.Layout.Bands[0].DataKeyField = “Sr”;

}

In your page’s Page_load event you can bind the grid to any data source e.g.

this.UWGItems.DataSource = this.TempDt;

this.UWGItems.DataBind();

Assuming that we’ve four columns in TempDT:

1) Sr. Serial Number

2) ItemName

3) ItemCode

4) Amount

These columns will be shown in your UltraWebGrid along with the * with each row for row editing and an ‘Add New’ button at the bottom of the grid. By clicking on ‘*’ or ‘Add New’ Button will open up the RowEditTemplate which we’ll be using later in this article.

Define the RowEditTemplate for your UltraWebGrid by adding the following lines of code to your Grid HTML

What happens when a user double clicks on any row or item, our function will just return 1 without doing anything means that there would be no operation in that case

// called when a cell, row label, or column header is double clicked

function DblClick(tableName, itemName)

{

return 1;

}

Our Purpose is to handle the RowEditTemplate using javascript, This following function will be called just before the RowEditTemplate is being closed.

We’ll be showing the next serial id and code using javascript, rest of the columns will be mapped automatically

function BeforeRowTemplateClose(gridName,rowId,bSaveChanges)

{

if(bSaveChanges)

{

var ActiveRow = igtbl_getActiveRow(gridName);

var oGrid = igtbl_getGridById(gridName);

var MaxCount=0;

var arr = rowId.split(“_”);

var ActualRowID = arr[arr.length-1];

var RowsCounter = oGrid.Rows.length;

for(c = 0; c < RowsCounter; c++)

{

var row = oGrid.Rows.getRow(c);

var CounterCell = row.getCell(0);

if(CounterCell.getValue()!=null)

MaxCount=CounterCell.getValue();

else if(CounterCell.getValue()==null && ActualRowID!=c)

oGrid.Rows.remove(c);

}

if(ActiveRow != null)

{

// Obtain the Cell object for Sr Column and Update the Cell value

if(ActiveRow.getCell(0).getValue()==null)

ActiveRow.getCell(0).setValue(MaxCount+1);

// Obtain the Cell object for Code Column and Update the Cell value

ActiveRow.getCell(2).setValue(“821311”);

}

}

}

if(bSaveChanges):

OK button of RowEditTemplate is clicked

var ActiveRow = igtbl_getActiveRow(gridName);

Get the active row of grid by specifying grid name

var arr = rowId.split(“_”);

var ActualRowID = arr[arr.length-1];

Split the row ID and get the actual rowID

for(c = 0; c < RowsCounter; c++)

{

var row = oGrid.Rows.getRow(c);

var CounterCell = row.getCell(0);

if(CounterCell.getValue()!=null)

MaxCount=CounterCell.getValue();

else if(CounterCell.getValue()==null && ActualRowID!=c)

oGrid.Rows.remove(c);

}

Loop through the grid till the RowsCounter, traverse through each row go till the last row, get the SerialNumber value and assign it to MaxCount, if the CounterCell’s value is null then delete that un-necessary row

if(ActiveRow != null)

{

// Obtain the Cell object for Sr Column and Update the Cell value

if(ActiveRow.getCell(0).getValue()==null)

ActiveRow.getCell(0).setValue(MaxCount+1);

// Obtain the Cell object for Code Column and Update the Cell value

ActiveRow.getCell(2).setValue(“821311″);

}

Check if the ActiveRow is not null and active row’s cell 0 has null value then place the new SerialNumber by adding 1 to MaxCount we already calculated.

We may wish to display some static code to the ItemCode column, for that purpose we’ve to place that value to active row’s cell no. 2 which is the ItemCode column.

Now you may wish to display the total of amounts entered in the Amount column, for this you will be writing javascript