Bind GridView via jQuery ajax

Question

I am new to jQuery, trying to populate a GridView or Telerik RadGrid using jQuery. Not sure how to go about it and unable to find any examples. Any help is appreciated. Thanks.

Essentially I am trying to display a modal window with a textbox and button. The user enters a search criteria presses the button and a gridview in the same modal window is populated with the results.

The user than selects records in the grid presses another button and the selected users are inserted into the database table, modal window is closed and a grid on the parent page is refreshed showing the new added users.

<input type="button" id="btnAddNewUserj" value="Add New User" />

$(document).ready(function() {
$("#btnAddNewUserj")
    .click(function() { ShowNewUserDialog(); return false });

$("#btnSearch")
    .click(function() { FindUsers(); return false });
});

function ShowNewUserDialog() {
    $("#newuserDialog").dialog({ modal: true, bgiframe: true }).dialog("open");
}

function FindUsers() {
  // HOW TO DO THIS?
  // Show selectable list of users from the database in grid.
}

<div id="newuserDialog" title="Add New User" style="display:none;">
<div>
<input id="txtSearchFor" type="text" />&nbsp;&nbsp;
<input id="btnSearch" type="button" value="Search" class="Button" /></div>
<p> DISPLAY RESULTS HERE </p>
<div style="margin:10px 6px;">
<input type="button" id="btnjAdd" value="Add" class="Button" />&nbsp;&nbsp;
<input type="button" id="btnjCancel" value="Cancel" class="Button" /> 
</div>
</div>

Answer 1

A couple of thoughts here. You cannot populate a GridView or Telerik Grid using jQuery. jQuery is a client side technology and those two grids are server side.

You can use jQuery to hit a web service and build out and HTML table with the results (which is basically what a GridView does).

I'm guessing however, that you would be better served just using native GridView databinding. You can use a .Net UpdatePanel around the grid if you want to prevent full post backs.

Answer 2

Use telerik radgrid's client side binding, see this for an example: http://demos.telerik.com/aspnet-ajax/grid/examples/clientbinding/defaultcs.aspx

Note that sample shows how to bind to a WCF Web Service and an ADO.NET Data Service. There are other samples around.

Other variations of binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx

More on client side binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

Answer 3

I think telerik is not the answer.