Simple - Take action when user types in TextBox

[NickThissen]

Hi,

I have an UpdatePanel with a GridView and a TextBox, which contains a filter for the GridView. When the user types in the TextBox I want the contents of the GridView to filter. I handle the TextChanged event of the TextBox on the server side, where I filter the contents of the GridView and rebind it. This all works fine, but the TextChanged event is not fired until the TextBox loses focus. That's not what I want; I want the grid to update as soon as the user types, not when he decides to tab out of the TextBox.

I thought I'd have to do it in javascript instead, but I can't possibly filter the contents of the GridView in javascript, so I thought of a workaround: I just set the focus to some button on the same page, and then set it back to the TextBox. This should cause the TextChanged event to be called (on the server) so that the GridView is filtered (since this is all in an UpdatePanel there's no problems of postbacks).

So I tried adding the 'onchange' attribute to the TextBox:

txtNameFilter.Attributes.Add("onchange", "javascript:filterChanged();");

and the Javascript is just this:

        function filterChanged() {
            var button = document.getElementById("<&#37;= btnClearFilter.ClientID %>");
            var textBox = document.getElementById("<%= txtNameFilter.ClientID %>");
            button.focus();
            textBox.focus();
        }

This still doesn't work though... The javascript is run, the focus is changed correctly, but it's the same problem: it only happens after the user tabs out of the TextBox.


The next thing I tried is using the 'onkeypress' or 'onkeyup' attributes (calling the same function). The onkeyup method seems to work, but not ideally. The TextBox loses focus (so the TextChanged server event is raised and the grid is filtered), but it does not get focus back. So you cannot keep typing...


How can I take action as soon as the user types, and not after the TextBox loses focus? Thanks!

[gep13]

Hello Nick,

The TextBox, as with most ASP.Net Controls, has an AutoPostBack property:

http://msdn.microsoft.com/en-us/libr...opostback.aspx

By default, for a TextBox, this is set to false as it is normally the case that going back to the server each time a key is pressed is a little bit of overkill, but it sounds like this is what you want, so it would be worth giving this a try.

Gary

[gep13]

Wait, hold on, I think I am sending you up the garden path with that, I must be remembering something else, it's far too early in the morning

I "think" what you are after would be the onblur event of the textbox.

Gary

[NickThissen]

Hi Gary,

Sorry for not posting this but I figured out a solution that seems to work ok for me, at least for now... I ended up using the onkeydown (client side) event and setting the focus to a button, then back to the textbox again. It feels like a hack, and probably is, but it works. Put the whole thing in an UpdatePanel and you dont notice the postback; the grid filters as you would expect (just not as fast as I had hoped, but I can live with that, I think the only way to get it 'real-time' is to filter the grid using javascript, which I'm not planning to do...). The only thing is that you need to set focus to the TextBox in the Page_Load (or in my case everything is in a UserControl so I just handle it in there), otherwise something strange happens (I didn't quite figure out what but it seems like the textbox doesn't get its focus back after typing).

I'll try the onblur if I have some time later, maybe that works better. Thanks

[gep13]

Not a problem at all, sorry I couldn't be of more help.

One thing I would mention is SlickGrid:

https://github.com/mleibman/SlickGrid/wiki

There has been a lot of chat about it lately:

http://www.vbforums.com/showthread.php?t=645756

If you are looking for performance, then it might be a good bet.

Gary

[NickThissen]

I am probably going to run into performance issues in the future if more users are in the grid. For now it's acceptable I think but with possibly hundreds of users its likely going to be slow... But we'll see. If that's the case I'll take a look at SlickGrid. I also have access to a couple of (non free) third party grid components that are really good but I don't know if I can use them on my website, I'll have to figure that out.

If you were curious here is an example of how I'm using the grid (don't mind the layout and look of the website/grid, I haven't really touched that yet):
http://www.nickthissen.nl/cod/Pages/...ViewUsers.aspx

[sapator]

I sure hope you don't try to filter a full gridview and provide the full results at once.You will run into problems of performance very soon.
What i undead up (had a somewhat same issue) was using the ROW_NUMBER() sql function that allowed me to create a fast paging gridview.Note this can be done with objectdatasource (search ROW_NUMBER() + objectdatasource, you will find examples) but the drawback is (as sadly found out) that you cannot have multiple filters.I use 2-3 filters at a time and the objectdatasource with ROW_NUMBER() will only accept one.If you want one filter though you can use this approach.
Again don't feed the gridview with all the results, i know it's sort of ok in winforms but it's a nightmare here, performance will go down probably at half,steadily with each user added.
I would use SlickGrid also but it's a javascript nightmare for me as i'm not good at it.So...Ah you can also use a web service on the grid instead of the updatepanel.The performance is medium at least with the damn ajax stuff.Having said that i am currently using updatepanels but i had 70% of the site ready and i couldn't stall to go back and use web service or WCF.
If you are creating the site from scratch the try to limit then updatepanels.They are round and fuzzy and cute but they can bite you.

[gep13]

Hmmm, there might be a slight issue with what you have there.

If I type "new" and pause for a slight second then the NewTest user pops up, which is good, but if I keep typing the t, as I didn't notice that it had resolved the user, and the "new" portion gets lost in the TextBox.

Gary

[NickThissen]

Hmmm, there might be a slight issue with what you have there.

If I type "new" and pause for a slight second then the NewTest user pops up, which is good, but if I keep typing the t, as I didn't notice that it had resolved the user, and the "new" portion gets lost in the TextBox.

Gary

I see. That doesn't happen in Firefox, in which I was testing the website. I just tried it with Chrome and something similar happens. In Firefox it works fine. I'll have to figure out how to fix it for other browsers... Were you using IE?

I think what happens in Chrome is simple: when you focus the Textbox all the text gets selected, so you will replace the text you already typed when the focus is changed... That doesn't happen in firefox so you can just keep typing without deleting the part you already had. There must be a way to not have it select the text on focus?

[gep13]

Were you using IE?

Nope

At the minute, Chrome is my default browser.

There must be a way to not have it select the text on focus?

Interesting that Chrome defaults to selecting all the text. I guess in some cases, this is exactly what you want to happen. If I had to guess I would say that there would be a way to say move the caret to the end of the text, rather than select all the text.

Gary