Enabling History Back Button in Telerik MVC Grid

As an Ex-WebForms expert(I’m not an expert in that now cause I have been doing my projects in MVC for 2 years now!) I expect to get things done by “True”ing a Boolean property!

But things are different in ASP.NET MVC. Handling most of the things is the duty of the programmer.

Telerik MVC Bundle has been a good help for the people producing rich user experience in MVC and It is open source and well documented.

The Problem

I needed to enable Browser’s History Back Button when user navigates through pages in Telerik’s Grid control when the data are delivered AJAXly(Let’s make that a word !).
So I started Googling it with Bing but found nearly nothing except for this forum thread in Telerik’s website saying that stop using AJAX if you want browser back button. Not a good answer! I know!

The Solution

Anchors! And rich client API of Telerik’s Grid helped me solve this problem with just a little bit of hacking! Works in every Browser and works great in nearly every scenario.

First of all you need a javascript function like this in your page:

function Grid_onDataBinding(e) {
    var grid = $('#' + gridName).data('tGrid');

    var chkElement = $('#GridCheckElement');
    if ($(chkElement).length == 0) {
        if (self.document.location.hash == "") {
            self.document.location.hash = grid.currentPage;

            $('body').append('
');
            chkElement = $('#GridCheckElement');
        } else {
            $('body').append('
');

            grid.pageTo(self.document.location.hash.substring(1));
        }
    } else {
        self.document.location.hash = grid.currentPage;
        $(chkElement).val(grid.currentPage);
    }
}

Secondly, you need to tell the Grid to use this function as OnDataBinding Client Event.

.ClientEvents(e => e.OnDataBinding("Grid_onDataBinding"))

And you’re done!

Epilogue

This is not the perfect solution to this problem. So I will be glad if you have any comments on this.
Thanks to my dear friend Amir Ehsani(Blog in Persian) for making me do this!

Tags: ASP.NET, Javascript, MVC, Telerik