I am using bootstrap (uib) tabs, angular 1, angular-ui-grid. Each tab contains a single grid and each tab can also have sub tabs.
I am facing sever performance issue in application.
Data nature - Tree structured which can not be paginated. And size could be in MB's.
I tried 2 approaches:
Approach 1:
I used ng-show to render grid in each tab, which keeps DOM in browser while tab switching.
It really slows down the application when there are multiple tabs open.
Approach 2:
If I use ng-if to render grid in each tab, which removes DOM while tab switching, takes much time in tab switching.
Because it has to rerender whole grid again. And after that I need to apply state changes again on that grid to restore
previous state.
I think you can continue to do with approach 2, but follow these steps:
Init all grids without data
Just load data for first grid, bind data to it.
Load data for others grids. Keep them in some variables.
When user click on other tabs, bind related data.
If you want real-time data when click on other tags, forget step no.3, when user click on other grids, make an ajax call to get data and bind them to grid.
Related
I am trying to change the Refresh button handler of the Extjs GridPanel top-bar paging tool.
PREFACE:
I have created two stores for a single grid panel. One remote store fetches records from the DB and then after that loads the data onto the other local store. The reason is that I want local pagination with a lot of data.
PROBLEM:
Since the local store has no proxy on clicking the reload button in the grid's top-bar paging tool nothing happens. I need to overload/change the handler of that button to call the remote store to reload.
MORE PROBLEM:
I have only the extjs grid panel object on hand. Can't change the definition/code of the Ext.create('grid-panel',{}). Only have access to the output/grid object.
the button is visible through this command but can't change any of its properties.
***.***.****.***.****.gridObject.getDockedComponent('toptoolbar').getPagingItems()[10].items
*** is the namespace of the object(cant share that)
QUESTION:
Is there any way to tackle this problem or I am doomed?
I have an page item and an interactive grid on an apex page . Page item is of select list type and base on the selection the data in the grid changes. I have default Add row button in the grid to add rows . I want to refresh the grid after after click on the SAVE button in the grid. If the grid automatically refresh itself after a fixed interval of let's say 2 or 5 second that is also good for me.
For the current scenario the rows are getting added but are not reflecting on page in the interactive grid after clicking on SAVE but entries can be found in the table in the database. After reloading the page the entries are reflecting in the grid.
NOTE : I am working over a database link for fetching the data.
There is a way to hook upon the built-in save action of the interactive grid.
Steps below will create a custom event, listening to the interactivegridsave event. That event is fired by APEX after the Interactive Grid has completed its own save process. Make sure the event name is spelled correctly.
Create Dynamic Action
When → Custom
Custom Event → interactivegridsave
Selection Type → Region
Region → <your region>
Refresh action (maybe turn off Fire on Initialization)
I think this will help you.
When you add rows to your Interactive Grid and hit save button, it refreshes and you can see the IG updated.
In case you need to refresh the region or the page every 5/10 seconds, please follow these steps:
Define a Static ID for the IG, for example "IG1".
In the page attributes, navigate to Execute when Page Loads and enter:
var model = apex.region("IG1").widget().interactiveGrid("getViews").grid.model;
setInterval(function(){ model.fetchRecords(model._data); }, 10000);
This is going to refresh the IG every 10 seconds. You can set it to 2 or 5 seconds.
I had something similair with filters, If I added a row that shouldnt show up due to the filter I had on it would still be there until I refreshed. Of maybe if I changed something so it should no longer show up, it saved, but still showed up.
What I did was do a page submit after saving.
I have a Dynamic Action on Click Selection type jQuery Selector and the selector being [data-action="save"]
Then the action is simply Submit page.
This way after you click save, it submits the whole page and reloads.
Hope this does what you need.
I'm working on an angular 2 application, to keep the explication short, I have a navbar on the left, and on the rest of the page, and I will display my content.
Those content will be blocks, as in the attached image, the navbar contains 4 actions (Form, test1, details ...)
The content in the middle will display everything, but when I click on form, form will be shown in the middle, when i click on Details, the details block will be shown in the middle.
The user can scroll down and up to see the blocks.
I saw that in Angular 2 we can user Fragment to precise anchor and what blocks we want to show, but the problem is that there is a bug on the fragment functionality.
At the moment, I have a router-outlet that changes the view depending on the url in the routerLink on each button of the navbar. Should I keep using it if i want to display all the blocks/components on the same page?
Thanks for your help,
here is the screenshot
So in essence, you want a multitude of components, with a menu that doesn't really navigate, but more so has toggle buttons that either display or hide content? What should a page refresh do? Does it matter if you see the same components then? If so, you either have to store state in local storage / session storage / using ngrx... or you have to add the displayed items to the route and resolve those.
Anyhow, in the end you want one component which decides what is displayed, and all the blocks in their own components with their own selectors which you show / hide using *ngIf.
Your html would basically look like this:
<my-menu></my-menu>
<my-form *ngIf="showMenu"></my-form>
<my-test1 *ngIf="showTest1"></my-test1>
I have a master gridview where each row can be expanded to show a child gridview.
The master grid loads with all children collapsed.
I do the expanding/contracting of the child grids in javascript so its nice an quick when loaded.
The problem I have is that when the page does a post back (e.g. when the user clicks to sort one of the columns) all the child grids get set back to a collapsed state. I want the expanded/collapsed state to be remembered.
The examples I've found so far all seem to do the expanding/collapsing on the server side.
But this seems really clunky and slow.
I'm thinking of trying to pass the expanaded/collapsed state of each row back to the server using a hidden field in each row of the master grid.
This hidden field would be set/cleared by the same JS routine which does the expanding/collapsing.
This seems like a good way to do it to me, but since I can't find any examples online I'm concerned I'm missing something???
Any reason not to do it using a hidden field?
Yes, track state in a hidden field. AJAX control toolkit does this for it's controls. Hidden field is a common approach. I'd highly recommend it, and that is the reason why you are experiencing this, because client mechanisms have no ability to "remember" preferences on postbacks, but hidden fields bridge that gap nicely.
I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.