Error when loading data to gridview with jquery

Question

0.00/5 (No votes)

See more:

, +

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

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>

the gridView markup language:

<div style="overflow-x:auto;width:90%">
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false" ShowFooter="true"
OnRowEditing="gvFunctions_RowEditing"
OnRowUpdating="gvFunctions_RowUpdating"
OnRowCancelingEdit="gvFunctions_RowCancelingEdit"
OnPageIndexChanging="gvFunctions_PageIndexChanging"
OnRowDeleting="gvFunctions_RowDeleting" OnRowCommand="gvFunctions_RowCommand" AllowPaging="True" PageSize="5"
CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:TemplateField HeaderText="rownum">
<ItemTemplate>
<asp:Label ID="lblrownum" runat="server" Text='<%#Eval("rownum") %>' Width="30"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="IDNO">
<ItemTemplate>
<asp:Label ID="lblIDNO" runat="server" Text='<%#Eval("IDNO") %>' Width="120"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddIDNO" runat="server" Width="120"> </asp:TextBox>
<asp:RequiredFieldValidator ID="reqIDNO" runat="server" ForeColor="Red" ValidationGroup="ValgrpIns" ControlToValidate="txtAddIDNO" ErrorMessage="*"></asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("NAME") %>' Width="180"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%# Bind("NAME ") %>' Width="180"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddName" runat="server" Width="180"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName" runat="server" ForeColor="Red" ValidationGroup="ValgrpIns" ControlToValidate="txtAddName" ErrorMessage="*"></asp:RequiredFieldValidator>
</FooterTemplate>
<HeaderStyle Width="15%"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="POSTADDRESS">
<ItemTemplate>
<asp:Label ID="lblPostalAddress" runat="server" Text='<%#Eval("POSTADDRESS") %>' Width="180"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtPostalAddress" runat="server" Text='<%# Bind("POSTALADDRESS") %>' Width="180"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddPostalStreet" runat="server" Width="180"></asp:TextBox>
</FooterTemplate>
<HeaderStyle Width="15%"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="TEL">
<ItemTemplate>
<asp:Label ID="lblTel" runat="server" Text='<%#Eval("TEL") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTel" runat="server" Text='<%# Bind("TEL") %>' Width="80"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddTel" runat="server" Width="80"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="INSDATE">
<ItemTemplate>
<asp:Label ID="lblDate" runat="server" Text='<%#Eval("INSDATE") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtDate" runat="server" Text='<%# Bind("INSDATE") %>' Width="80"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddDate" runat="server" Width="80"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="APPROVAL" ItemStyle-Width="50">
<ItemTemplate>
<asp:CheckBox ID="lblcbApproved" Checked='<%# Eval("APPROVAL")!=DBNull.Value?Eval("APPROVAL"):false%>' runat="server" Enabled="False" />
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="cbApproved" Checked='<%# Eval("APPROVAL")!=DBNull.Value?Eval("APPROVAL"):false%>' runat="server" Enabled="True" />
</EditItemTemplate>
<FooterTemplate>
<asp:CheckBox ID="cbAddApproved" runat="server" Enabled="true" />
</FooterTemplate>
</asp:TemplateField>

<asp:TemplateField >
<ItemTemplate>
<asp:LinkButton ID="btnEdit" Text="Edit" runat="server" CommandName="Edit" />
<span onclick="return confirm(delete;')">
<asp:LinkButton ID="btnDelete" Text="Delete" runat="server" CommandName="Delete" />
</span>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="btnUpdate" Text="Update" runat="server" CommandName="Update" />
<asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="btnInsertRecord" runat="server" Text="Insert" Width="100" ValidationGroup="ValgrpIns" CommandName="Insert" />
</FooterTemplate>
<HeaderStyle Width="15%"/>
</asp:TemplateField>
</Columns>
<PagerStyle HorizontalAlign="Left" VerticalAlign="Middle"/>
</asp:GridView>
</div>

Thank you in advance.

What I have tried:

Test that sproc working and the results are showing correctly in the gridView when I'm not using the javascript for loading the data.

Posted 20-Sep-16 19:46pm

Chriz12

Updated 22-Sep-16 3:56am

v14

Add a Solution

Comments

Karthik_Mahalingam 21-Sep-16 1:50am

post the girdview markup code.

Chriz12 21-Sep-16 2:25am

I tried several times to paste the gridview markup code, but I can't, I don't know why.

Karthik_Mahalingam 21-Sep-16 2:56am

try pasting as plain text. or post in a fiddle and share the link

Chriz12 21-Sep-16 3:40am

I paste it as plain text I hope it makes sense!

Karthik_Mahalingam 21-Sep-16 4:35am

yes.
var dv = xml.find("Table");
this should be Table1 i guess, check it.

Chriz12 21-Sep-16 6:28am

Thank you for the answer. If I change it to Table1 I get no data at all.

Karthik_Mahalingam 21-Sep-16 6:36am

does the dataset contain data?

Chriz12 21-Sep-16 6:57am

Yes. When I use var dv = xml.find("Table"); I get the data but only for columns 0 and 1. (with first record column(0) getting mixed up)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2016-09-22T03:56:00

Quote:
Test that sproc working and the results are showing correctly in the gridView when I'm not using the javascript for loading the data.

GridView is a server-side data control and it would make your life easier when manipulating it at the server because you can take advantage of the built-in features it offers. It would be a pain to mix your client-side code with server controls. If you want to use AJAX to populate your form, then you might want to generate the html by hand or perhaps use a client-side grid that you can easily manage. For example: Creating a jqGrid with ASP.NET Web Forms and a JSON Web Service[^]

More references:
Using jqGrid with ASP.NET Web Forms - Part I[^]
Using jqGrid with ASP.NET Web Forms - Part II[^]

And of course, you can find more examples by doing a quick search ta google :)