Grouping stops working if you recreate the grid

I have code which creates a grid.

When the user pressed the "Refresh" button, my code then destroys this grid and recreates it again.

For some reason, when you recreate the grid, the grouping doesn't work. You drag a column into the grouping banner, but then it just doesn't stick there.

I have created a simple working example here: http://jsfiddle.net/xmpzk/1/ 

Press the button "Create", and you see the grid appear. You can happily drag column headers into the grouping banner.

Then press the button "Refresh". This time, you will find that you cannot drag columns.

Just in case jsFiddle is down:

The HTML:
<button type="button" id="refreshButton">Create Grid</button>  

<div id="demoGrid">
    
</div>


The Javascript:

function createGrid() {

    var dataSource = {
        data: [
            {
            FirstName: "Harold",
            LastName: "Kumar",
            City: "London",
            Title: "Mr",
            Age: 63}
              ]
    };
    $("#demoGrid").empty().kendoGrid({
        height: 250,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: true,
        groupable: true,
        dataSource: dataSource,
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"},
        {
            field: "City"},
        {
            field: "Title"},
        {
            field: "Age"}
        ]
    });
    $("#refreshButton").text("Refresh Grid");
};

// createGrid();

$("#refreshButton").click(function() {
    createGrid();
});​