Grdi View Edit Delete using ViewState
This article is used to, how to add the new row to the grid view and delete the particular row in grid view. the data is not stored in database and the data is stored temporarily with the help of view state.
css code is used for the grid view template fields. that fields displays background color with border radius and shadow effects with the help of this css code
.text
{
border: 1px solid #FF93EE;
background :#F9EFF8;
-webkit-box-shadow: 0px 0px 10px #F7BAF1;
-moz-box-shadow: 0px 0px 10px #F7BAF1;
box-shadow: 0px 0px 10px #F7BAF1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: 3px;
}
gridview control with template fields, and the two commands are used addnew and delete. the delete button is command field and the add new button is footer template field. then you can add the code ShowFooter="true" otherwise the footer is not displayed in the gridview.
<asp:GridView ID="grid_output" runat="server" CellPadding="4" ForeColor="#441E41"
AutoGenerateColumns="False" ShowFooter="true"
onrowdeleting="grid_output_RowDeleting">
<AlternatingRowStyle BackColor="#F3D9F0" />
<Columns>
<asp:TemplateField HeaderText="Output Type">
<ItemTemplate>
<asp:DropDownList ID="ddl_output_type" runat="server" CssClass="text" Height="20px"
Width="180px">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Total Production Room Output</asp:ListItem>
<asp:ListItem>Total Dust Room Output 1</asp:ListItem>
<asp:ListItem>Total Dust Room Output 2</asp:ListItem>
<asp:ListItem>Multicyclone Dust</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="IBC/Drum No" ItemStyle-Width="50px">
<ItemTemplate>
<asp:DropDownList ID="ddl_ibc_no" CssClass="text" runat="server" DataSourceID="SqlDataSource4" Width="50px"
DataTextField="material" DataValueField="material"><asp:ListItem>Select</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:LogConnectionString %>"
SelectCommand="select material from materials where type='IBC' or type='Drum'">
</asp:SqlDataSource>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="From" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox ID="txt_break_from" CssClass="text" runat="server" Width="50px"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="100px"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="To" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox ID="txt_break_to" CssClass="text" runat="server" Width="50px" AutoPostBack="true"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="100px"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Weight (Kg)">
<ItemTemplate>
<asp:TextBox ID="txt_ibc_weight" CssClass="text" runat="server" Width="80px"
AutoPostBack="true" ontextchanged="txt_ibc_weight_TextChanged"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="bt_output_submit" CssClass="btn" runat="server" Text="Add New"
Width="90px" onclick="bt_output_submit_Click"
></asp:Button>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" ItemStyle-Width="50px">
<ItemStyle Width="50px"></ItemStyle>
</asp:CommandField>
</Columns>
<EditRowStyle BackColor="#F7C5F2" />
<FooterStyle BackColor="#F7C5F2" Font-Bold="True" ForeColor="#441E41" />
<HeaderStyle BackColor="#F696EC" Font-Bold="True" ForeColor="#441E41" />
<PagerStyle BackColor="#F696EC" ForeColor="#441E41" HorizontalAlign="Center" />
<RowStyle BackColor="#F7C5F2" Width="100px" Height="35px" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#441E41" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#F7C5F2" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#F7C5F2" />
</asp:GridView>
server side code is used to addnew row to gridview and remove the row from the gridview.
//add the empty row when the gridview is loaded.
private void grid_Output_load()
{
try
{
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("Type", typeof(string)));
dt.Columns.Add(new DataColumn("ibc", typeof(string)));
dt.Columns.Add(new DataColumn("from", typeof(string)));
dt.Columns.Add(new DataColumn("to", typeof(string)));
dt.Columns.Add(new DataColumn("weight", typeof(string)));
dr = dt.NewRow(); dr["Type"] = string.Empty; dr["ibc"] = string.Empty; dr["from"] = string.Empty; dr["to"] = string.Empty; dr["weight"] = string.Empty; dt.Rows.Add(dr);
ViewState["Output"] = dt;
grid_output.DataSource = dt;
grid_output.DataBind();
}
catch (Exception ex)
{ ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "Message", "alert('" + ex.ToString() + "');", true); }
}
// this code is delete the gridview row which row the user removed.
protected void grid_output_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
SetRowData_Output();
if (ViewState["Output"] != null)
{
DataTable dt = (DataTable)ViewState["Output"];
DataRow drCurrentRow = null;
int rowIndex = Convert.ToInt32(e.RowIndex);
if (dt.Rows.Count > 1)
{
dt.Rows.Remove(dt.Rows[rowIndex]);
drCurrentRow = dt.NewRow();
ViewState["Output"] = dt;
grid_output.DataSource = dt;
grid_output.DataBind();
SetPreviousData_Output();
}
}
}
// the addnew button ( footer template field) event
protected void bt_output_submit_Click(object sender, EventArgs e)
{
try
{
AddNewRow_Output();
}
catch (Exception ex) { ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "Message", "alert('" + ex.ToString() + "');", true); }
}
// this method is used to add the new row to the gridview.
private void AddNewRow_Output()
{
int rowIndex = 0;
if (ViewState["Output"] != null)
{
DataTable dtCurrentTable = (DataTable)ViewState["Output"];
DataRow drCurrentRow = null;
if (dtCurrentTable.Rows.Count > 0)
{
for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
{
DropDownList type = (DropDownList)grid_output.Rows[rowIndex].Cells[0].FindControl("ddl_output_type");
DropDownList ibc = (DropDownList)grid_output.Rows[rowIndex].Cells[1].FindControl("ddl_ibc_no");
TextBox from = (TextBox)grid_output.Rows[rowIndex].Cells[2].FindControl("txt_break_from");
TextBox to = (TextBox)grid_output.Rows[rowIndex].Cells[3].FindControl("txt_break_to");
TextBox weight = (TextBox)grid_output.Rows[rowIndex].Cells[4].FindControl("txt_ibc_weight");
drCurrentRow = dtCurrentTable.NewRow();
dtCurrentTable.Rows[i - 1][0] = type.Text.Trim();
dtCurrentTable.Rows[i - 1][1] = ibc.Text.Trim();
dtCurrentTable.Rows[i - 1][2] = from.Text.Trim();
dtCurrentTable.Rows[i - 1][3] = to.Text.Trim();
dtCurrentTable.Rows[i - 1][4] = weight.Text.Trim();
rowIndex++;
}
dtCurrentTable.Rows.Add(drCurrentRow);
ViewState["Output"] = dtCurrentTable;
grid_output.DataSource = dtCurrentTable;
grid_output.DataBind();
DropDownList output_type = (DropDownList)grid_output.Rows[rowIndex].Cells[0].FindControl("ddl_output_type");
output_type.Focus();
}
}
else
{
Response.Write("Output Details is null");
}
SetPreviousData_Output();
}
//this code is used to when the user click the delete button
//the data append with previous one in the form of row-wise.
private void SetPreviousData_Output()
{
int rowIndex = 0;
if (ViewState["Output"] != null)
{
DataTable dt = (DataTable)ViewState["Output"];
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
DropDownList type = (DropDownList)grid_output.Rows[rowIndex].Cells[0].FindControl("ddl_output_type");
DropDownList ibc = (DropDownList)grid_output.Rows[rowIndex].Cells[1].FindControl("ddl_ibc_no");
TextBox from = (TextBox)grid_output.Rows[rowIndex].Cells[2].FindControl("txt_break_from");
TextBox to = (TextBox)grid_output.Rows[rowIndex].Cells[3].FindControl("txt_break_to");
TextBox weight = (TextBox)grid_output.Rows[rowIndex].Cells[4].FindControl("txt_ibc_weight");
type.Text = dt.Rows[i][0].ToString();
ibc.Text = dt.Rows[i][1].ToString();
from.Text = dt.Rows[i][2].ToString();
to.Text = dt.Rows[i][3].ToString();
weight.Text = dt.Rows[i][4].ToString();
rowIndex++;
}
}
}
}
//this code is used to when the user click the addnew button
//the data append with previous one in the form of row-wise into viewstate
private void SetRowData_Output()
{
int rowIndex = 0;
if (ViewState["Output"] != null)
{
DataTable dtCurrentTable = (DataTable)ViewState["Output"];
DataRow drCurrentRow = null;
if (dtCurrentTable.Rows.Count > 0)
{
for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
{
DropDownList type = (DropDownList)grid_output.Rows[rowIndex].Cells[0].FindControl("ddl_output_type");
DropDownList ibc = (DropDownList)grid_output.Rows[rowIndex].Cells[1].FindControl("ddl_ibc_no");
TextBox from = (TextBox)grid_output.Rows[rowIndex].Cells[2].FindControl("txt_break_from");
TextBox to = (TextBox)grid_output.Rows[rowIndex].Cells[3].FindControl("txt_break_to");
TextBox weight = (TextBox)grid_output.Rows[rowIndex].Cells[4].FindControl("txt_ibc_weight");
drCurrentRow = dtCurrentTable.NewRow();
dtCurrentTable.Rows[i - 1][0] = type.Text.Trim();
dtCurrentTable.Rows[i - 1][1] = ibc.Text.Trim();
dtCurrentTable.Rows[i - 1][2] = from.Text.Trim();
dtCurrentTable.Rows[i - 1][3] = to.Text.Trim();
dtCurrentTable.Rows[i - 1][4] = weight.Text.Trim();
rowIndex++;
}
ViewState["Output"] = dtCurrentTable;
}
}
else
{
Response.Write("Output Details is null");
}
}
//form load even.here the grid_output_load() method is called.when the method is called the gridview have first row with empty fields.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
grid_Output_load();
}
}