If I have grid column in a ext grid, sub columns(
Email and phone columns in the demo) does not match up.
Here is the demo : https://fiddle.sencha.com/#fiddle/5ih
I have played with the width/minWidth etc but doesn't seem to work.
But if I make the grid column less wide sub columns seems to fit perfectly.
I thin tha maybe the problem is that you must give the minWidth to fix the header,
and add the flex property to each column.
Here is the fork of your fiddle with the change I say.
minWidth : 500
flex : 1
https://fiddle.sencha.com/#fiddle/5iq
If you would like to use the sub columns like the others, for example you have 2 columns which has fixed width, and the grouped columns should behave like columns with flex (auto width), you need to write an own function to do this resize.
It's only two lines: sencha example
Description: you need to add a resize event listener to grid and inside the function resize the sub column(s)
Grid listener:
listeners: {
resize: function(grid) {
// you need to add and itemId for the sub columns parent
var subCols = grid.getView().getHeaderCt().child('#sub-cols');
// 200 = sum of the fixed width of columns
subCols.setWidth(grid.getWidth() - 200);
}
}
Grid columns:
{
text: 'sub columns',
itemId: 'sub-cols',
columns: [{
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}]
}
Related
I have upgraded my ag-grid version from 7.2.0 to v14.2.0. When I use sizeColumnsToFit() api with onGridReady or onGridSizeChanged event, it works but it keeps unnecessary horizontal scroll, may be due to wrong calculation of grid width.
This issue(?) can be seen at official example for ag-grid as well here,
https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1
With the previous version, this works completely fine without any horizontal scroll.
When I manually call $scope.gridOptions.api.sizeColumnsToFit(), then it removes the horizontal scroll.
Here is my gridOptions:
$scope.ag_grid_options = {
headerHeight: 50,
rowHeight: 50,
//rowModelType: 'virtual',
rowModelType: 'infinite',
rowBuffer: 0,
cacheOverflowSize: 1,
infiniteInitialRowCount: 1,
cacheBlockSize: 50,
paginationPageSize: 50,
//virtualPaging: true,
enableServerSideSorting: true,
enableSorting: false,
enableColResize: true,
angularCompileRows: true,
onGridSizeChanged: function (param) {
$scope.ag_grid_options.api.doLayout();
$scope.ag_grid_options.api.sizeColumnsToFit();
},
columnDefs: grid_column_definitions
};
I know I can use property suppressHorizontalScroll= true. But I do not want to use this because with it, scroll will not appear when user will resize the column manually.
I ran into the same/similar issue. The root problem was that I resized my columns before a vertical scrollbar was added. To get around this, resize AFTER adding the rows. Even then it may not work without a timeout
this.http.get('someEndPoint').subscribe(rows => {
this.rowData = rows;
setTimeout(()=>{params.api.sizeColumnsToFit()}, 50);
});
This may be a different symptom than what the OP saw, but could be useful for others.
It's no a bug, its a feature. A scrollbar appears if the total width count of all columns is bigger than your wrapper. You should change minWidth / maxWidth property of headerFields and you will be fine.
var columnDefs = [
{headerName: 'Athlete', field: 'athlete', minWidth: 150},
{headerName: 'Age', field: 'age', minWidth: 50},
{headerName: 'Country', field: 'country', minWidth: 120},
{headerName: 'Year', field: 'year', minWidth: 90},
{headerName: 'Date', field: 'date', minWidth: 110}
];
Side note:
If the grid data is changed due to scope changes or not initial defined you need to recall sizeColumnsToFit() in a new diggest circle like setTimeout(() => {this.gridApi.sizeColumnsToFit();});.
the best solution for me is calling api.sizeColumnsToFit() on modelUpdated event
no need to setTimeout and set width
the example code:
<ag-grid-angular
[defaultColDef]="defaultColumnDefs"
[columnDefs]="columnDefs"
[rowData]="data"
(gridReady)="onGridReady($event)"
(modelUpdated)="onModelUpdated()"
>
</ag-grid-angular>
in onModelUpdated() should call api.sizeColumnsToFit
private gridApi;
onGridReady(params): void {
this.gridApi = params.api;
}
onModelUpdated(): void {
this.sizeToFit();
}
sizeToFit(): void {
this.gridApi.sizeColumnsToFit();
}
A bit late, but for those who is looking for completely disable the horizontal scroll or adjust the horizontal scroll's height (even setting them to 0). You have to also set the scrollbarWidth.
gridOptions: {
suppressHorizontalScroll: true,
scrollbarWidth: 0
}
You can take a look at AgGrid's source code on how they deal with horizontal scroll here:
https://github.com/ag-grid/ag-grid/blob/996ffcdcb828ffa3448d57fa919feb9eb465df15/community-modules/core/src/ts/gridPanel/gridPanel.ts#L889
Another possible solution, just presented to me by a collegue:
Within the column defs you can set the width for each column by calculating the the client width, and then dividing it by the number of columns:
width: (document.documentElement.clientWidth - 40) / (this.numColumns)
In this case, 40 is the sum of the padding on either side of the grid (20 left + 20 right).
This issue remains in v22 and the above solutions didn't seem ideal. The best fix I found was to call sizeColumnsToFit in the onModelUpdated event handler. See https://github.com/ag-grid/ag-grid/issues/2310.
for large scroll appearing in scrollbar, we need to make use of onGridReady event on the grid, which gives gridApi as parameter in callback function and make use of sizeColumnsToFit function to keep the resizing work.
If the scroll length is small, it is appearing because of the width introduced for the vertical sidebar (due to the change in vertical height of the grid).
My Solution:
Locate the element's selector which is causing vertical scrollbar to appear.
It will have overflow/overflow-y to "auto/scroll". Making it to overflow/overflow-y to "overlay" will resolve your problem.
This worked for me everywhere.
This approach is for Angular 2+, use sizeColumnsToFit() inside firstDataRendered event instead of gridReady or gridSizeChanged event it will remove the horizontal scrollbar.
<ag-grid-angular
[defaultColDef]="defaultColumnDefs"
[columnDefs]="columnDefs"
[rowData]="data"
(gridReady)="onGridReady($event)"
(firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
private gridApi;
onGridReady(params): void {
this.gridApi = params.api;
}
onFirstDataRendered(): void {
this.gridApi.sizeColumnsToFit();
}
There are 3 divs, each having a panel in them. Initially, only 2 panels are displayed and the other is hidden. On clicking 'Update' in one of the panels, these 2 div are hidden and the 3rd one is shown.
There is a set of buttons in the 3rd panel. The below is the code for it
buttons: [{
xtype: 'checkbox', id:'usapCheck', boxLabel: 'I Accept', allowBlank: false, margin: '1 1 4 230'
},{
buttonAlign: 'right',margin:'0 0 0 3.6',text: 'Save',width: '30',iconCls: 'save',
handler: function() {
//code to save form details
}
},{
buttonAlign: 'right',margin:'1 1 0 3.6',text: 'Clear',width: '30',iconCls: 'clear',
handler: function() {
//code to clear the fields
}
},{
buttonAlign: 'right',margin:'1 1 1 1.6',text: 'Back',width: '30',iconCls: 'back',
handler: function() {
//code to hide this div and show other divs.
}
}]
When I click the back button, the 3rd panel is hidden and displays the 2 other grids in the same js. But when I again click the 'update' button, to display the 3rd panel, the alignment of these buttons change.
So, on hiding and showing the panels, the alignment changes in a strange way.
I am totally lost, without any clue. Can anyone please help me?
Off the top of my head:
You shouldn't use buttonAlign: 'right' there and your width is set as a String for all your buttons, using ExtJS, when you specify your width value as String it works like CSS values, so you have to pick:
width: 30 // 30 pixels
// or
width: '30px' // 30 pixels
Correct this and your buttons shouldnt look messed up anymore.
I have 2 tables rendered with kendo grid, these are scrollable. I have code which needs to be executed whenever the scroll happens in any of the table.
I've tried
jQuery("#grid").kendoGrid({
dataSource : dataSource,
columns : [{
field : 'name',
title : 'Name',
width : '160px'
}, {
field : 'dataTypeId.name',
title : 'Type',
width : '70px'
}],
height : 270,
scrollable : true,
AfterScroll: function() {
console.log("scrolled");
},
rowTemplate : kendo.template(jQuery("#custom-input-grid-rows").html()),
}).data("kendoGrid");
I tried to put some callbacks like onScroll, AfterScroll but they did not work for me.
How do I get a callback when scrolling happens in the kendo grid?
Hi got the same question today, and fixed it this way:
Attach the jQuery event .scroll() right after your Kendo Grid was initialized like:
$('#GridName .k-grid-content').scroll(function () {
alert('I am scrolling ...');
});
The above didn't work for me either, but led me along the correct lines. The k-virtual-scrollable-wrap class handles the the scrollable part of the grid (eg when you have frozen columns enabled), so try this code instead:
$('.k-virtual-scrollable-wrap').scroll(function () {
console.log("I am scrolling");
});
I am trying to create a Extjs Grid with no vertical and horizontal scroll bars. it means that the grid should expand to infinity in both direction.
here is my code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
//Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var cols = 50;
var colsData = [];
var fields = [];
for(var i=1;i<cols;i++){
colsData.push(
{
text : 'COLUMN - ' + i,
//flex : 1,
width : 120,
sortable : true,
dataIndex: 'COL'+i
});
fields.push(
{name: 'COL'+i, type: 'int'}
);
}
var myData = [];
//create data
for(var i=1;i<500; i++){
var subData = [];
for(var j=1;j<cols; j++){
subData.push(Math.floor((Math.random()*10000)+1));
}
myData.push(subData);
}
function change(val) {
return val;
}
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields,
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
//stateId: 'stateGrid',
autoHeight: true,
autoWidth: true,
autoScroll: false,
//containerScroll: false,
columns: colsData,
//height: 100,
//width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
//stripeRows: false,
//forceFit: false
}
});
});
i'm rendering my grid to a div element so practically i don't use any layout or etc.
<div id="grid-example" class="myDiv"></div>
and the styles:
<style type="text/css">
body{
overflow: visible;
}
.myDiv{
display: block;
/*float: left;*/
overflow: visible;
}
</style>
Here is my browser's screen shot that shows the vertical scroll bar [just like I expected].
THE PROBLEM IS
There is NO horizontal scroll bar and part of columns just cut off from page and there is no way to see the data they are presenting.
i can see that extjs tries to calculate the height and the width for the grids. in case of height it's correct but for width it's not, the calculated width is equals to my browser's width, not to the sum of columns which are in the grid.
I appreciate any suggestion or words from your side, thank you.
any one can help me with that?
I solved this problem by registering a numbers of listeners on viewConfig.viewready, grid.columnresize and etc. So we calculate the total width of columns each time we render a grid or resize/change a visibility of a column. consequently, I expand the grid to the calculated size. something like:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
autoHeight: true,
columns: colsData,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
listeners: {
viewready:function(){
var totalWidth = 0;
Ext.each(grid.columns, function(column, index) {
if (column.isHidden() == false)
totalWidth += column.width;
});
//console.log("Width: " + totalWidth);
grid.setWidth(totalWidth);
}
}
}
,listeners: {
columnresize: function(){
grid.viewConfig.listeners.viewready();
},
columnhide: function(){
grid.viewConfig.listeners.viewready();
},
columnshow: function(){
grid.viewConfig.listeners.viewready();
}
}
});
});
Perhaps you are loking for autoScroll? Don't know what kind of behaviour you want from the question.
The question remains, do you want the grid to have scrollbars, or do you want the div to have scrollbars, or do you want the browser to have scrollbars?
The div is a block level element in HTML. It will automatically fill the browser's width, no more, no less in your example. ExtJS will then fill that div with the grid, making the grid as large as the browser's window, no more. Since you do not allow the grid to have scrollbars, the excess columns are cut off.
If you want the grid to have scrollbars, use autoScroll set to true.
If you want the div to scroll instead, set overflow: auto instead of visible on .myDiv. You would have to specify width on the grid itself too, and make it as wide as the width of the columns.
I recommend letting ExtJS handle the scrollbar as ExtJS can use more efficient rendering if you let it (only render columns and rows that are actually visible).
I have a panel with an accordian layout containing multiple (max. 10) property grids.
This works fine when there are a couple of property grid items and there is space in the panel to expand them. However if the panel is full of collapsed grids then they cannot be expanded. Manually increasing the height of the panel allows them to be expanded.
autoScroll is enabled. If I set autoHeight true the panel sizes to fit all items collapsed but wont resize to expand one.
Hopefully someone can tell me what I am doing wrong.
I am working with Ext 3.4.0 due to compatibility with GeoExt.
Thanks
Tom
Example showing 2 property grids expanding correctly
http://s9.postimg.org/ex4e6nxwv/working.jpg)
Example showing 10 property grids that wont expand
http://s13.postimg.org/r06ylu2h3/not.jpg
Code for creating panel and propertygrids:
items.push({
xtype: "propertygrid",
title: title,
source: feature.attributes,
sorting: false
});
if (items.length > 0) {
new GeoExt.Popup({
title: "Feature Info - (" + items.length + " Results)" + maxFeatures,
width: 400,
height: 300,
layout: "accordion",
autoScroll: true,
map: Map,
location: evt.xy,
items: items
}).show();
}
I'm not sure if there is a way to get it to do what you want as it is without eliminating the height parameter alltogether which will obviously mean it will be taller.
If you want to keep it at that height, you can just throw it inside another panel:
var expandos = Ext.create('Ext.panel.Panel', {
width: 300,
title: 'Accordion with ' + grids.length + ' panels',
layout: 'accordion',
resizable: true,
items: grids
});
Ext.create('Ext.panel.Panel', {
renderTo: 'center_div',
height:400,
width:315,
autoScroll: true,
items:expandos
});
http://jsfiddle.net/SFMpd/2/