Failed to load viewstate - dynamic controls in ASP.NET using nested GridView - asp.net

Question

In my project I am working on showing Task Group and Task (i.e. Parent-child) in one screen with the ability to Add/Edit/Delete the parent (Task Group) record and also to Add/Edit/Delete associated Task. For this I am using nested Grid View (parent-child).
I am implementing the sample application mentioned in the below link to my ASP.NET web based project.
http://www.codeproject.com/Articles/20047/Editable-Nested-GridView-All-in-One
my .ASPX looks as mentioned below:
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Unicorn.Master" CodeBehind="TaskAndTaskGroup.aspx.cs" Inherits="Vipassi.Web.TaskGroup.TaskAndTaskGroup"%>
<asp:Content ID="Content1" ContentPlaceHolderID="phContent" runat="server">
<script language="javascript" type="text/javascript">
function expandcollapse(obj, row) {
var div = document.getElementById(obj);
var img = document.getElementById('img' + obj);
if (div.style.display == "none") {
div.style.display = "block";
if (row == 'alt') {
img.src = "../../Resources/images/minus.gif";
}
else {
img.src = "../../Resources/images/minus.gif";
}
img.alt = "Close to view other TaskGroups";
}
else {
div.style.display = "none";
if (row == 'alt') {
img.src = "../../Resources/images/plus.gif";
}
else {
img.src = "../../Resources/images/plus.gif";
}
img.alt = "Expand to show Tasks";
}
}
</script>
<div>
<asp:GridView ID="GridView1" AllowPaging="True" BackColor="#f1f1f1"
AutoGenerateColumns="false" DataSourceID="ObjectDataSource1" DataKeyNames="task_group_id"
ShowFooter="true" Font-Size="Small"
Font-Names="Verdana" runat="server" GridLines="None" OnRowDataBound="GridView1_RowDataBound"
OnRowCommand="GridView1_RowCommand" OnRowUpdating="GridView1_RowUpdating" BorderStyle=Outset
OnRowDeleting="GridView1_RowDeleting" OnRowDeleted="GridView1_RowDeleted"
OnRowUpdated="GridView1_RowUpdated" AllowSorting="true">
<RowStyle BackColor="Gainsboro" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="#0083C1" ForeColor="White" />
<FooterStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:expandcollapse('div<%# Eval("task_group_id") %>', 'one');">
<img id="imgdiv<%# Eval("task_group_id") %>" alt="Click to show/hide Tasks for TaskGroup <%# Eval("task_group_id") %>" width="9px" border="0" src="../../Resources/images/plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="TaskGroup ID" SortExpression="task_group_id">
<ItemTemplate>
<asp:Label ID="lblTaskGroupID" Text='<%# Eval("task_group_id") %>' runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblTaskGroupID" Text='<%# Eval("task_group_id") %>' runat="server"></asp:Label>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTaskGroupID" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Task Group" SortExpression="task_group">
<ItemTemplate><%# Eval("task_group") %></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTaskGroup" Text='<%# Eval("task_group") %>' runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTaskGroup" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fiscal Year" SortExpression="Fiscal_Year">
<ItemTemplate><%# Eval("Fiscal_Year") %></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFiscalYear" Text='<%# Eval("Fiscal_Year") %>' runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtFiscalYear" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Is Active" SortExpression="Active_Flag">
<ItemTemplate><%# Eval("Active_Flag")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtActiveFlag" Text='<%# Eval("Active_Flag") %>' runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtActiveFlag" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="Edit" ShowEditButton="True" />
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="linkDeleteTaskGroup" CommandName="Delete" runat="server">Delete</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="linkAddTaskGroup" CommandName="AddTaskGroup" runat="server">Add</asp:LinkButton>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="div<%# Eval("task_group_id") %>" style="display: none; position: relative; left: 15px; overflow: auto; width: 97%">
<asp:GridView ID="GridView2" AllowPaging="True" AllowSorting="true" BackColor="White" Width="100%" Font-Size="X-Small"
AutoGenerateColumns="false" Font-Names="Verdana" runat="server" DataKeyNames="task_group_id" ShowFooter="true"
OnPageIndexChanging="GridView2_PageIndexChanging" OnRowUpdating="GridView2_RowUpdating"
OnRowCommand="GridView2_RowCommand" OnRowEditing="GridView2_RowEditing" GridLines="None"
OnRowUpdated="GridView2_RowUpdated" OnRowCancelingEdit="GridView2_CancelingEdit" OnRowDataBound="GridView2_RowDataBound"
OnRowDeleting="GridView2_RowDeleting" OnRowDeleted="GridView2_RowDeleted" OnSorting="GridView2_Sorting"
BorderStyle="Double" BorderColor="#0083C1">
<RowStyle BackColor="Gainsboro" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="#0083C1" ForeColor="White" />
<FooterStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Task ID" SortExpression="task_id">
<ItemTemplate>
<asp:Label ID="lblTaskID" Text='<%# Eval("task_id") %>' runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblTaskID" Text='<%# Eval("task_id") %>' runat="server"></asp:Label>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Task" SortExpression="task_name">
<ItemTemplate><%# Eval("task_name")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTask" Text='<%# Eval("task_name")%>' runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTask" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fiscal Year" SortExpression="fiscal_year">
<ItemTemplate><%# Eval("fiscal_year")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTaskFiscalYear" Text='<%# Eval("fiscal_year")%>' runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTaskFiscalYear" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Is Active" SortExpression="Active_Flag">
<ItemTemplate><%# Eval("Active_Flag")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTaskActiveFlag" Text='<%# Eval("Active_Flag")%>' runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTaskActiveFlag" Text='' runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="Edit" ShowEditButton="True" />
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="linkDeleteTaskGroup" CommandName="Delete" runat="server">Delete</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="linkAddTask" CommandName="AddTask" runat="server">Add</asp:LinkButton>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:ObjectDataSource SortParameterName="sortExpression" EnablePaging="true" ID="ObjectDataSource1"
MaximumRowsParameterName="maxRecords" TypeName="Vipassi.BLL.Classes.TaskGroup.TaskGroupBLL"
SelectMethod="ListforTaskGroup" SelectCountMethod="ListCountforTaskGroup" StartRowIndexParameterName="startIndex"
runat="server">
<SelectParameters>
<asp:SessionParameter SessionField="orgId" Name="orgId" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</div>

Answer 1

Option 1:
You can disable the VIEWSTATE of ASPX page /User Control :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="~/TaskAndTaskGroup.aspx.cs" Inherits="Vipassi.Web.TaskGroup.TaskAndTaskGroup" EnableViewState="false"%>
Option 2:
You can also change your source code to make sure the controls added during a post-back must match the type and position of the controls added during the initial request.
Hope this will help you.