Invoking a Backgrid from another - backgrid

I'm in backgrid 1, where I've rowclick event enabled, now I want to invoke a refresh of another grid based on the click.
Two ways I'm thinking a. The row click event handler does the .get and passes the data to the collection of another grid b. Modify the url of the another grid collection , and then call the refresh on that grid.
Any pointers pls?

Related

Expanding and calling backend Service in UI-Grid

I have a UI Grid configured for my site. I have used expandableRowTemplate to expand it to show some simple content when user clicks on the expand button. Right now it shows the content properly.
But my requirement is when user user clicks on the expand button apart from expanding and showing the content it should also call a backend service to send some data to server and receive something.
Is this scenario possible in UI Grid? I am using Angular 1.5 and Ui Grid 4.0.1.
There's public API event which is fired when a row is toggled.
You can provide a function calling the REST service to this event.
gridApi.expandable.on.rowExpandedStateChanged(scope,function(row){})
And if you want to make a call only if the row is expanded, I see only 2 ways:
Either you have your own one redundant key to each row as row.isExpanded and toggle it inside this function and use for your purpose.
Or you can find if row inside this function is included in getExpandedRows()'s result. This is hilariously redundant.
Source: http://ui-grid.info/docs/#/api/ui.grid.expandable.api:PublicApi

Grid afterload or afterrefresh event

I have a function that compares cell values in a grid and if it finds differences, then it changes background color. But all styles dissapper, when the user reloads the grid. I tried to call this function again on grid store load event, but it does nothing, because refresh event happens after load event and clears styles again. If I instead call this function on refresh event, then I get an error. I need something like afterrefresh or afterload event, but can't find them.

Simulate a click event on a grid row

How can I dynamically click rows in my grid?
E.g.: I am using border layout.
I have a grid in the west with a list of Companies.
When I click on a Company, the information of the company which has an Id, is displayed in a form in my center area.
Now, when I want to add a company ( I am doing this with a button which opens a "Add window"), and type all information in the form and then press "save", I reload the grid.
How could I make it, that the company which is newly added, is clicked on and its information is displayed in the center area.
NOTE: The companies are listed with an ajax request, and the information is called with a "onCompanyGridHandler".
You can make the new campany created added in the top of the grid by sorting the grid's store with, for example, the date of campany creation. You can so add this line in the grid's store:
sorters: { property: 'datecreate', direction : 'DESC' },
Then, after the campany creation, you select the first row of the grid, using this code:
Ext.getCmp('your_grid_id').getView().select(0);
There are a couple of approaches you can take here:
In the function where you add the data from the Add Window to the grid panel's store, you can also get the form and use the form's loadData() method to load the data into the form, populating both the Grid and Form at the same time.
As is mentioned in a comment, after adding the data to the grid's
store, make fire the click event on the row in the grid that is
displaying the new data. I prefer the first approach because you do
not have to find the correct row in the grid and fire its click
event. In the first approach both the grid and form are loaded
with the data directly.
David

selectionChange or ItemClick

I am designing an extjs application where I have couple of panels. and one of them of has a grid. I know I can either do selectionChange on the grid listener or itemClick.
Which one should I use? Or moreover which one is better. I obviously load data on the right panel once the grid item is clicked
The first one get fired only when the selection changes (as you might has guessed) and give you a array of selected record (which might be just one) while the second one get called for each click and give you only the one record you clicked on.
For your case I would tend to use the second event and save the last last clicked record internally. I would then only load the second grid if it was not already loaded for this record.
your grid is displayed as table on page at runtime so you can add onClick() event on grid or table cell during onrowdatabount event of grid.

How to dynamically change pagination urls in ExtJS?

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?

Resources