Thomas
Thomas

Reputation: 34188

populate gridview with jquery

I could successfully populate gridview with jquery like

<asp:GridView ID="NamesGridView" runat="server" ShowHeaderWhenEmpty="True" >
</asp:GridView>

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
  function BindGridView() {
     $.ajax({
          type: "POST",
          url: "Default.aspx/GetNames",
          data: "{}",
          contentType: "application/json",
          dataType: "json",
          success: function (data) {
         for (var i = 0; i < data.d.length; i++) {
                $("#NamesGridView").append("<tr><td>" + data.d[i].FirstName + 
                                            "</td><td>" + data.d[i].Age + "</td></tr>");
             }
           }
          })
      }
</script>


    [WebMethod]
public static Names[] GetNames()
{
  List<Names> list = new List<Names>();
  DataTable dt = DataStore.GetDataTable();
  foreach (DataRow row in dt.Rows)
   {
      Names _names = new Names();
      _names.FirstName = row["Name"].ToString();
      _names.Age = row["age"].ToString();

      list.Add(_names);
   }
  return list.ToArray();
}

with the above code I can populate gridview with jquery but if my gridview has pager row then I think my code may not work perfectly because my code always append a table row at the end of gridview and if pager is there at the bottom then how can I append rows in between pager I mean before pager row?

can't i return only list like return list instead of return list.ToArray();

Upvotes: 0

Views: 1152

Answers (2)

Andy T
Andy T

Reputation: 87

I agree that you're going about binding a gridview in an unusual manner, but to answer your question on inserting before the pager:

$("#NamesGridView tr:last").insertBefore( ... )

Upvotes: 1

Abe Miessler
Abe Miessler

Reputation: 85036

I think you are taking a slightly backwards approach to this. jQuery has no concept of what a GridView is, that is an asp.net concept. Because of this any GridView functionality you try to reproduce with jQuery can be fairly difficult.

The fact that the GridView control is a server side control means that you can populate it with the necessary data before you send it to the client, which makes it unnecessary to worry about making an ajax call using jQuery. Just send the data to the client right off the bat. If you do this you won't have to worry about reinventing the wheel with jQuery.

Upvotes: 1

Related Questions