How to Bind data to Gridview using Jquery

Question

I am using jquery to Bind data in Gridview, but the following code does not work properly. Please anybody help to Bind Data in Gridview using Jquery, Ajax, or Json . The code i used is

Jquery

<script type="text/javascript">
 $(document).on('click', 'input', function () {
     var key = $(this).find('lb' + this.id).text();
     var val = 'lb' + this.id;
     var lbltext = document.getElementById(val).innerHTML;
     $.ajax({
         type: "POST",
         url: "CandidateManagement.aspx/BindDatatable",

         data: '{value: "' + lbltext + '" }',
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (response) {
             alert(response.d.length);
             for (var i = 0; i < response.d.length; i++) {

                 $("#gvUserManage").append("<tr><td>" + response.d[i].CandidateID + "</td><td>" + response.d[i].CandidateName + "</td><td>" + data.d[i].CurPosition + "</td></tr>" + "<tr><td>" + response.d[i].TotWorkExp + "</td><td>" + response.d[i].Skillset + "</td><td>" + data.d[i].USStatus + "</td></tr>" + "</td><td>" + data.d[i].Location + "</td></tr>" + "</td><td>" + data.d[i].ActiveResume + "</td></tr>");
             }
         },
         error: function (result) {
             alert("Error");
         }
     });

     /* function OnSuccess(response) {
     alert();
     for (var i = 0; i < response.d.length; i++) {
     $("#gvUserManage").append("<tr><td>" + response.d[i].CandidateID + "</td><td>" + response.d[i].CandidateName + "</td><td>" + data.d[i].CurPosition + "</td></tr>" + "<tr><td>" + response.d[i].TotWorkExp + "</td><td>" + response.d[i].Skillset + "</td><td>" + data.d[i].USStatus + "</td></tr>" + "</td><td>" + data.d[i].Location + "</td></tr>" + "</td><td>" + data.d[i].ActiveResume + "</td></tr>");
     }
     };

     */
 });

this code will always shows Error alert when i pass the values.

aspx.cs

[WebMethod]
public static Admin_CandidateManagement[] BindDatatable(string value)
{
    string year = value.Substring(0, 2);
    int yearvalue = int.Parse(year);
    Admin_CandidateManagement admincandi = new Admin_CandidateManagement();
    string strSrcQry = admincandi.getSrcQryExpr(yearvalue);


    DataTable dt = new DataTable();
    Recruitment recOBJ = new Recruitment();
    admincandi.recOBJ.GetAllCandiDeatForAdvaceSearch(ref admincandi.dsCandiDeat, strSrcQry);
    //recOBJ.BindData(strSrcQry);
    dt = admincandi.dsCandiDeat.Tables[0];

    List<Admin_CandidateManagement> details = new List<Admin_CandidateManagement>();
    foreach (DataRow dtrow in dt.Rows)
    {
        Admin_CandidateManagement user = new Admin_CandidateManagement();
        user.CandidateID = dtrow["CandidateId"].ToString();
        user.CandidateName = dtrow["CandiName"].ToString();
        user.CurPosition = dtrow["CurrPosi"].ToString();
        user.TotWorkExp = dtrow["TotWrkExp"].ToString();
        user.Skillset = dtrow["SkillSet"].ToString();
        user.USStatus = dtrow["USStatus"].ToString();
        user.Location = dtrow["Location"].ToString() + "   " + dtrow["JobZipCode"].ToString();
        user.ActiveResume = dtrow["ActiveResume"].ToString();
        details.Add(user);
    }
  return details.ToArray();

}

Thanks in advance.

Answer 1

 for (var i = 0; i < data.d.length; i++) 
 {
    $("#gvUserManage").append("<tr><td>" + data.d[i].CandidateId + 
                            "</td><td>" + data.d[i].CandiName + "</td></tr>");
 }

and so on append columns in grid