Databind to a gridview on client side

Question

I am trying to bind data to gridview at clientside. below is the js that i have tried. its working but on second click of button, the values of all rows get changed.

function databind(response) {
        var xmlDoc = $.parseXML(response);
        var xml = $(xmlDoc);
        var Positions = xml.find("Table");
        var row = $("[id*=gridview] tr:last-child");
        $("[id*=gridview] tr").not($("[id*=gridview] tr:first-child")).remove();
        $.each(Positions, function () {
            var Position = $(this);
              $("td", row).eq(0).html('<a id="lkedit" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Edit</a>');
              $("td", row).eq(1).html('<a id="lkdelete" onclick="SingleDel(this)" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Delete</a>');

              $("td", row).eq(2).html('<input type="checkbox" onclick="javascript:Selectchildcheckboxes();" id="chkRow"/>');
              $("td", row).eq(3).html('<span id="lblpfid">'+Position.find("pfid").text()+'<span/>');

              $("td", row).eq(4).html('<span id="lblpfname">'+Position.find("pfname").text()+'<span/>');

              $("td", row).eq(5).html('<span id="lblposid">'+Position.find("positionid").text()+'<span/>');

              $("td", row).eq(6).html('<span id="lbldisposid">'+Position.find("disposid").text()+'<span/>');//DataItem.disposid
              $("td", row).eq(7).html('<span id="lbltype">'+Position.find("type").text()+'<span/>');      //type

              $("td", row).eq(8).html('<span id="lblcur">'+Position.find("ccy").text()+'<span/>');     //ccy
           $("[id*=gridview]").append(row);
           row = $("[id*=gridview] tr:last-child").clone(true);
        });
}

on page load an empty row will be added to the grid.

my page_load method is,

 Sub Page_load()
      BindDummyRow
 End Sub
 Private Sub BindDummyRow()
    Dim dummy As New DataTable()

    dummy.Columns.Add("pfid")
    dummy.Columns.Add("pfname")
    dummy.Columns.Add("positionid")
    dummy.Columns.Add("disposid")
    dummy.Columns.Add("type")
    dummy.Columns.Add("ccy")
    dummy.Rows.Add()
    gridview.DataSource = dummy
    gridview.DataBind()
End Sub

i dont know where the mistake occurs.

Answer 1

Make the changes as follows. you have said an extra row is added its because cloning the last child.so change last-child to last.command the last line.

function databind(response) {
    var xmlDoc = $.parseXML(response);
    var xml = $(xmlDoc);
    var Positions = xml.find("Table");
    var row = $("[id*=gridview] tr:last"); 
    $("[id*=gridview] tr").not($("[id*=gridview] tr:first-child")).remove();
    $.each(Positions, function () {
        var Position = $(this);
          $("td", row).eq(0).html('<a id="lkedit" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Edit</a>');
          $("td", row).eq(1).html('<a id="lkdelete" onclick="SingleDel(this)" style="font-weight:bold;text-decoration:underline;cursor:pointer;color:Blue; ">Delete</a>');

          $("td", row).eq(2).html('<input type="checkbox" onclick="javascript:Selectchildcheckboxes();" id="chkRow"/>');
          $("td", row).eq(3).html('<span id="lblpfid">'+Position.find("pfid").text()+'<span/>');

          $("td", row).eq(4).html('<span id="lblpfname">'+Position.find("pfname").text()+'<span/>');

          $("td", row).eq(5).html('<span id="lblposid">'+Position.find("positionid").text()+'<span/>');

          $("td", row).eq(6).html('<span id="lbldisposid">'+Position.find("disposid").text()+'<span/>');//DataItem.disposid
          $("td", row).eq(7).html('<span id="lbltype">'+Position.find("type").text()+'<span/>');      //type

          $("td", row).eq(8).html('<span id="lblcur">'+Position.find("ccy").text()+'<span/>');     //ccy
       $("[id*=gridview]").append(row);
      // row = $("[id*=gridview] tr:last-child").clone(true);
    });
}