While Spread for ASP.NET can be combined with CRUD operations, it might be useful to provide a better way for the user to enter data. In this blog, I will show how to combine a Row Edit Template with CRUD operations. This can be useful for cases where there are a lot of columns, and it would be tedious for the user to scroll through them all to edit the value that they want. The download for this sample can be found here: Spread ASP CRUD Row Edit Template In order to run this sample, you will need Visual Studio 2015 and SQL Server 2014. This sample builds on the project that was created in this blog: Spread ASP CRUD ADO.NET Binding 
The finished Row Edit Template
Create the Row Edit Template
Once you have the project created from the previous blog post, we can add a Row Edit Template to it. The code for this is all going to go inside the markup code itself, rather than in the code-behind. As you can see in the image above, the template contains all of the fields that we want to provide to the user. In order to accomplish this, we create an html table element and add cells to that table.
<table cellpadding="0" cellspacing="1" style="background-color: black">
<tr>
<td colspan="2" style="vertical-align: middle; background-color: #3f3f5e; color: white; text-align: center">Employee Management</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement1" runat="server"
ColumnIndex="0" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement2" runat="server"
ColumnIndex="0" Height="20px" Width="95%" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
</td>
</tr>
</table>
In the above code, we specify the title of the Row Edit Template by using a table cell () element with a colspan of 2. We also add a row below that that has two cells: one for the name of the field and the other for the actual field itself. For the name of the field, we specified a ReplacementType of Header, which lets the component know to use the header of the field rather than the actual value. The other fields have similar structures in the table. 
The Row Edit Template with the title and a row for the first field It is a good idea to have buttons to Update/Cancel the edits that a user makes. These can also be added as table cells, by changing the ReplacementType for each one. In the case of update, we will use UpdateButton as the ReplacementType, and for cancel use CancelButton:
<tr>
<td style="width: 100px; background-color: #56567f; color: white;"></td>
<td style="width: 200px; background-color: white; text-align: right">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement13" runat="server"
Height="20" ReplacementType="UpdateButton" Width="50px" />
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement14"
runat="server" Height="20" ReplacementType="CancelButton" Width="50px" />
</td>
</tr>
The Row Edit Template with Update and Cancel buttons added Once the rows have been added to the table, add it to a tag called RowEditTemplate under the FarPoint:SheetView tag:
<FarPoint:SheetView SheetName="Sheet1">
<RowEditTemplate>
<table cellpadding="0" cellspacing="1" style="background-color: black">
<tr>
<td colspan="2" style="vertical-align: middle; background-color: #3f3f5e; color: white; text-align: center">Employee Management</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement1" runat="server"
ColumnIndex="0" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement2" runat="server"
ColumnIndex="0" Height="20px" Width="95%" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement3" runat="server"
ColumnIndex="1" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement4" runat="server"
ColumnIndex="1" Height="20px" Width="95%" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement5" runat="server"
ColumnIndex="2" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement6" runat="server"
ColumnIndex="2" Height="20px" Width="95%" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement7" runat="server"
ColumnIndex="3" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement8" runat="server"
ColumnIndex="3" Height="20px" Width="95%" />
</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement9" runat="server"
ColumnIndex="4" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement10" runat="server"
ColumnIndex="4" Height="20px" ReplacementType="CellType" Width="95%" />
</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement11" runat="server"
ColumnIndex="5" Height="20px" ReplacementType="Header" Width="150" />
</td>
<td style="width: 200px; background-color: white">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement12" runat="server"
ColumnIndex="5" Height="20px" Width="95%" />
</td>
</tr>
<tr>
<td style="width: 100px; background-color: #56567f; color: white;"></td>
<td style="width: 200px; background-color: white; text-align: right">
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement13" runat="server"
Height="20" ReplacementType="UpdateButton" Width="50px" />
<FarPoint:FpSpreadTemplateReplacement ID="FpSpreadTemplateReplacement14"
runat="server" Height="20" ReplacementType="CancelButton" Width="50px" />
</td>
</tr>
</table>
<br />
</RowEditTemplate>
</FarPoint:SheetView>
CRUD Operations
For the most part, the server-side code used for CRUD operations does not need to be changed to accommodate the Row Edit Template. However, because the user can now Update from the template itself, we have to add a line of code in the UpdateCommand event to check if the values actually need updating. We can do this by checking if e.EditValues is null:
protected void FpSpread1_UpdateCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
{
if (e.EditValues != null)
{
int colcnt;
int r = (int)e.CommandArgument;
colcnt = e.EditValues.Count - 1;
for (int i = 0; i <= colcnt; i++)
{
if (!object.ReferenceEquals(e.EditValues[i], FarPoint.Web.Spread.FpSpread.Unchanged))
{
// Change the values of the checkbox to be more database-friendly
if (e.EditValues[i].Equals("false"))
e.EditValues[i] = 0;
else if (e.EditValues[i].Equals("True"))
e.EditValues[i] = 1;
// Set the values from the changed row into the row in the DataTable
ds.Tables[0].Rows[r][i] = e.EditValues[i];
}
}
// Update the data adapater with the changed DataTable
employeeDataAdapter.Update(ds.Tables[0]);
e.Handled = true;
}
}
When the page is running in a web browser, the Spread instance will display the data that was bound from the database. In addition, users can double-click on rows in Spread to show a more convenient editor for changing values in the rows, and those changes can be updated back to the database using the Update button on the Row Edit Template itself. This tutorial showed how to add a Row Edit Template to an ADO.NET Data Bound instance of Spread for ASP.NET. The finished Row Edit Template
MESCIUS inc.