Grid showing hidden field columns without title on redraw from pagination

[JSON]

I've been able to replicate this problem in angular (which we're implementing on the project I'm working on) on your dojo. Just for fun I was able to replicate it in regular jQuery as well. Hoping you might be able to pinpoint if I'm doing something wrong, or this may be an actual bug.

The DOJOs:
Angular: http://dojo.telerik.com/@yazdog8/eyAji/3
jQuery: http://dojo.telerik.com/@yazdog8/oxiCu

Steps to reproduce:
1. Run/load the grid
2. Go to the header column menu > columns
3. Deselect "Owner", "Tags" and "Size"
4. In the pagination controls > select the next page OR change the items per page from 25 to 50

What I'm seeing is that the hidden content is being shown in the table body. The table header is hiding the columns that are marked as hidden. 

[Dimo]

Hello Joe,

Row templates imply that the table (column) structure is different from the default one. As a result, some of the Grid functionality is not supported out-of-the-box and hiding of columns is one of them. For example, how the Grid should hide columns if the cells in the row template have been merged?

In lots of cases row templates are used when column templates will do the job as well. If you really need a row template, then you can use the following approach.

http://www.telerik.com/forums/columnhide-not-working-with-row-templates

Regards,
Dimo
Telerik

 

 

[JSON]

Dimo,

Ok...thanks. That makes sense. Our current rowTemplate has some items running on the TR as it's the kinda/sorta ng-repeat.

Here's what it looks like:

<script type="text/x-kendo-template" id="browseListGrid">
                <tr ng-click="dataItem.$selected = true;"
                    ng-mouseenter="dataItem.$mouseover = true" ng-mouseleave="dataItem.$mouseover = false"
                    ng-init="computeItemType(dataItem);">
                    <td>
                        <wd-browse-list-typeicon file-data="dataItem"></wd-browse-list-typeicon>
                    </td>
                    <td>
                        <wd-bookmark data="dataItem"
                                     resource-id="{{dataItem.id}}"
                                     resource-uri="{{dataItem.uri}}"
                                     display-name="{{dataItem.filePath}}"
                                     bookmark-type="{{dataItem.collectionType && dataItem.collectionType.type ? 'COLLECTION' : dataItem.fileType === 'FOLDER' ? 'FOLDER' : 'FILE'}}">
                        </wd-bookmark>
                    </td>
                    <td>
                        <a href="{{getHref(dataItem)}}">{{dataItem.displayName}}</a>
                    </td>
                    <td>{{dataItem.owner}}</td>
                    <td>
                        <wd-modal-tag file-data="dataItem"></wd-modal-tag>
                    </td>
                    <td>
                        <wd-tags-display tags="dataItem.tags" hide-placeholder-msg="true"></wd-tags-display>
                    </td>
                    <td>{{isCollection(dataItem) ? dataItem.itemType : dataItem.fileType}}</td>
                    <td class="align-right">{{dataItem.size | byteFormat}}</td>
                    <td>{{dataItem.lastModificationTime | amDateFormat:'M/D/YY, h:mm a'}}</td>
                    <td>
                        <wd-browse-list-actions file-data="dataItem"></wd-browse-list-actions>
                    </td>
                </tr>
            </script>


In addition, here's the data that we're sending to the grid:

$scope.gridOptions = angular.extend({}, wdsConfig.kendo.grid.listDisplayDefaults, {
                    columns: [{
                        field: "itemType",
                        title: "<i class='fa fa-file'></i>",
                        sortable: false,
                        width: 40
                    },{
                        field: "bookmarked",
                        title: "<i class='fa fa-star'></i>",
                        sortable: false,
                        width: 40
                    }, {
                        field: "displayName",
                        title: "Name"
                    }, {
                        field: "owner",
                        title: "Owner"
                    }, {
                        field: "tags",
                        title: "Tags",
                        width: 80,
                        sortable: {
                            compare: function(data) {
                                return _.filter(data.tags, function(tagObj) {
                                    return (tagObj.state === 'Accepted' || tagObj.state === 'Suggested');
                                }).length;
                            }
                        }
                    }, {
                        field: "uri",
                        title: "Active Tags"
                    }, {
                        field: "fileType",
                        title: "Content Type"
                    }, {
                        field: "size",
                        title: "Size",
                        width: 80
                    }, {
                        field: "lastModificationTime",
                        title: "Last Modified"
                    }, {
                        field: "uid",
                        title: "<i class='glyphicon glyphicon-cog'></i>",
                        sortable: false,
                        width: 40
                    }],
                    rowTemplate: kendo.template($("#browseListGrid").html()),
                    dataSource: {
                        data: $scope.rowData
                    }
                });

It's extending a config object which reads:

grid: {
                    listDisplayDefaults: {
                        sortable: {
                            mode: "single",
                            allowUnsort: false
                        },
                        resizable: true,
                        selectable: "row",
                        pageable: {
                            pageSize: 25,
                            pageSizes: [25, 50, 100],
                            previousNext: true
                        },
                        // These need to be defined when you create the table.
                        columns: null,
                        rowTemplate: null,
                        dataSource: {
                            data: null
                        }
                    }
                }

I understand how you would translate the templating into the columns, but the big problem, is how do we take the functions that are run on the repeated TR and make sure they are run for each row? Can that happen?

Thanks for the response...really clarifies things.

-Joe

[JSON]

Dimo,

So everything is working well...one question remains (you can ignore my last post). How do I get the mouseenter and mouseleave events per row? I'm using Angular so I'm not sure how this happens if you can't override the TR. Would I use jQuery on dataBound? I need access to the dataItem to change the dataItem.$mouseover state.

-Joe

[Dimo]

Hello Joe,

If you will not be using a row template, then the mouseover and mouseleave event handlers must be attached with Javascript when the Grid widget is created.

http://docs.telerik.com/kendo-ui/AngularJS/global-events

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

<div kendo-grid="kendoGridWidget" options="gridOptions"></div>

$scope.$on("kendoWidgetCreated", function (event, widget) {
    if (widget === $scope.kendoGridWidget) {
        widget.tbody.on("mouseenter", "tr", function (e) {
            var dataItem = widget.dataItem($(e.target).closest("tr"));
        });
    }
});

Regards,
Dimo
Telerik

 

 

[JSON]

Dimo,

Thanks! I was trying the databound approach but it was a bit kludgy...

dataBound: function() {
                                    var dataSource = this.dataSource;

                                    this.element.on('mouseenter', 'table > tbody > tr', function(e) {
                                        dataSource.getByUid(e.currentTarget.dataset.uid).$mouseover = true;
                                        scope.$apply();
                                    });

                                    this.element.on('mouseleave', 'table > tbody > tr', function(e) {
                                        dataSource.getByUid(e.currentTarget.dataset.uid).$mouseover = false;
                                        scope.$apply();
                                    });
                                }

[Dimo]

Hi Joe,

The demonstrated implementation in dataBound will attach new duplicate event handlers on each rebind, which is not necessary, because the widget's element is not re-rendered on rebind. It would make sense to use such an approach if you attach the handlers to the table rows directly, because they are re-rendered, but in this case the handlers should also be removed regularly to prevent memory leaks.

Regards,
Dimo
Telerik