Grid Displays Incorrectly When JSON Data Replaced

[Mark]

I am loading a complex JSON object via AngularJS. The object contains several child collections that I want to display in Kendo UI grids. When I first load the page, the object doesn't exist at all. Periodically, the user can use a master list (not included here) to change the entire JSON object.

So far, I have the object loading correctly and displaying/working with AngularJS integration for the basic fields. The grid in question is configured to appear inside a Kendo TabStrip, as part of an AngularJS directive that displays my entire child form.

I currently define the grid (and tabStrip) in the Angular HTML template for the directive as:

<div class="detailTabStrip" kendo-tab-strip k-content-urls="[ null, null]">
    <!-- tab list -->
    <ul>
        <li class="k-state-active">Facility Types</li>
        <li>Notes</li>
    </ul>
    <div style="padding: 1em">
        <kendo-grid k-options="typeSnapshotGridOptions" k-scope-field="typeSnapshotGrid" style="height:99%;width:100%">

        </kendo-grid>
    </div>
    <div style="padding: 1em">
        TBD
    </div>
</div>

My controller supplies the grid options:

$scope.typeSnapshotGridOptions = {
    dataSource: {
        data: [],
        pageSize: 5,
    },
    sortable: true,
    groupable: false,
    resizable: true,
    useStaticHeaders: true,
    allowScroll: true,
    selectable: "row",
    pageable: {
        refresh: false,
        pageSizes: false,
        buttonCount: 5
    },
    autoSync: true,
    //dataBound: function () {
    //    this.expandRow(this.tbody.find("tr.k-master-row").first());
    //},
    columns: [(...omitted for brevity...)]
};

And, when the JSON object is changed, it reinitializes the grid:

$scope.$on('facilitySelected', function (ev, args) {
    kendo.ui.progress($('#facilityDetailSection'), true);
    $http.get('/FacAdmin/GetFacilityDetail/' + args.facilityID)
        .then(function (response) {
            $scope.facility = response.data;
            $scope.typeSnapshotGrid.dataSource.data($scope.facility.TypeSnapshots);
            kendo.ui.progress($('#facilityDetailSection'), false);
        });
});

 

As far as displaying data goes, this all works. The grid starts off invisible (because I have an ng-show vanishing the entire pane if there is no data), and it appears and shows the correct child rows each time I load a new complex JSON object.

 

However, the appearance is horrible. The grid appears about 100px tall (despite settings for 100% height and width, and use of useStaticHeaders and allowScroll) the very first time I load a JSON collection into it. On the second and subsequent loads, the grid appears the correct size and is almost right... the last row is missing the bottom border.

 

I have tried:

• * refresh()
• * dataSource.sync()
• * dataSource.read()
• * replacing the datasource instead of replacing the just the data

None of these had the slightest effect.

I am testing in Chrome and Chrome's debugger reports no JS errors. My Telerik version was installed from telerik.kendoui.professional.2016.2.714.commercial, which I assume also represents the version number.

Attached: Screenshot of grid appearance on first load of the child collection (_1) and on subsequent loads (_2).

Please suggest additional possible fixes.

[Dimiter Topalov]

Hi Mark,

The scenario needs a call to the Grid resize() method, so that the Grid assumes the height of its containing tab, as demonstrated in the following how-to article from our documentation:

http://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/initiliaze-grid-in-tabstrip

Further information about setting 100% height is available in the following section of our documentation:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#set-100-height-and-auto-resize

The last Grid row does not have bottom border by default to avoid duplicate borders when the Grid rows are enough to fill the available space (the typical scenario). You can display the bottom border of the Grid contents table via CSS, but please mind that when there are enough rows in the table, this will lead to duplicate border at the bottom.

I have modified the example to illustrate both situations:

http://dojo.telerik.com/IHeGe

http://dojo.telerik.com/IHeGe/2

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Mark]

Dimiter,

First, thanks for the clarification about the bottom border.

Second... re the sizing, I think you've identified the right problem, but I am having trouble getting this to work within an AngularJS directive. I can probably manage it by mixing JQuery with Angular, but I'm reluctant to do that. Do you have any examples, or can you create one, in which the tabstrip and grid are both defined by AngularJS attributes, including k-scope-field, and in which the "one()" event handling is set up inside an Angular controller?

[Mark]

Dimiter,

I was able to fix it by adding this link function to the directive:

            link: function (scope, elem, attr) {
                scope.typeSnapshotGrid.resize();
            },

This sizes the grid after the directive has been expanded, which apparently is the right place.

So my problem is solved -- thanks!