I have two data grids. The first auto-loads a list of items (json data store). OnCellClick the first grid fires a dynamically parametrized url and loads data into the second grid. It works fine, but the pagination of the second grid does not focus the new context.
What shall I do to make the pagination work with the new url?
hm your pagination and second grid (which is the one to be dynamical) should share the same store, now on cell click you should only reconfigure the store and start loading it.
if you do like this both grid and pagination will work just fine...
i think currently your paginations uses another sotre (another instance or something) but it MUST use the same store as the second grid...
Not sure what you exactly mean with "does not focus the new context", but are you passing the start and limit parameters to the second grid in the params array of the jsonStore.load call?
If you just want to focus the grid on certain row, you can use focusRow method of GridView.
Perhaps you could post a code example if this did not help?
Related
I got requirement to set column title per condition.
No Grid method allows me to set column title after table gets rendered.
I tried with setting new title via manipulating its value in options.
But after that, I'll need to call refresh() method to show my new title.
Because in the grid, I always have some columns hidden dynamically.
Refresh() method will make these hidden columns showing again on the screen and I don't want it.
So, is there a way to set new value to column title?
Thanks.
For hiding individual columns, you can use the hideColumn, showColumn and isHidden methods.
You can also use the visible column property to set column visibility at initialization time.
There is no setTitle() method currently implemented, but you can email Shield UI's support and ask them to implement that for you. Depending on their load, they might do it real quick.
Until that is implemented, you can always update the title by using jQuery.
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
I have a search button that triggers Ajax request to fetch data from DB. When the promise is resolved I populate gridoptions.data. The grid is rendered in the screen.
I make some changes in the grid, like hide some columns, enter something into the header filters, change sort order etc.. When I hit the search button again, the data is fetched again and grid is updated with that data but the grid layout remains as is, all the the changes I made earlier in place..
I need to intialize the grid every time I hit search button... I tried redefining gridoptions.columnDefs but that didn't work..
Suggestions please.
Try:
$scope.gridoptions = {} as the first line in the search function, instead of just clearing the columnDefs.
What's the best way to dynamically populate dropdown options in jqgrid advanced searching?
1) The first way: use "dataUrl" option of "searchoptions"
Disadvantage: when user add new criteria, and choose the attribute, dataUrl was posted to the server, when user add the same criteria again, dataUrl was posted to the server again, and with twice. very strange.
Advantage: the values user selected previously was there and not cleared.
2) The second way: use "dataInit" option of "searchoptions"
Disadvantage: the values user selected previously was cleared when adding new criteria(can not accepted, because it is not user-friendly, please refer url: the selected value was cleared in dropdown after add new criteria in jqgrid advanced searching)
Advantage: data was loaded into page when the page refreshed and only once.
3) the third way, use "value" option of "searchoptions"
but it's not dynamically, just hard-coded in page.
Could any one share the best practice about the issues. thanks.
I start with the second option. I suppose that you use dataInit in the wrong way. The goal of dataInit to initialize the control, like convert <select> to select2 or set jQuery UI Autocomplete or jQuery UI Datepicker on text input element. One should not fill the control with values. The select control is already created and filled before calling of dataInit.
If one use the first option, one can set HTTP cache header to prevent multiple request to dataUrl.
About the last option: one can set searchoptions.value dynamically inside of beforeProcessing for example. See the answer, this one and this one.
I am not looking at clearing all the store items with removeAll(). I have a paginated grid which has multiple pages. I want to clear out everything and before i assign new set of data , it should look afresh ? Does anyone know of any API ?
Regards
ExtJS grids are bound to an Ext.data.Store, all of their data comes from the store. If you want to clear the contents of a grid you'd have to clear the contents of its store.
If your data can be loaded from the same store URL with different parameters then you could try just manually overriding them when you want to load fresh data...
grid.getStore().load({
params: {
newParam: value
}
});
The way to clear grid data(without doing a backend hit) is to clear the associated store data and refresh the grid view.
Lets say transactionsGrid is associated with a store, then we can clear data shown in grid as below:
clear data using : transactionsGrid.store.clearData();
then refresh the grid view as : transactionsGrid.view.refresh();