function getSelectedId() {
    var grid = $("MainGrid").data("kendoGrid");
    var selected = grid.select();
    var data = grid.dataItem(selected);

    return data.Id;
}

function changeGrid(e) {
    var id = getSelectedId();

    if (id == 0) {
        hideSubGrid();
    } else {
        refreshSubGrid();
        showSubGrid();
        setTitle(id);
    }
}

function hideSubGrid() {
    var subGrid = $("SubGrid").data("kendoGrid");

    subGrid.addClass("hidden");
}

function showSubGrid() {
    var subGrid = $("SubGrid").data("kendoGrid");

    subGrid.removeClass("hidden");
}

function refreshSubGrid(e) {
    var subGrid = $("SubGrid").data("kendoGrid");

    subGrid.dataSource.read();
    subGrid.refresh();
}

function setTitle(id) {
    $("#Title").text(id);
}

var gridHandler = {
    mainGrid: $("MainGrid").data("kendoGrid"),
    subGrid: $("SubGrid").data("kendoGrid"),
    title: $("#Title"),

    getSelectedId: function () {
        var selected = this.mainGrid.select();
        var data = this.mainGrid.dataItem(selected);

        return data.Id;
    }

    changeGrid: function (e) {
        var id = this.getSelectedId();

        if (id == 0) {
            this.hideSubGrid();
        } else {
            this.refreshSubGrid();
            this.showSubGrid();
            this.setTitle(id);
        }
    }

    hideSubGrid: function () {
        this.subGrid.addClass("hidden");
    }

    showSubGrid: function () {
        this.subGrid.removeClass("hidden");
    }

    refreshSubGrid: function (e) {
        this.subGrid.dataSource.read();
        this.subGrid.refresh();
    }

    setTitle: function (id) {
        this.title.text(id);
    }
}