Ajax Data Controls (Repeater, Data List and Grid View)

by Ishai Hachlili 18. February 2008 13:14

ADC is a set of data controls that try to mimic the Asp.Net controls using Asp.Net AJAX Extensions.

I'm looking at the GridView in particular, although I never really liked the Asp.Net control, the AJAX version might work well for my search pages.
For the current project I'm working on I won't be using the server side wrapper, just the client side code.

The grid view control supports paging, sorting, column dragging, links, checkboxes and in-place editing.

I'm going to try it out, see if it takes the places of my upgraded WebFXColumnList...

check it out at Ajax Data Controls - Home

Tags:

AJAX | Asp.Net | Javascript

You should never forget your (browser) history

by Ishai Hachlili 18. February 2008 10:44

One of the most annoying things in AJAX based applications is clicking the back button and going back to a previous url and not the previous state of the application.
Users are trained at clicking the back button if they went to the wrong place and need to get back to the last place they were at. Even when I know I'm using an AJAX app, I would click it by mistake.

What happens when uses click the back button in your AJAX application?
I've worked on a lot of back office web applications and when an application uses AJAX with only one real page (in the same way gmail does), clicking back will usually take you to the login screen, and that's not where you wanted to go.

Adding History to an AJAX application
Fortunately, this problem has been solved. You can manipulate the browser history and control what happens when a user clicks the back button.
Even better, Microsoft’s AJAX library adds easy support for setting history points and going back to them, so you don't have to write the code yourself.

Let’s take a look at the AJAX search sample, where we had next and previous buttons to navigate the search results.

Whenever a results page is shown I want to add a history point.

Here's the code I'll use to set a history point in JavaScript:

Sys.Application.addHistoryPoint({showPage:pager.CurrentPageIndex},'MyTakeOnNet - Search Results - Page ' + pager.CurrentPageIndex);


Sys.Application.addHistoryPoint takes two parameters, the first one can be any object you want, you will use this object to decide what to do when the user goes back to this history point. the second parameter is the title of the page.

If you add this line of code to the pager's ShowPage method, you'll see the history button's drop down will have a new entry for each page.


Handling the history navigation
Every time a user navigates through the browsers history by clicking the back button or selecting a history point from the back buttons drop down, the MS AJAX library raises an event.
To subscribe to this event, add the following line of code when the page loads.

Sys.Application.add_navigate(onNavigate);

and add the onNavigate function to handle the event
function onNavigate (sender, e) {    //get state and make change to application    var state=e.get_state();    if (typeof(state.showPage) != 'undefined') {        if (pager.CurrentPageIndex != state.showPage)            pager.ShowPage(state.showPage);    }}

The get_state() call will return the object you saved as the first parameter of the history point, you can then use this parameter to show the page.

Pretty simple, right?
It does get more complicated if you remember that a user might execute several searches and page through them, so the search parameters should be saved as well with the history point.
You have to make sure you cover the entire state of you AJAX enabled page to make sure you can re-create that state when the user clicks the back button, but at least you don't have to write the code to deal with the browser's history

Tags:

AJAX | Asp.Net | Javascript

Ajax Data Controls (Repeater, Data List and Grid View)

by Ishai Hachlili 18. February 2008 08:14

ADC is a set of data controls that try to mimic the Asp.Net controls using Asp.Net AJAX Extensions.

I'm looking at the GridView in particular, although I never really liked the Asp.Net control, the AJAX version might work well for my search pages.
For the current project I'm working on I won't be using the server side wrapper, just the client side code.

The grid view control supports paging, sorting, column dragging, links, checkboxes and in-place editing.

I'm going to try it out, see if it takes the places of my upgraded WebFXColumnList...

check it out at Ajax Data Controls - Home

Tags:

AJAX | Asp.Net | Javascript

About Me

Ishai Hachlili is a web and mobile application developer.

Currently working on Play The Hunt and The Next Line


Recent Tweets

Twitter October 23, 05:22
@BenThePCGuy a standard where that doesn't matter is better. One more reason to get the #Lumia920, wireless charging, no need for microUSB

Twitter October 23, 05:21
@ManMadeMoon where they dance around the issues and don't really talk about them

Twitter October 23, 05:20
@BenThePCGuy are you a @wpdev ?

Twitter October 23, 04:17
@JonahLupton But if it's black it's usually better

Twitter October 23, 02:58
@jongalloway next time ask your 5 year old how to spell

@EShy