重新显示网格时，客户端生成的 KendoUI 网格未突出显示选定的行答案

【问题标题】：Client-side Generated KendoUI Grid is not highlighting selected row when grid is redisplayed重新显示网格时，客户端生成的 KendoUI 网格未突出显示选定的行
【发布时间】：2013-12-20 03:56:06
【问题描述】：

重新显示网格时，客户端生成的 KendoUI 网格未突出显示所选行（Kendo UI Complete v2013.1.514）。

Kendoui 网格位于 KendoUI 选项卡（选项卡 #1）中。单击第三行突出显示该行。单击第二个选项卡 (Tab #2) 隐藏网格选项卡并显示另一个网格。当再次点击 Tab #1 时，会重新显示第一个网格并显示内容。

当单步执行选项卡 onActivate(arg) 函数时，我可以使用 grid.select() 看到最后选择的行仍然是选定的行，但是该行没有突出显示。

我尝试了以下代码以尝试重新选择该行：

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

                grid.select(row);

我还检查了内部和外部 HTML，所选行与第一次选择行时选择的行完全匹配 (TR class=k-state-selected role=row aria-selected=true data-uid="119b95c7 -f3e4-4160-821e-507fbdc70026">7964

我怎样才能明显地显示该行已被选中？提前致谢！

下面是初始化网格的代码：

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 });
            }
        }
    });

};

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

如果重新加载网格，将不会保留选定的网格行。您必须事先将其存储起来。

  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 + '"]');    
  }

这是一个现场演示：http://jsbin.com/USahiPor/1/edit

【讨论】：