Ggtcf

My webgrid has 3 columns and all 3 is having dropdownlist. I am cloning the last row and appending it to the webgrid. It appends, and the data is also bound to the newly appended row. But shows view error "A data source must be bound before this operation can be performed." I am sharing the code.
Any help appreciated...

Model

public class HeaderInfo

 public List<Header> HeaderModel get; set; 

public class Header

 public SelectList Xaxis get; set; 
 public SelectList Yaxis get; set; 
 public SelectList Zaxis get; set; 

public class XStatus

 public int ID get; set; 
 public string StatusName get; set; 

public class YStatus

 public int ID get; set; 
 public string StatusName get; set; 

public class ZStatus

 public int ID get; set; 
 public string StatusName get; set; 

Controller

public class GraphController : Controller
{
 // GET: Graph
 public ActionResult Index()
 
 // HeaderInfo h = new HeaderInfo();
 PlotModel m = new PlotModel();
 m.h.HeaderModel = HeaderDetails();
 return View(m);
 
 public List<Header> HeaderDetails()
 
 List<Header> obj = new List<Header>();
 obj.Add(new Header Xaxis = GetXfield(), Yaxis = GetYfield(), Zaxis = GetZfield() );
 return obj;
 
 public SelectList GetXfield()
 
 List<XStatus> status = new List<XStatus>();
 status.Add(new XStatus ID = 1, StatusName = "aaa" );
 status.Add(new XStatus ID = 2, StatusName = "aaa" );
 status.Add(new XStatus ID = 3, StatusName = "aaa" );
 status.Add(new XStatus ID = 4, StatusName = "bbb" );
 status.Add(new XStatus ID = 5, StatusName = "aaa" );
 status.Add(new XStatus ID = 6, StatusName = "nnn" );
 status.Add(new XStatus ID = 7, StatusName = "mmm" );
 SelectList obj = new SelectList(status, "ID", "StatusName");
 return obj;
 
 public SelectList GetYfield()
 
 List<XStatus> status = new List<XStatus>();
 status.Add(new XStatus ID = 1, StatusName = "aaa" );
 status.Add(new XStatus ID = 2, StatusName = "aaa" );
 status.Add(new XStatus ID = 3, StatusName = "aaa" );
 status.Add(new XStatus ID = 4, StatusName = "bbb" );
 status.Add(new XStatus ID = 5, StatusName = "aaa" );
 status.Add(new XStatus ID = 6, StatusName = "nnn" );
 status.Add(new XStatus ID = 7, StatusName = "mmm" );
 SelectList obj = new SelectList(status, "ID", "StatusName");
 return obj;
 
 public SelectList GetZfield()
 
 List<XStatus> status = new List<XStatus>();
 status.Add(new XStatus ID = 1, StatusName = "aaa" );
 status.Add(new XStatus ID = 2, StatusName = "aaa" );
 status.Add(new XStatus ID = 3, StatusName = "aaa" );
 status.Add(new XStatus ID = 4, StatusName = "bbb" );
 status.Add(new XStatus ID = 5, StatusName = "aaa" );
 status.Add(new XStatus ID = 6, StatusName = "nnn" );
 status.Add(new XStatus ID = 7, StatusName = "mmm" );
 SelectList obj = new SelectList(status, "ID", "StatusName");
 return obj;
 

View

<script type="text/javascript">
 $('#clickToAdd').click(function () 
 
 var newrow = $("#grid1 tbody tr:last").clone(); 
 $("#grid1 tbody").append(newrow);
 )
</script>

@
 ViewBag.Title = "title";
 Layout = "~/Views/Shared/_Layout.cshtml";
 WebGrid g_style = new WebGrid(source:Model.h.HeaderModel);

<div class="row" id="grid1"> 
 
 @g_style.GetHtml(
 tableStyle:"gridTable",
 headerStyle: "gridHead",
 footerStyle: "gridFooter",
 rowStyle: "gridRow", alternatingRowStyle: "gridAltRow",

 columns: g_style.Columns(
 g_style.Column(header:"Xaxis", format:@item=>Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.h.HeaderModel[0].Xaxis)),
 g_style.Column(header: "Yaxis", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.h.HeaderModel[0].Yaxis)),
 g_style.Column(header: "Zaxis", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.h.HeaderModel[0].Zaxis))
 ))
 
 </div><input type="submit" value="Add new Trace" id="clickToAdd" />