Hi simflex,
I have created sample code which full-fill your requirement. So please refer the below code and you need to modify as per your requirement.
HTML
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptManager" runat="server">
</asp:ScriptManager>
<asp:MultiView ID="myMultiView" runat="server">
<asp:View ID="vwPersonalInfo" runat="server">
<table border="1" style="width: 100%; text-align: center; margin-left: -30px;">
<tr>
<td style="width: 100%; vertical-align: text-top;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="Gridview1" Style="table-layout: fixed;" runat="server" ShowFooter="true"
AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound" OnRowDeleting="Gridview1_RowDeleting">
<Columns>
<asp:BoundField DataField="RowNumber" Visible="false" HeaderText="Row Number" />
<asp:TemplateField HeaderText="Aircraft Registration #:">
<HeaderStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:TextBox ID="txtboatregNum" runat="server" Style="width: 83px;" class="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="TaxPayer Returned Value <br />As of Jan This Year">
<ItemStyle HorizontalAlign="Left"></ItemStyle>
<ItemTemplate>
<asp:TextBox ID="txttaxpayerret" runat="server" Style="width: 88px;" class="form-control txttaxpayerret"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="For Tax Office use Only <br /> (Tax Assessirs Value)">
<ItemStyle HorizontalAlign="Left"></ItemStyle>
<ItemTemplate>
<asp:TextBox ID="txtfortaxofficeonly" runat="server" Style="width: 80px; background-color: #ECECEC;"
ReadOnly="true" class="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<HeaderStyle Width="70" />
<ItemStyle Width="70" />
<ItemTemplate>
<asp:Button ID="BtnAdd" runat="server" Text="Add" OnClick="BtnAdd_Click" CssClass="grvDelButton btnclass" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True">
<ControlStyle CssClass="grvDelButton" />
</asp:CommandField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
<table border="1" style="width: 100%; text-align: center">
<tr>
<td style="width: 24.2%;">
TOTAL >
</td>
<td style="width: 23%;">
<asp:Label ID="lblTotal" Text="0" runat="server"></asp:Label>
<asp:HiddenField ID="hfvalue" runat="server" />
</td>
<td style="width: 62.8%;">
</td>
</tr>
</table>
</asp:View>
<asp:View ID="vwPreview" runat="server">
<table border="1" style="width: 100%; text-align: center;">
<tr>
<td style="width: 100%; vertical-align: text-top;">
<table cellspacing="0" rules="all" border="1" width="100%" style="border-collapse: collapse;
table-layout: fixed;">
<tr>
<th align="left" scope="col">
Aircraft Registration #:
</th>
<th scope="col">
TaxPayer Returned Value
<br />
As of Jan This Year
</th>
<th scope="col">
For Tax Office use Only
<br />
(Tax Assessirs Value)
</th>
<th scope="col" style="width: 70px;">
</th>
<th scope="col">
</th>
</tr>
<%foreach (System.Data.DataRow row in dtAirInfoTable.Rows)
{%>
<tr>
<td>
<span class="form-control" style="width: 493px; background-color: cornsilk; color: #0093B2;
font-weight: bold;">
<%=row.ItemArray[1].ToString()%>
</span>
</td>
<td align="left">
<span class="form-control txttaxpayerret" style="width: 326px; background-color: cornsilk;
color: #0093B2; font-weight: bold;">
<%=row.ItemArray[2].ToString()%>
</span>
</td>
<td align="left">
<span class="form-control" style="width: 305px; color: #0093B2; font-weight: bold;
background-color: #ECECEC;">
<%=row.ItemArray[3].ToString()%>
</span>
</td>
</tr>
<% } %>
</table>
</td>
</tr>
</table>
<table border="1" style="width: 100%; text-align: center">
<tr>
<td width="24.2%">
TOTAL >
</td>
<td style="width: 23%">
<asp:Label ID="lblTotalPrev" runat="server"></asp:Label>
</td>
<td style="width: 62.8%">
</td>
</tr>
</table>
<br />
</asp:View>
</asp:MultiView>
</div>
<br />
<br />
<div>
<asp:Button ID="btnBack" Text="Back" class="btnclass" OnClick="onBack" runat="server" />
<asp:Button ID="btnNext" Text="Next" class="btnclass" OnClick="onNext" runat="server" />
<asp:Button ID="btnSave" Text="Save" class="btnclass" runat="server" />
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function pageLoad() {
totalcalculate();
$('[id*=txttaxpayerret]').keyup(function () {
totalcalculate();
});
}
function totalcalculate() {
var total = 0;
for (var i = 0; i < $('.txttaxpayerret').length; i++) {
var temp = $('.txttaxpayerret')[i].value;
temp != "" ? temp : temp = 0;
total = parseFloat(temp) + parseFloat(total);
$('[id*=lblTotal]').html(total);
$('[id*=hfvalue]').val(total);
}
}
</script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.btnclass
{
color: #FFF;
background-color: #204D74;
border-color: #122B40;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
</style>
</div>
</form>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.SetInitialRow();
}
}
private void SetInitialRow()
{
myMultiView.ActiveViewIndex = 0;
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("Column1", typeof(string)));
dt.Columns.Add(new DataColumn("Column2", typeof(string)));
dt.Columns.Add(new DataColumn("Column3", typeof(string)));
dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Column1"] = string.Empty;
dr["Column2"] = string.Empty;
dr["Column3"] = string.Empty;
dt.Rows.Add(dr);
ViewState["CurrentTable"] = dt;
Gridview1.DataSource = dt;
Gridview1.DataBind();
}
private void AddNewRowToGrid()
{
int rowIndex = 0;
if (ViewState["CurrentTable"] != null)
{
DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
DataRow drCurrentRow = null;
if (dtCurrentTable.Rows.Count > 0)
{
for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
{
TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("txtboatregNum");
TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("txttaxpayerret");
TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("txtfortaxofficeonly");
drCurrentRow = dtCurrentTable.NewRow();
drCurrentRow["RowNumber"] = i + 1;
dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;
rowIndex++;
}
dtCurrentTable.Rows.Add(drCurrentRow);
ViewState["CurrentTable"] = dtCurrentTable;
Gridview1.DataSource = dtCurrentTable;
Gridview1.DataBind();
}
}
else
{
Response.Write("ViewState is null");
}
SetPreviousData();
}
private void SetPreviousData()
{
int rowIndex = 0;
if (ViewState["CurrentTable"] != null)
{
DataTable dt = (DataTable)ViewState["CurrentTable"];
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("txtboatregNum");
TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("txttaxpayerret");
TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("txtfortaxofficeonly");
box1.Text = dt.Rows[i]["Column1"].ToString();
box2.Text = dt.Rows[i]["Column2"].ToString();
box3.Text = dt.Rows[i]["Column3"].ToString();
rowIndex++;
}
}
}
}
protected void BtnAdd_Click(object sender, EventArgs e)
{
AddNewRowToGrid();
}
protected override void OnPreRender(EventArgs e)
{
if (myMultiView.ActiveViewIndex == myMultiView.Views.Count - 1)
{
FillSummary();
}
btnBack.Visible = myMultiView.ActiveViewIndex > 0;
btnNext.Visible = myMultiView.ActiveViewIndex < myMultiView.Views.Count - 1;
btnSave.Visible = myMultiView.ActiveViewIndex == myMultiView.Views.Count - 1;
base.OnPreRender(e);
}
public DataTable dtAirInfoTable;
private void FillSummary()
{
// lblcitylist.Text = citylist.Text;
lblTotalPrev.Text = hfvalue.Value;
if (ViewState["TempData"] != null)
{
dtAirInfoTable = (DataTable)ViewState["TempData"];
}
}
protected void onNext(object sender, EventArgs e)
{
int rowIndex = 0;
if (ViewState["CurrentTable"] != null)
{
DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
if (dtCurrentTable.Rows.Count > 0)
{
for (int i = 1; i <= Gridview1.Rows.Count; i++)
{
TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("txtboatregNum");
TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("txttaxpayerret");
TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("txtfortaxofficeonly");
dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;
rowIndex++;
}
ViewState["TempData"] = dtCurrentTable;
}
}
myMultiView.ActiveViewIndex = 1;
}
protected void onBack(object sender, EventArgs e)
{
lblTotal.Text = lblTotalPrev.Text;
myMultiView.ActiveViewIndex = 0;
}
protected void Gridview1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int rowIndex = 0;
int rowID = e.RowIndex;
lblTotal.Text = "0";
if (ViewState["CurrentTable"] != null)
{
DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
if (dtCurrentTable.Rows.Count > 0)
{
for (int i = 1; i <= Gridview1.Rows.Count; i++)
{
TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("txtboatregNum");
TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("txttaxpayerret");
TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("txtfortaxofficeonly");
dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;
rowIndex++;
}
if (e.RowIndex < dtCurrentTable.Rows.Count)
{
dtCurrentTable.Rows.Remove(dtCurrentTable.Rows[rowID]);
}
}
ViewState["CurrentTable"] = dtCurrentTable;
Gridview1.DataSource = dtCurrentTable;
Gridview1.DataBind();
}
SetPreviousData();
}
Vb.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.SetInitialRow()
End If
End Sub
Private Sub SetInitialRow()
myMultiView.ActiveViewIndex = 0
Dim dt As New DataTable()
Dim dr As DataRow = Nothing
dt.Columns.Add(New DataColumn("RowNumber", GetType(String)))
dt.Columns.Add(New DataColumn("Column1", GetType(String)))
dt.Columns.Add(New DataColumn("Column2", GetType(String)))
dt.Columns.Add(New DataColumn("Column3", GetType(String)))
dr = dt.NewRow()
dr("RowNumber") = 1
dr("Column1") = String.Empty
dr("Column2") = String.Empty
dr("Column3") = String.Empty
dt.Rows.Add(dr)
ViewState("CurrentTable") = dt
Gridview1.DataSource = dt
Gridview1.DataBind()
End Sub
Private Sub AddNewRowToGrid()
Dim rowIndex As Integer = 0
If ViewState("CurrentTable") IsNot Nothing Then
Dim dtCurrentTable As DataTable = DirectCast(ViewState("CurrentTable"), DataTable)
Dim drCurrentRow As DataRow = Nothing
If dtCurrentTable.Rows.Count > 0 Then
For i As Integer = 1 To dtCurrentTable.Rows.Count
Dim box1 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(1).FindControl("txtboatregNum"), TextBox)
Dim box2 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(2).FindControl("txttaxpayerret"), TextBox)
Dim box3 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(3).FindControl("txtfortaxofficeonly"), TextBox)
drCurrentRow = dtCurrentTable.NewRow()
drCurrentRow("RowNumber") = i + 1
dtCurrentTable.Rows(i - 1)("Column1") = box1.Text
dtCurrentTable.Rows(i - 1)("Column2") = box2.Text
dtCurrentTable.Rows(i - 1)("Column3") = box3.Text
rowIndex += 1
Next
dtCurrentTable.Rows.Add(drCurrentRow)
ViewState("CurrentTable") = dtCurrentTable
Gridview1.DataSource = dtCurrentTable
Gridview1.DataBind()
End If
Else
Response.Write("ViewState is null")
End If
SetPreviousData()
End Sub
Private Sub SetPreviousData()
Dim rowIndex As Integer = 0
If ViewState("CurrentTable") IsNot Nothing Then
Dim dt As DataTable = DirectCast(ViewState("CurrentTable"), DataTable)
If dt.Rows.Count > 0 Then
For i As Integer = 0 To dt.Rows.Count - 1
Dim box1 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(1).FindControl("txtboatregNum"), TextBox)
Dim box2 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(2).FindControl("txttaxpayerret"), TextBox)
Dim box3 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(3).FindControl("txtfortaxofficeonly"), TextBox)
box1.Text = dt.Rows(i)("Column1").ToString()
box2.Text = dt.Rows(i)("Column2").ToString()
box3.Text = dt.Rows(i)("Column3").ToString()
rowIndex += 1
Next
End If
End If
End Sub
Protected Sub BtnAdd_Click(sender As Object, e As EventArgs)
AddNewRowToGrid()
End Sub
Protected Overrides Sub OnPreRender(e As EventArgs)
If myMultiView.ActiveViewIndex = myMultiView.Views.Count - 1 Then
FillSummary()
End If
btnBack.Visible = myMultiView.ActiveViewIndex > 0
btnNext.Visible = myMultiView.ActiveViewIndex < myMultiView.Views.Count - 1
btnSave.Visible = myMultiView.ActiveViewIndex = myMultiView.Views.Count - 1
MyBase.OnPreRender(e)
End Sub
Public dtAirInfoTable As DataTable
Private Sub FillSummary()
' lblcitylist.Text = citylist.Text;
lblTotalPrev.Text = hfvalue.Value
If ViewState("TempData") IsNot Nothing Then
dtAirInfoTable = DirectCast(ViewState("TempData"), DataTable)
End If
End Sub
Protected Sub onNext(sender As Object, e As EventArgs)
Dim rowIndex As Integer = 0
If ViewState("CurrentTable") IsNot Nothing Then
Dim dtCurrentTable As DataTable = DirectCast(ViewState("CurrentTable"), DataTable)
If dtCurrentTable.Rows.Count > 0 Then
For i As Integer = 1 To Gridview1.Rows.Count
Dim box1 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(1).FindControl("txtboatregNum"), TextBox)
Dim box2 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(2).FindControl("txttaxpayerret"), TextBox)
Dim box3 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(3).FindControl("txtfortaxofficeonly"), TextBox)
dtCurrentTable.Rows(i - 1)("Column1") = box1.Text
dtCurrentTable.Rows(i - 1)("Column2") = box2.Text
dtCurrentTable.Rows(i - 1)("Column3") = box3.Text
rowIndex += 1
Next
ViewState("TempData") = dtCurrentTable
End If
End If
myMultiView.ActiveViewIndex = 1
End Sub
Protected Sub onBack(sender As Object, e As EventArgs)
lblTotal.Text = lblTotalPrev.Text
myMultiView.ActiveViewIndex = 0
End Sub
Protected Sub Gridview1_RowDeleting(sender As Object, e As GridViewDeleteEventArgs)
Dim rowIndex As Integer = 0
Dim rowID As Integer = e.RowIndex
lblTotal.Text = "0"
If ViewState("CurrentTable") IsNot Nothing Then
Dim dtCurrentTable As DataTable = DirectCast(ViewState("CurrentTable"), DataTable)
If dtCurrentTable.Rows.Count > 0 Then
For i As Integer = 1 To Gridview1.Rows.Count
Dim box1 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(1).FindControl("txtboatregNum"), TextBox)
Dim box2 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(2).FindControl("txttaxpayerret"), TextBox)
Dim box3 As TextBox = DirectCast(Gridview1.Rows(rowIndex).Cells(3).FindControl("txtfortaxofficeonly"), TextBox)
dtCurrentTable.Rows(i - 1)("Column1") = box1.Text
dtCurrentTable.Rows(i - 1)("Column2") = box2.Text
dtCurrentTable.Rows(i - 1)("Column3") = box3.Text
rowIndex += 1
Next
If e.RowIndex < dtCurrentTable.Rows.Count Then
dtCurrentTable.Rows.Remove(dtCurrentTable.Rows(rowID))
End If
End If
ViewState("CurrentTable") = dtCurrentTable
Gridview1.DataSource = dtCurrentTable
Gridview1.DataBind()
End If
SetPreviousData()
End Sub
Screenshot
