How to set infinite scroll/Pagination in the details grid. I'm using server side model for master and want to use infinite model for details. How to setup details grid detailCellRendererParams with infinite scroll row Data
Define in detailGridOptions infinite row model type & its properties:
detailGridOptions: {
...
rowModelType: 'infinite',
// enable pagination
pagination: true,
// fetch 15 rows per at a time
cacheBlockSize: 15,
// display 10 lines per page
paginationPageSize: 10,
// how many rows to seek ahead when unknown data size.
cacheOverflowSize: 2,
// how many concurrent data requests are allowed.
// default is 2, so server is only ever hit with 2 concurrent requests.
maxConcurrentDatasourceRequests: 2,
// how many rows to initially allow scrolling to in the grid.
infiniteInitialRowCount: 1,
// how many pages to hold in the cache.
maxBlocksInCache: 2
}
The infiniteDatasource presents the way you can retrieve the data for detail part:
getDetailRowData: (params) => {
//Get grid api regarding current row
var detailGrid = gridOptions.api.getDetailGridInfo(params.node.id);
//Simulation of server
var server = new FakeServer(params.data.callRecords);
//Preparation of data
var datasource = new infiniteDatasource(server, params);
detailGrid.api.setDatasource(datasource);
}
Please note that regarding the documantation:
If you are an enterprise user you should consider using the Server-side row model instead of the infinite row model. It offers the same functionality with many more features.
Setting of Server-side row model should be similar to Infinite one.
Working example
Related
I am using ag-grid react with server side pagination. When I initially load the grid with rows I have the total count of rows(received from backend) with which ag-grid calculates the pagination data. My page size is 100 and I have about 1000 rows (~ 11 pages)
When I add a row in the grid, I am setting the datasource again using gridApi. In below snippet newRows is page 1 : 100 rows plus the newRow
const updatedDataSource = (newRows) => {
return {
getRows: (params) => {
params.successCallback(newRows);
},
};
};
const ds = updatedDataSource(newRows)
gridApi.setServerSideDatasource(ds)
Is it possible to get the total row count from the params in getRows or from gridApi so that I can set the total in params.successCallback(..) ? When checking the API reference , I can see the pagination related apis are available , total number of pages , last page , first page , getDisplayedRowCount() etc but not the total row count.
Thanks.
Some details which I missed in my question:
I am using Partial RowStore.
After reading the documentation, for Partial row store operations like Add/Delete needs to be performed outside the grid and the grid needs to be refreshed.
Ag grid rowstore
I have an ag-grid table (Enterprise version: 22.1.0) which is grouped using autoGroupColumnDef property. The grouping is dependent on the table's data and the data loads on a button click. I need to update the autoGroupColumnDef property's field name (_this.colName in the below code) after the page is loaded, right before loading the data.
Table's grid options:
_this.gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true
},
columnDefs: _this.columnDefs,
rowData: [],
enableRangeSelection: true,
autoGroupColumnDef: {
headerName: "Sector",
field: _this.colName,
cellRendererParams: {
suppressCount: true
},
tooltipValueGetter: function(params) {
return _this.tooltipVal
}
},
suppressAggFuncInHeader: true,
enableBrowserTooltips: true
};
I update the variable _this.colName before setting data to the grid. I have tried the following options and none of them worked for me:
_this.gridOptions.api.refreshClientSideRowModel('group');
_this.gridOptions.api.refreshCells();
_this.gridOptions.autoGroupColumnDef.field = 'Column's Name'
Any help would be appreciated!
There is a good workaround for this. You can set autoGroupColumnDef, then remove and readd all row groupings. It will redraw the group column with the new name.
gridOptions.autoGroupColumnDef.headerName = 'new_name';
// Get current groupings
var colstate = gridOptions.columnApi.getColumnState();
var colstateclear = gridOptions.columnApi.getColumnState();
// Clear groupings
var x = 0, xcount = colstateclear.length;
while ( x < xcount ) {
colstateclear[x].rowGroupIndex = null;
x += 1;
}
gridOptions.columnApi.setColumnState(colstateclear);
// Reset groupings
gridOptions.columnApi.setColumnState(colstate);
I contacted ag-grid support and apparently this is a bug and they have it in their backlog with no ETA available for now. A workaround they provided was to use: https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup.
This is not really a good workaround because the grouped columns are separated and makes the page feel cramped. Also there are some look and feel issues that keep popping up (Eg: empty space added before each column that increases with each grouped column. ie second column has 1 cm added before it, third column has 2 cm added before it and so on. I guess this was added to bring the grouped look in the group column but you wouldn't expect this behavior when the columns are separated.)
ag-grid's backlog ID for the ticket: AG-3359 - Allow the autoGroupColumn to be used in the API calls for columns, at the moment there is no way to dynamically change it after creation. (ie, setColumnDefs …)
Link to track the progress: https://www.ag-grid.com/ag-grid-pipeline/
there is a straight forward method to update the autoGroupColumnDef object and its properties with setAutoGroupColumnDef
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
minWidth: 500
})
if any problems with the spread operator,
do it manually:
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
// ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
headerName: this.gridOptions.autoGroupColumnDef.headerName,
minWidth: 500
})
and one more thing, add this if you have any visual bugs, like: header row gets resized but bellow rows stays the same as previus state, so the refresh of model is required:
this.gridOptions.api.refreshClientSideRowModel();
this refresh is not ideal solution, because it refreshes everything, so you will loose expanded levels for example, still no clue how to preserve all settings.
https://angulargrid.com/angular-grid/client-side-model/#refreshing-the-client-side-model
and best solution for now is tu use:
this.gridOptions.api.redrawRows();
it keeps the rows expanded if are, checkbox selected if is.
When we give service data as null to extjs with pagination,then it is disabling the pagination tool bar.
We have some requirement like we have a filter button on enabling we will show filtered data at first and remaining pages as empty. Total count will be the same.
Example:
If we have 1000 records as total and the page size is 50, then we have total pages size will be 20. If we enable filter then we will get 500 records which are filtered, then, in that case, we will show total records as 1000 (Actual size without filter) and from 11 page onwards we will show empty pages by returning empty records.
Issue:
When we return empty records to Extjs,it is disabling the pagination, we want 'next page' to be disabled but we need ' the previous page' button to be enabled
Is it possible in Extjs?
Do you have any idea why it is disabling the pagination tool bar?
So, this is a FIDDLE
SERVER: I'm using some free service to load data, where i have 10 records(5 per page) but i send total: 15 from server to force toolbar displaying 3 pages. On the server, in query if page === 3 i send empty array. Here's the CODE
CLIENT: In pagination toolbar i define change event listener, where i make sure buttons will be always enabled. Also make input, for page number, enabled + correct, with total page counter.
listeners: {
change: function (cmp, config) {
var store = cmp.up('grid').getStore();
var numb = cmp.getComponent('inputItem');
numb.setDisabled(false);
numb.setValue(store.currentPage);
var text = cmp.getComponent('afterTextItem');
text.setHtml('of ' + (store.totalCount / store.pageSize));
cmp.setChildDisabled('#first', false);
cmp.setChildDisabled('#prev', false);
cmp.setChildDisabled('#next', false);
cmp.setChildDisabled('#last', false);
cmp.setChildDisabled('#refresh', false);
}
}
When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).
Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?
After I reload the page (so the new row is not new anymore), everything works as expected.
Edit: Here's the code for adding rows:
var rec = new store.recordType({
test: 'test'
});
store.add(rec);
Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selector, no?)
(Note, correct as ExtJS 3.3.1)
First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-
Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
clearSelections : function(fast){
if(this.isLocked()){
return;
}
if(fast !== true){
var ds = this.grid.store,
s = this.selections;
s.each(function(r){
//Hack, ds.indexOfId(r.id) is not correct.
//Inherited problem from Store.reader.realize function
this.deselectRow(ds.indexOf(r));
//this.deselectRow(ds.indexOfId(r.id));
}, this);
s.clear();
}else{
this.selections.clear();
}
this.last = false;
}
});
And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.
And this is why we can't find the id:-
http://imageshack.us/photo/my-images/864/ssstore.gif/
Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-
// remap record ids in MixedCollection after records have been realized. #see Store#onCreateRecords, #see DataReader#realize
reMap : function(record) {
if (Ext.isArray(record)) {
for (var i = 0, len = record.length; i < len; i++) {
this.reMap(record[i]);
}
} else {
delete this.data.map[record._phid];
this.data.map[record.id] = record;
var index = this.data.keys.indexOf(record._phid);
this.data.keys.splice(index, 1, record.id);
delete record._phid;
}
}
Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords
....
this.reader.realize(rs, data);
this.reMap(rs);
....
It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.
I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem
Cheers
Lionel
Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.
Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
Update:
Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:
grid.getStore().reload();
I have an ExtJS GridPanel with a store and a paging toolbar at the bottom. I can manually set the start page through the browser using:
www.someurl.com/page/7
This will load the data store with page 7 correctly. However, the paging toolbar does not update the page number from the store (it still shows 1). I was under the impression that by changing the page of the store also changes the page in the paging toolbar, but this is not the case. Here is some example code:
var _store = new Ext.data.Store({
id : 'store_id',
remoteSort : true,
autoDestroy : true,
restful : true,
proxy : _proxy,
reader : _reader,
writer : _writer
});
var _pagingToolbar = new Ext.PagingToolbar({
displayInfo : true,
pageSize : 20,
store : _store
});
_I.grid = new Ext.ux.GridPanel({
id : _I.options.id+'_grid',
title : _I.options.title,
store : _store,
bbar : _pagingToolbar
});
_I.options.page = 7; //start store on page 7
_I.grid.render('somediv');
_store.load({params:{start:_I.options.page, limit:20, sort:'id', dir:'ASC'}});
Since the start page is set to 7, the data that loads in the store is correct, however, the page in the paging toolbar reads 2. I have tried manually setting the page with
_pagingToolbar.changePage(20); // should set page to 20
I get the same result, the data store loads up the correct page, however the toolbar text does not change. Is the order wrong? I also tried loading the store before the grid is rendered, to no avail, with same result.
As the store and the paging bar are inhernatly linked, you should simply be able to use the .changePage(n) method to change the page and automatically adjust the content of the store. You shouldnt need to also code the store with a recordset update. Also, are you 100% sure the store is displaying the correct records for page '7'?
What pagination info are you returning from the server side? PagingToolbar just takes that info from the store.
Could you please show your reader and the part of server response showing pagination data?