How to bind Grid in Ajax call method using ArryList object in asp.net

Question

Hi All , 

       How to bind the gridview through ajax call Method using Arraylist Object result. i have implemented it . i  am  not sure where did mistake. can anyone check correct my mistake.I never bind grid like this . 

Sample code : 

Ajax call : 

<script type="text/javascript">             
  $(document).ready(function ()
  {
          var CategoryName = 'FERRERO';
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "InteractiveDashboard.aspx/WebGrid1",
              data: "{CategoryName:'" + CategoryName + "'}",
          
              dataType: "json",
              success: function (data)
              {
                  for (var i = 0; i < data.d.length; i++)
                  {
                 $("#gvDetails").append("<tr><td>" + dataval[i].Branch + "</td> <td>" + dataval[i].Barcode + "</td><td>" + dataval[i].Name + "</td><td>" + dataval[i].InventoryDesc + "</td><td>" + dataval[i].CategoryName + "</td><td>" + dataval[i].Amount + "</td><td>" + dataval[i].Qty + "</td></tr>");
                      //$("#gvDetails").append("<tr><td>" + data.d[i].Branch +
                      //    "</td><td>" + data.d[i].Barcode + "</td></tr>");  

                  }

              },
              error: function (result) {
                  alert("Error");
              }
          });
   });
</script>

dummy grid : 

private void BindColumnToGridview()
 {
     DataTable dt = new DataTable();
     dt.Columns.Add("Branch");
     dt.Columns.Add("Barcode");
     dt.Columns.Add("Name");
     dt.Columns.Add("InventoryDesc");
     dt.Columns.Add("CategoryName");
     dt.Columns.Add("Amount");
     dt.Columns.Add("Qty");
     dt.Rows.Add();
     gvDetails.DataSource = dt;
     gvDetails.DataBind();
     gvDetails.Rows[0].Visible = false;
 }

Note : Arraylist having data , when append time its not loading properly.