-
-
Notifications
You must be signed in to change notification settings - Fork 117
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Grid not resizing with re sizable div #175
Comments
First the As for the angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
}
closeSidebar() {
this.isSidebarOpen = false;
this.angularGrid.resizerService.resizeGrid();
}
openSidebar() {
this.isSidebarOpen = true;
this.angularGrid.resizerService.resizeGrid();
} |
I created a AutoResize - Wiki to provide information on the subject |
Hi , |
@ananddotnetdeveloper not sure I understand your question. The Open/Close sidebar are just custom methods in my project, I call them through row click, it has nothing to do with the grid, it's only to tell you that when you change the DOM programmatically (through the Component), you will have to call the resize yourself. Is that more clear? But if you wish to know how I do it, I got the idea from Atlassian JIRA by the way. I simply have 2 |
I had similar issues. I think we still have a defect in the resize code.
|
Hi , |
@amathew-statestreet-com I really don't know what your problem are guys, so unless I have a way to replicate, I can't help. At minimum put an animated gif (I use Share-X on Windows) or something that shows the problem, I can't see what you see. |
I have screen layout as in the attachment (info is masked due to privacy). layout has multiple resizable widgets which has grid in it. User can resize the widget by clicking on the double arrow icon on the top right corner of the widget. Since the grid is not contained in the widget/container (containerId in autorezize gridoption is id of div in the widget which resizes when the resize icon is clicked), I can scroll content of the widget and eventually grid disappear as the grid height is calculated more than the container height. this is fixed by doing 2 things.
|
So that is because you have 3 grids on the same screen I guess? For most users, using the The ResizerService would have this change let gridHeight = 0;
let gridOffsetTop = 0;
if (autoResizeOptions.calculateAvailableSizeBy === 'container') {
// use the container height to calculate grid height without any top offset
gridHeight = containerElm.height() || 0;
} else {
// use the browser window height with its top offset to calculate grid height
gridHeight = windowElm.height() || 0;
const coordOffsetTop = gridDomElm.offset();
gridOffsetTop = (coordOffsetTop !== undefined) ? coordOffsetTop.top : 0;
} and in your Grid Options, you would use it like so this.gridOptions = {
enableAutoResize: true,
autoResize: {
calculateAvailableSizeBy: 'container' // the 2 options would be 'container' | 'window'
}
} Not sure about the option flag name yet, |
thank you!! this would work. Which release will have this enhancement? |
Sometime this week |
@eyandow <angular-slickgrid gridId="grid1"
- style="width:100%;height:100%"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event)">
> What I can say here, is never apply height/width css styling directly on the |
@ghiscoding this.intervalResize = setInterval(()=>{
var div = document.getElementById(`${this.selector}div`);
this.angularGrid.resizerService.resizeGrid();
}, 250); So it is resizing every 250 milliseconds. These are my current grid options: this.gridOptions = {
enableAutoResize: true, // true by default
enableCellNavigation: true,
autoEdit: true, /* when enabled will automatically open the inlined editor as soon as there is a focus on the cell (can be combined with "enableCellNavigation: true"). */
autoHeight: false,
autoResize: {
containerId:`${this.selector}div`,
delay: 0,
sidePadding: 10,
bottomPadding: 10
},
enableFiltering: true,
enableRowDetailView: true,
rowDetailView: {
// We can load the "process" asynchronously in 3 different ways (aurelia-http-client, aurelia-fetch-client OR even Promise)
process: (item) => this.getDataForRowDetail(item),
// process: this.httpFetch.fetch(`api/item/${item.id}`),
// load only once and reuse the same item detail without calling process method
loadOnce: false,
// false by default, clicking anywhere on the row will open the detail view
// when set to false, only the "+" icon would open the row detail
// if you use editor or cell navigation you would want this flag set to false (default)
useRowClick: true,
// how many grid rows do we want to use for the row detail panel (this is only set once and will be used for all row detail)
// also note that the detail view adds an extra 1 row for padding purposes
// so if you choose 4 panelRows, the display will in fact use 5 rows
panelRows: this.detailViewRowCount,
// Preload View Template
// preloadComponent: RowDetailPreloadComponent,
// ViewModel Template to load when row detail data is ready
viewComponent: RowdetailViewComponent,
},
}; |
I don't know why my comments keep going above this as if it is old... interesting |
@eyandow
this.intervalResize = setInterval(()=>{
var div = document.getElementById(`${this.selector}div`);
this.angularGrid.resizerService.resizeGrid();
}, 250); Why are you using a Bottom line, don't try to play with the DOM yourself, you might be competing against the resize service and wonder why it doesn't work. |
@ghiscoding
This is my html in case it helps: <div id="{{selector}}div" dndDropzone (dndDrop)="onDrop($event)" [dndDisableIf]="isNotEditMode" style="width: 100%; height: 100%;">
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event)">
>
</angular-slickgrid>
</div> Nothing fancy being done other than the canvas it is on and the resizing. Is there a way I can have the grid adjust its size when its containing div is resized? I am not trying to delay the resize at all. |
@eyandow However, your problem is most likely that you don't have the required Container id (a fixed id) for the resize to work. You have a dynamic Container id this.gridOptions = {
autoResize: {
containerId: 'demo-container', // fixed string
sidePadding: 15
},
enableAutoResize: true,
} You could maybe try it dynamically with |
@ghiscoding <div id="{{selector}}div" dndDropzone (dndDrop)="onDrop($event)" [dndDisableIf]="isNotEditMode" style="width: 100%; height: 100%;">
<div id="grid-container" style="width:100%; height:100%;">
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event)">
>
</angular-slickgrid>
</div>
</div> grid-container being the id. I updated my grid options to look like this: autoResize: {
containerId:'grid-container',
delay: 0,
sidePadding: 10,
bottomPadding: 10
} and I am calling resizeGrid() on an interval. The same behavior where the width is adjusted correctly but the height is wrong is happening again. I don't think it is a problem with the containerID, I think it is a problem with the adjustment of the height of the grid. Is there a way I can manually set the height of the grid? |
@eyandow <angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
gridHeight="300"
gridWidth="800">
</angular-slickgrid> Your issue might be related to this new feature that I did not push yet, see this previous post and upcoming feature change in next post |
@ghiscoding <angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
gridHeight="height"
(onAngularGridCreated)="angularGridReady($event)">
> this.intervalResize = setInterval(()=>{
var div = document.getElementById(`${this.selector}div`);
this.height = `${div.offsetHeight}px`;
this.angularGrid.resizerService.resizeGrid();
}, 250); But this just causes the grid to not appear at all. Do I need to call another method to get re-render the grid when I update this.height object? |
Oh, and one more quick question while I have you. I am attempting to update the 'columnDefinitions' for the grid in a function. I want to do something like this: this.columnDefinitions = [
{ id:'name', name: 'Name' , field: "name", sortable: true },
{ id:'template', name: 'Template', field: "template", sortable: true},
{ id:'starttime', field: "starttime", name: 'StartTime', sortable: true },
{ id:'endtime', field: "endtime", name: 'EndTime', sortable: true }
]; Then, in my method I want to do this: this.columnDefinitions.push({id:'rpms', name: 'Rpms' , field: "rpms", sortable: true}) What method do I call to update the grid with those new columns? |
@eyandow This Example has the adding of column definition dynamically, the code is here. Please don't mix multiple questions in an issue, this thread starts to be way too long already and there already users in this thread. |
@ghiscoding |
@eyandow Also note that I have put a lot of effort in creating lots of Wikis and Examples to help everyone (including me) with setup, options and usage, if my Wikis are missing something, then editing or creating new Wikis is an option. Lastly, please note that I'm mostly the only person maintaining this lib and as most of us, I also happen to have a day job (meaning less time available). The good thing is that we use the lib on our projects at work, which helps with the lib. |
@amathew-statestreet-com Thanks |
sure. I will do a test today and will let you know if everything look ok. |
i had some issues when tried to build locally.. it was giving error or TranslateService. i will try tomorrow and will let you know. |
@amathew-statestreet-com
That might be your problem |
Tested. Everything looks fine.. On a second thought, do we need an extra flag in the autoresize option? Can't we do this logic if containerId in the autoresizeoption is empty/null? If I put a containerId in the autoresize option, my expectation is the grid will not go beyond the container and will be resized based on the container. |
That would only work if your container has a At the end of the day, I was ok to add a new flag because it wasn't affecting anyone since it was just another option, but I can't do what you suggested. |
feat(resizer): add calculateAvailableSizeBy container option, issue #175
@amathew-statestreet-com |
I'm submitting a bug report
Angular Version:
7.2.14
Library Version:
2.5.3
Browser:
Chrome 73.0.3683.103
Language:
TypeScript 3.1.1
Current behavior:
I have a re-sizable div that can be changed to nearly and height or width on the fly. When the div is adjusted, The grid does not stay inside the dimensions of the div. In fact, it doesn't do anything at all. These are my grid options
Setting autoHeight to True doesn't appear to change much
Expected/desired behavior:
![notresize](https://user-images.githubusercontent.com/50152763/57038805-d89a6700-6c28-11e9-8c14-2682eba3b095.png)
Setting the autoResize grid option with the correct container would correctly set the dimensions of the grid. I have searched the documentation on this and am unable to find anything that has been of use.
I have attached an image, if you are able to open those :)
The text was updated successfully, but these errors were encountered: