Rebind gridview using AJAX (without post back)

Question

Hi, I plan on allowing a user to open a modalpopupextender containing a gridview witha Filter text box. I want it so when the user types in a filter, the filter is applied to the gridview and the contents of the gridview is then updated to reflect the applied filter - all without posting back. Also ideally the gridview will be filtered as he user types, rather than having to press a button.

I'm guessing it would utilise FilterParameters on my SqlDataSource and an UpdatePanel, but can anyone offer a more thorough explanation on how I would do this? It'd also be nice if the code I use is 'general' and can be utilised with any other GridView and DataSource.

Thanks

Answer 1

Couldn't you wrap the gridview in a updatepanel, and then on textbox change rebind the datasource with the filter?

Answer 2

Put the gridview in an UpdatePanel, and the TextBox outside it. Add a hidden button to that panel which is an async trigger, then add javascript onchange to the textbox to click that button.

  <asp:Button ID="DoRefresh" style="display:none;" UseSubmitBehavior="false"
 runat="server" OnClick="Recalculate()" />

In Page_Init:

    myTextBox.Attributes.Add("onChange",
"document.getElementById('" + DoRefresh.ClientID + "').click()");

Put the rebind code in Recalculate()

That should do it. I am sure there are much better ways to do this, but if you want to use server-side controls such as GridView I think you're stuck with partial postbacks to update it. Be careful, though, are you sure you want to run a query every time they type a letter?

EDIT - let me add that I think using a jQuery plugin or some other client-side solution with ajax, as another answer suggests, makes a lot more sense then doing it this way. This isn't really what UpdatePanels are for and you will be making a postback (albeit partial) every time they type a letter. But a postback is the only way to tell server-side code to update your page.

Answer 3

You'd be going to the server and running a query every time a user types a letter. That can get expensive real quick. Are you using a javascript framework like jQuery? Most frameworks will have a datatable that wraps around a <table> tag with that kind of functionality.

A quick google search finds this for jQuery: http://www.datatables.net/ (There's a bunch of other ones, dojo and yui have their own as well)

You could do something like:

$(document).ready(function(){
  $('#<% = GridView1.ClientID%>').dataTable();
});

Note, that this solution also has it's drawbacks depending on the size of the dataset.