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.
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();
A grid is configured with a store that use a model that I can call modelA
I need to change on the fly the model of the store related to the grid.
I followed following approach without results:
grid.getStore().setModel(modelB);
grid.reconfigure(
grid.getStore(),
columns
);
grid.getStore().load();
It continues to use the model defined at the beginning. In fact if I debug the record that is passed to the renderer function as follows:
function(value, metadata, record)...
record continues to reference modelA instead of modelB.
How can I change dynamically the model of the store?
I think that although you set new model you haven't re-read the records, at least you do not show any store.load() call. Models are used by store/proxy/reader to create instances when the store is loaded.
Now, I wouldn't use this approach anyway. Store is not a very expensive in terms of performance or memory so if I'd need to reconfigure the grid I'd use another store with that another model.
To achieve this task, you can change fields of model dynamically instead of changing the model itself. Sample fiddle
store.model.setFields(fieldsArray);
store.load(); // or store.load(newData);
grid.reconfigure(store,columnInfo);
Hope this helps.
I have a button that when clicked, will create a JSONstore using a url provided. The store is then loaded into a grid. If the button is clicked again, it adds all the information again (so it is listed twice). I want it so that when the user clicks the button, it clears the store/grid and then adds everything.
Any ideas on how to accomplish this?
Thanks,
EDIT
ExtJS 3
datasetStore.removeAll();
datasetStore.loadData(datasetsArray);
It will be useful to see some code examples (and extjs version), but you can simply use loadRecords method (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.JsonStore-method-loadRecords):
grid.store.loadRecords([array of your new records here], {addRecords: false});
{addRecords: false} indicates that existing records will be removed first.
for ExtJs4: simply doe store.loadRecords([ array ]). In version 4.2.2 the store.proxy has NO clear() method so that doesn't work (was proposed in other examples elsewhere...)
If you want to to totally clear store and proxy, pass an empty array. This is handy because in some cases you want to clear the store and removeAll only moves the data to an array managed internally in the store so when later doing a sync on a gridStore which shows only 1 record, you may see your controller flooded with a bunch of records marked for removal!!