Client-side Generated KendoUI Grid is not highlighting selected row when grid is redisplayed

Question

Client-side Generated KendoUI Grid is not highlighting selected row when grid is redisplayed (Kendo UI Complete v2013.1.514).

Kendoui grid is in a KendoUI Tab (Tab #1). Clicking on the 3rd row highlights the row. Clicking on the second tab (Tab #2) hides the grid tab and shows another grid. When clicking back on Tab #1 the first grid is redisplayed and the contents are shown.

When stepping through the tab onActivate(arg) function I can see using grid.select() that the row that was last selected is still the selected row however the row isn't highlighted.

I tried the following code in an attempt to reselect the row:

var element = $(WORK_PRODUCT),
                    grid = element.data("kendoGrid"),
                    row = element.find("tbody>tr[data-uid='" + grid.dataSource.get(_selectedWorkProduct).uid + "']");

                grid.select(row); 

I also examined the inner and outer HTML and the selected row matches exactly what was selected the first time the row was selected (TR class=k-state-selected role=row aria-selected=true data-uid="119b95c7-f3e4-4160-821e-507fbdc70026">7964

How can I visibly show that the row is selected? Thanks in advance!

Below is the code that initializes the grid:

DashViewUI.prototype.initWorkProducts = function (arg) {
    $(WORK_PRODUCT).kendoGrid({
        filterable: true
        , sortable: true
        , selectable: "row"
        , pageable: true
        , ajax: true                     
        , columns:
        [
            {
                field: "ID"
                , title: ""
                , sortable: true
                , hidden: true
            }
            , {
                field: "Number"
                , title: "Case No."
                , width: 80
                , sortable: true
                , filterable: true
            }
            , {
                field: "Name"
                , title: "Case Name"
                , width: 120
                , sortable: true
            }
            , {
                field: "Status"
                , title: "Status"
                , width: 70
                , sortable: true
            }
        ]
        , dataSource:
            {
                transport:
                    {
                        read:
                        {
                            url: AppPath + '/DashB/GetWorkProducts'
                            , contentType: 'application/json; charset=utf-8'
                            , type: 'GET'
                            , dataType: 'json'
                        }
                    }
                , schema: {
                    model: {
                        id: "ID"
                        , fields: {
                            "ID": { type: "number" }
                            , "Number": { type: "string" }
                            , "Name": { type: "string" }
                            , "Status": { type: "string" }
                        }
                    }
                }
            }
        , dataBound: function onDataBound(e) {
            //alert('Data bound fired');
        }
        , change: function onCaseGridChange(arg) {
            if (DEBUG)
                debugger;

            var cells = this.select();
            var name = null;

            if (cells.length > 0)
                name = this.dataItem(cells[0]);

            if (name.ID != null) {

                // store the currently selected work product
                _selectedWorkProduct = name.ID;
                // refresh the party dial gauge
                _dashViewUI.refreshDialGauge(PARTY_GAUGE, AppPath + '/DashB/GetCaseChildrenCount');

                // reload the tasks for the selected work product
                $(TASKS).data().kendoGrid.dataSource.read({ workProductID: _selectedWorkProduct });
            }
        }
    });

};

Answer 1

The selected grid row will not be retained if you reload the grid. You have to store it before hand.

  var selectedDataItem = grid.dataSource.getByUid(grid.select().data("uid"));
  grid.dataSource.read();

  if (selectedDataItem) {
    var uid = grid.dataSource.get(selectedDataItem.id).uid;

    grid.select('tr[data-uid="' + uid + '"]');    
  }

Here is a live demo: http://jsbin.com/USahiPor/1/edit