I have a problem in removing the records.
I have a grid with pages if i select one record in the first page and change the page and try to remove the record it is not working . (Not delete the record).
Whats i have to do?
Is a limitation of grid?
Is a bug?
Thanks in advanced.
var aRecords = this.getGridV().getSelectionModel().getSelection();
if (aRecords.length>0) {
var store = this.getGridStoreStore();
store.suspendEvents();
store.remove(aRecords);
store.resumeEvents();
store.sync();
store.load();
}
When you use a paged grid, the store is filtered and does not contain the records outside of the current page. Therefore, if you select a row, by the time you change the page, that row is no longer in the store and is no longer selected.
That's not a bug, it is a limitation due to the whole concept. You cannot select a row that is not displayed.
You could use infinite scrolling using BufferedRenderer, this will allow you to select any row, scroll away and keep it selected.
Related
I'm using mui-datatable to implement table in my app. I've every feature I need up and running, and I'm using server side data and pagination.
The problem is that I need to persist selection of rows when the user change the current page.
I can store the ids of the rows that where selected in an external array using onRowSelected.. but I'm not sure how to make the table render those rows as selected when user changes the page.
Bare in mind i'm using server side data, so the idea would be that in page 1, when I select row 1, a take the id of that record and add it to the array of selected ids. Then I need to check if the ids of rows that are currently displayed in the page are included in the selected array, and if so then check it as selected in the table. That way when I change the page, the same logic would run and all rows would be cleared since none of the row in the new page are selected.. I think you get the point.
I dont know where should i check if the row's id is included y my selected array and if so, how to check it in the datatable.
Thanks in advance for the help.
You can wrap your entire MUI datatable in another component which maintains the state of all selected rows
I'm stupid... I just needed some sleep xD
My problem was solved once I realized that I just needed to pass the rowsSelected option like this:
rowsSelected: this.state.pictures.filter(p=>this.state.selectedIds.includes(p.id)).map((p,i)=>i)
where this.state.picture will change when the user changes the page and rowsSelected will also changed.
Never mind... It's a rookie mistake.
In my application I've a grid with buffered store.
On click of row of grid, alert will be shown.
I want to add a new row to grid i.e., add a new record to store (should not be saved in back-end until user peforms some save action). The same added record can also be deleted if user chooses to do so.
Currently tried the below approach..
var grid = Ext.ComponentQuery.query('grid')[0],
gridStore= grid.getStore();
var bufferedStoreMap = gridStore.getData().map[currentPage]; //currentPage = 1
var mapVal = bufferedStoreMap.value;
gridStore.totalCount++;
mapVal.unshift(Ext.create('Ext.data.Model',{name:'test'}));
grid.getView().refresh();
With the above code new record is added to store, but grid events like click are not working.
Getting the below error.
Any idea on achieving this??
Any help would be really appreciated.
The buffered store doesn't support local modifications, it's essentially a read only data source once the data is loaded via the server.
I want to how can we undo the specific being added in the grid before actually saving it .
Please have a look at this
I 've added two rows but since for eg: for some validations failures the second row is not valid so I want to undo the second row but keeping the first dirty for the saving of that data to the db.
What i was trying is I was pushing all the dirty rows to an array and then updating in the database. But I don't know how to undo or delete the invalid row being added. Without reloading the grid
Example for reference
Live example
You shouldn't have to push the rows into an array for synchronization. What you really want to use is the methods available on the underlying store and/or model.
To reject the second model and update all other ones in the database, two lines suffice. The exact code may differ depending on the Ext version; in ExtJS 6.2.1, it would be:
grid.getStore().getAt(1).reject() (or .drop())
grid.getStore().sync()
while the generalized approach would be to reject all invalid models:
var store = grid.getStore(),
invalidRecords = store.query(function(record) {
return !record.getValidation().isValid();
});
invalidRecords.each(function(record) {
record.reject();
})
store.sync();
I have some fairly large data (~100k rows) with filtering on every column and paging enabled. It's all displayed and manipulated client side.
I'd like to be able to export all the filtered results, not just what's displayed in the first page.
The workaround would be to change the pagination size to something larger than the resulting filtered result, but that just seems cumbersome. Is there a better way to do this?
Someone had asked this question in https://github.com/angular-ui/ui-grid/issues/3954 but never got an answer.
There isn't really a way to do it. Export visible exports the currently visible rows. Pagination works by changing which rows are visible - so the visible rows are those on the current page. Export all data works by exporting all the data whether it's visible or not, so it exports rows that have been filtered out.
In theory this could be implemented, we'd need to reinstitute the "invisibleReason" flag which I think is still mostly implemented but not used in the code, and then set the visibleReason to "pagination" on those rows that the pagination feature makes invisible. We could then have exporter manually process the rows and include those for which the only invisibleReason was pagination.
It's quite a lot of fiddling around, but it's plausible someone could submit a PR with that functionality.
I think this should work.
onRegisterApi: function (gridApi) {
gridApi.core.on.rowsVisibleChanged($scope, function () {
// match export enabled per row to visible property. This is in order to force export only of filtered data.
gridApi.grid.rows.forEach(function (row) {
row.exporterEnableExporting = row.visible;
});
});
}
I reconfigure my store and add new fields to it and then load its corresponding grid. I need to edit grid cells and save the whole modified grid rows in one step at the end.
The problem is that when I call this code, I get all rows in the grid even if I haven't edited any cell or row in the grid maybe because I have reconfigured the store.
But in fact nothing has been changed and new fields in the store are just for view.
How can I get the rows which their cell values has been changed ?
// returns all store records
Ext.ComponentQuery.query("documentgrid")[0].getStore().getModifiedRecords();
Your issue is not described quite clearly.
With a little guess,give you this answer,I hope it would help.
The getModifiedRecords() is not for that use.
Subscribe the store's "update" event instead.It can hook into the modification of model fields in the store.
Try code snippets:
{
//your grid config goes here
listeners:{
update:function(me, record){
//TODO save the modified record somewhere for your save button to pickup.
}
}
}
I was getting all the records because I hadn't call commitChanges on the store after reconfigurer.