Knockout-Contrib / Knockout-Contrib/KoGrid
Plugin for automatic height resizing
- 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