Load data to dataGrid

Question

Hello,

 

I'm trying to load data to datagrid using jquery.

My problem is that I get the value of rownum(0) at header row and at the place of rownum(0) I get the NAME(0). Also, I only get values of columns rownum and NAME (columns 0 and 1).

This is my code:

CREATE TABLE tblTEST
(ID INT not null IDENTITY(1,1),
IDNO NVARCHAR(20),
NAME NVARCHAR(20),
POSTADDRESS NVARCHAR(20),
TEL NVARCHAR(20),
INSDATE DATE,
APPROVAL BIT
)
CREATE PROCEDURE PROC_TEST
(@IDNO NVARCHAR(20),
@NAME NVARCHAR(20),
@TEL NVARCHAR(20))
AS
BEGIN
SELECT ROW_NUMBER() OVER(order by ID) AS rownum,IDNO,NAME,POSTADDRESS,TEL,INSDATE,APPROVAL
FROM tblTEST
WHERE IDNO=@IDNO and NAME=@NAME and TEL=@TEL
END

and the C# code:

[WebMethod]
public static String getApplicants(String idno, String name, String tel)
{
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "PROC_TEST";
cmd.Parameters.Add("@IDNO", SqlDbType.VarChar).Value = idno;
cmd.Parameters.Add("@NAME", SqlDbType.VarChar).Value = name;
cmd.Parameters.Add("@TEL", SqlDbType.VarChar).Value = tel;
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
using (SqlConnection con = getConnection())
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}

and the javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function bindGrid() {
var pageurl = '<%=ResolveUrl("Default.aspx/getApplicants") %>';
var idno = $("#<%=txtIDNO.ClientID%>").val();
var name = $("#<%=txtName.ClientID%>").val();
var tel = $("#<%=txtTel.ClientID%>").val();
var parameter={"idno":idno,"name":name,"tel":tel}
$.ajax({
type: "POST",
url: pageurl,
data: JSON.stringify(parameter),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var dv = xml.find("Table");
var row = $("[id*=gv] tr:last-child").clone(true);
$("[id*=gv] tr").not($("[id*=gv] tr:first-child")).remove();
$.each(dv, function () {
var dv = $(this);
$("td", row).eq(0).html($(this).find("rownum").text());
$("td", row).eq(1).html($(this).find("IDNO").text());
$("td", row).eq(2).html($(this).find("NAME").text());
$("td", row).eq(3).html($(this).find("POSTADDRESS").text());
$("td", row).eq(4).html($(this).find("TEL").text());
$("td", row).eq(5).html($(this).find("INSDATE").text());
$("td", row).eq(6).html($(this).find("APPROVAL").text());
$("[id*=gv]").append(row);
row = $("[id*=gv] tr:last-child").clone(true);
});
}
</script>

Thank you in advance.