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");
});
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();
}
I have used rowExpander plugin in extjs grid on expand of each row 1 property grid with details of row selected and chart is rendered in the div of rowBodyTpl. I want to resize both the elements on window(browser) resize.
`
My parent grid is like this with rowexpander
var grid = Ext.create('Ext.app.CustomizedGridPanelv2', {
width: '100%',
overflowY: 'auto',
flex: 1,
store: this.gridStore,
plugins: [{
pluginId: 'expander',
ptype: 'rowexpander',
expandOnDblClick: false,
expandOnEnter: false,
rowBodyTpl: '<div id="{someId}' + this.id + '"></div>'
}],
viewConfig: {
stripeRows: true,
deferEmptyText: false,
emptyText: " No detailsfound."
},
columns: [{ columns needed}] });
On expand i create a panel and render to the div
grid.getView().addListener('expandbody', function(_rowNode, _rec, _expandedHTML) {
var panel = Ext.create('myPanel', {
srcPanel: me,
srcRecord: _rec,
srcDiv: _rec.get('someId') + me.id
});
panel.render(_rec.get('someId') + me.id);
grid.doLayout();
});
My panel will contain property grid and chart which are the items of extjs panel
`
my parent grid get resized on window resize but the expanded elements get truncated. Is there any way to resize them with browser. Thanks.
I think you can add resize event listener for parent component (grid in your case):
listeners: {
resize: function (grid) {
var plugin = grid.findPlugin('rowexpander');
if (plugin && plugin.recordsExpanded) {
for (var id in plugin.recordsExpanded) {
grid.getEl().down('.my_row_body#' + id).setWidth('100%');
}
}
}
}
But actually row body resize with grid out of the box, check this fiddle.
Also you can check this question.
If your issue relates to browser window resize, not just grid resize I think you can add resize event listener for entire window (not sure its good solution btw):
window.addEventListener('resize', function () {
myView.doLayout();
}, true);
I want to use Kendo Tabsrip with MVVM and show tabs on the left-side of the screen. In general, in non-MVVM environment tab positions is set like this:
$(document).ready(function () {
$("#tabstrip-left").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
}
However, I don't know how to set tabPosition attribute in the kendo MVVM. I have tried this in MVVM but it did not worked:
<div data-role="tabstrip"
data-tabPosition="left"
data-bind="events: { select: onSelect },
visible: isVisible">
....
</div>
Here is a MVVM example of the code that has this data-tabPosition attribute but tab position is still on the top
http://dojo.telerik.com/UDELe
You should use this way:
data-tab-position="left"
There is rule: data-some-variable parameter will produce javascript variable someVariable
I am using ui-grid to showing data in table. when i load the page and leave for few second and then click on the tab (which containing ui-grid), the ui-grid css break. it does not show width of ui-grid 100% of container.but when i load page and just click on tab (containg ui-grid). ui-grid is showing perfect, i mean width of that is 100% of container. I don't know what is the problem.this is the code, i am working on :
Js:
$scope.gridOptions= {
enableFiltering: true,
enableGridMenu : true,
enableRowSelection: true,
enableSelectAll: true,
selectionRowHeaderWidth: 50,
// rowHeight: 35,
// infiniteScrollRowsFromEnd: 50,
// infiniteScrollUp: true,
infiniteScrollDown: true,
columnDefs : [
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
{ displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
{ displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} }
]
}
Html:
<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll>
</div>
Note: ui-grid is inside Angular bootstrap Tab
and here is the snapshot of collapse grid :
Are you using an animation on page load - perhaps a tab or a modal? If so, then the usual workaround is the one we use in the modal tutorial: http://ui-grid.info/docs/#/tutorial/110_grid_in_modal
The problem is that the grid isn't responsive, it gets it's size on render. If you haven't given a fixed size it gets it from the container size. If your container is being animated at the time, the size may not be the real size.
$timeout(function () {
$scope.gridApi.core.handleWindowResize();
}, 500);
$scope.gridApi.core.refresh();
This did the job for me.
use $scope.gridApi.core.handleWindowResize(); this method in interval time to solve this problem
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
//$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter);
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
$scope.selectedUser = row.entity.dev_id;
console.log(row);
console.log(row.grid.selection.lastSelectedRow.isSelected);
/*$http.get('./api/ioni_developers/' + $scope.selectedUser).then(function(response) {
if(row.grid.selection.lastSelectedRow.isSelected === true){
$scope.data.dev_id = response.data.dev_id;
$scope.data.dev_name = response.data.dev_name;
$scope.data.dev_email = response.data.dev_email;
$scope.selected = false;
}else{
$scope.data.dev_id = '';
$scope.data.dev_name = '';
$scope.data.dev_email = '';
$scope.selected = true;
}
})*/
});
$scope.selected = true;
$interval( function() {
$scope.gridApi.core.handleWindowResize();
}, 500, 10);
}
The workaround for this is adding the width and rowHeight
for row and cell. As I indicated this is a workaround and I am sure there must other ways of doing this but this a quick fix and should get you what you at least going :)
$scope.gridOptions={
//set the row height to a fixed length
rowHeight: 80,
enableFiltering: true,
enableGridMenu : true,
enableRowSelection: true,
enableSelectAll: true,
selectionRowHeaderWidth: 50,
infiniteScrollDown: true,
columnDefs : [
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:100},
{ displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}, width:100},
{ displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} , width:100}
]}
With the suggested polling approach, the function is called after a specified wait, so each width change occurs suddenly. This results in substantial judder when the user quickly changes the table size.
A much better approach is to bind a resize handler to call a resize function when the viewport changes
angular.element($window).bind('resize', () => {
this.updateTableWidth();
});
My project uses a sidebar, so I account for the sidebar width or padding width (if sidebar is open or not), then just set a variable bound to an ng-style on my table wrapper
private updateTableWidth() {
let width = this.$window.innerWidth;
let modifier = (width >= 1280) ? this.sidebarWidth : this.paddingWidth;
this.tableWidth = (width - modifier) + 'px';
}
<div ng-style="{'width': ctrl.tableWidth}">
<div ui-grid></div> <!-- Whatever your grid is -->
</div>
This is what worked for me like a charm!
Add say ng-style="windowResize" to the ui grid markup in HTML template, and on $scope.windowResize, add width: 100% within onRegisterApi function within the scope.
So, basically onRegisterApi() is the default function from ui-grid that triggers when grid is actually drawn, and so basically we are conditionally adding width 100% to grid and making it responsive for all viewports.
Remove ui-grid-resize-columns from your HTML div tags.
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
}]
}