HTML5 History API: update URL location

push state to update the URL (with Kendo UI Grid state change):

        $('#MemberGrid').on('click', " tbody > tr", function () {//delegate("tbody > tr", "click", function(){//prior to jQuery 1.7
            var $grid = $("#MemberGrid").data("kendoGrid");
            var data = $grid.dataItem(this);
            var url = location.href;
            var _privateData = $("#XXX").val();
            url = url.replace(_privateData, data.privateData);
            $("#XXX").val(data.privateData);
            $rootScope.$broadcast('detailNav-started');
            //save state as well
            var stateObj = { id: data.privateData };
            window.history.pushState(stateObj, null, url);
        });

And PopState to setup a callback to listen when the “back” or 'forth' button is pressed,(with Kendo UI Grid state change):

window.onpopstate = function(e){
            var url = location.href;
            var privateData_temp = $("#XXX").val();
            var currentState = e.state;
            $("#XXX").val(currentState.id);
            $rootScope.$broadcast('detailNav-started');
            var $grid = $("#MemberGrid").data("kendoGrid");
            $grid.table.find("tr td:last-child").filter(function () { return $.text([this]) == privateData_temp; }).closest('tr').removeClass("k-state-selected");
            $grid.table.find("tr td:last-child").filter(function () { return $.text([this]) == currentState.id; }).closest('tr').addClass("k-state-selected");
        }