Knockout-Contrib / Knockout-Contrib/KoGrid

Plugin for automatic height resizing

Open
#275 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
277
Forks
124
PR merge metrics
No merged PRs in 30d

Description

The following is a rough job of porting the angular ng-grid plugin (https://github.com/angular-ui/ng-grid/blob/master/plugins/ng-grid-flexible-height.js).

```
koGridOptions: {
data: dataObservable,
columnDefs: [{ field: 'name', displayName: 'Name', width: 200 }],
plugins: [new ngGridFlexibleHeightPlugin()]
}

function ngGridFlexibleHeightPlugin(opts) {
var self = this;
self.grid = null;
self.baseViewportHeight = null;
self.onGridInit = function (grid) {
self.domUtilityService = kg.domUtilityService;
self.grid = grid;
var recalcHeightForData = function () { setTimeout(innerRecalcForData, 1); };
var innerRecalcForData = function () {
var gridId = self.grid.gridId;
var footerPanelSel = '.' + gridId + ' .kgFooterPanel';
var extraHeight = self.grid.$topPanel.height() + $(footerPanelSel).height();
//'naturalHeight' will be the height required to fit all the rows.
var naturalHeight = self.grid.$canvas.height() + 1;
if (opts != null) {
if (opts.minHeight != null && (naturalHeight + extraHeight) < opts.minHeight) {
naturalHeight = opts.minHeight - extraHeight - 2;
}
}
var newViewportHeight = naturalHeight + 2;
if (!self.baseViewportHeight || self.baseViewportHeight !== newViewportHeight) {
//self.grid.$viewport.css('height', newViewportHeight + 'px');
//self.grid.$root.css('height', (newViewportHeight + extraHeight) + 'px');
//grid.$root.height(grid.$root.height() - 100);
grid.$root.height(newViewportHeight + extraHeight);
self.baseViewportHeight = newViewportHeight;
//self.domUtilityService.RebuildGrid(self.scope, self.grid);
self.domUtilityService.UpdateGridLayout(grid);
}
};
//self.scope.catHashKeys = function () {
// var hash = '',
// idx;
// for (idx in self.scope.renderedRows) {
// hash += self.scope.renderedRows[idx].$$hashKey;
// }
// return hash;
//};
//self.scope.$watch('catHashKeys()', innerRecalcForData);
//self.scope.$watch(self.grid.config.data, recalcHeightForData);
self.grid.config.data.subscribe(recalcHeightForData);
};
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the proposed plugin with the referenced ng-grid-flexible-height.js implementation. Trace the onGridInit hook and the koGridOptions plugins configuration, then verify that subscribing to grid.config.data resizes the grid for its contents while respecting the optional minimum height.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.