I used handsontable to load thousand of records. When i load page, it will take lots of time to load. So, my question is: Is there any buffer functionality to buffer some data once then some other while scroll?
I am trying to load "100" data while first time refresh. Then while scroll, it will fetch another "100" records. But it will not work. Please help me out.
Thanks
What you are looking for is called infinite scroll and handsontable seems to have all the tools needed to build support for it. Read their documentation's Function datasources section. You will need to implement the lazy loader yourself though.
The feature has been requested couple of years ago, but has not been implemented yet. Some have written plugins with a support.
Alternatively, implement it in the form of pagination. Handsontable already has the support. When user clicks on the other page link, load it through AJAX and feed it back to Handsontable. The link above has an example, just add your ajax call.
Related
I have a performance issue when I open ionic 3 Modal.
I need to show a list in the modal and the length of list is 1000.
It takes few seconds to open the modal while they are rendered.
I thought about using InfiniteScroll in the modal, But I use Searchbarwhich means server-side should develop more APIs for that.
Since the data of list is quite static, I would like to make like :
Preload the modal page and hide by default.
Show the modal when it should be opened.
When the modal is closed, DO NOT destroy it, just hide.
But according to the ionic docs, I can't reuse modal.
So my question is : Is there a better way to make searchable 1000 list in ionic3?
Thanks.
EDIT : I have tried with localStorage to save json (about 100kb) and stop using XHR to reduce loading time. However I don't feel loading time gotten faster. I tested with just 100 list instead of 1000 and opening modal was a lot faster.
There are a several options:
If it is actually static, just place it in web storage and retrieve it when the use reloads the page.
If it's "quite" static, whatever that means, just place it in the DOM somewhere so it only has to load once per page load. When the user clicks the link to open the modal, store the data in a hidden field. It might even be a good idea to load it asynchronously as the page is loading, which could potentially completely eliminate any loading times at all from the user's perspective.
Use your own modal, and just hide/show it. Load it async.
Example of cache
jQuery AJAX Example
Ok I made it by using <ion-infinite-scroll (ionInfinite)="doInfinite($event)">.
First of all, when modal is opened, get list data from the server
and save in local storage
In the beginning just show 20 items out of 1000. So the rendering
would be a lot faster.
When user scrolls down, doInfinite will be executed.
In the doInfinite function, check what is the next index in order to show
the data. Like pagination logic. And get proper data and push to
the list array.
About <ion-searchbar>, when you get list data from either server
or local storage, save an original list data for the search (In my case, I just used this.originalData = myData like that.). By doing so, whenever user searches by typing, you can filter from 1000 array but no slow rendering issue.
Is there a 'right' way to load lists of data/classifieds/articles on a web page, I'm currently loading 8 items via an AJAX request with a view more option at the bottom of these 8 items which once clicked will load the next 8 items and so on until there are no more new items to display.
I was looking around and there is an almost 50/50 split between Ajax loading and pagination listing for data depending on what website you look at. I'm wondering is it easier for a user to use one or the other or is it all the same these days and it's just down to me as the developer to decided?
I know that if I go down the pagination route it removes the overhead of an javascript or jquery needed to be used which is a negligible difference.
Technically it doesn't matter either way to me as I've implement both options before numerous times.
This is more a question of user experience then a coding issue.
I've searched alot about this issue but haven't got any solution, thats why posting here. I've a form In Gravity Forms which has lots of fields and also conditional fields. Say more than 100. Its loading fine but it took over 20 minutes to on website, which really annoying.
So i want something AJAX like solution, mean when page loads, than only first input field will show than on clicking on that further fields should be show via AJAX (or from database). So please help me our on this issue. And thanks in advance :)
You can use the "Page Break" field to break your form into multiple pages.
This way you can have only one or several fields in your first page, then the next set of fields on the next page, etc.
This will not use AJAX by default, but will certainly make your form load faster. And you can implement AJAX loading for the page steps with some custom coding if this is a requirement.
We are using kendo grid control in our aspx page. We have significant amount of data in the grid. currently the load time of the page is around 5-7 seconds. Is there any smart tricks to reduce the load time? We are trying reduce the load time to 3-4 seconds. We are populating the grid using REST service. We have already removed the duplicate REST calls & unnecessary parameters form the REST web service.
We would really appreciate a prompt response on this.
Thanks in advance
Lalatendu
Do you have time on where are you spending time?
Things that you can try: do not load full kendo.all.min.js but only what you need. There is a very good blog on this in Kendo UI website Using UI Libraries Without the Bloat
Use serverPaging in order to transfer less data.
You might also consider using virtual scrolling
I have various tables with the following size : 12 columns and up to 1800 rows. It takes 8 seconds to render it to the user. I currently use h:dataTable. I tried ui:repeat to get the row data from a Java List object, managed by JSF. Although this works fine, the 8 seconds to render the table is unacceptable. I'm trying to find other ways to do this, but need to keep JSF as my controller for action buttons on the page. In other words I want to create the 'table markupto send to thepage myselfand then still associate actions onh:commandButtons` to the managed bean methods. Is there a way to do this?
The only ways I can think of is to use jquery or ajax to create the table markup, although I am new to technologies other than JSF for UI development.Maybe then I would somehow pass that to the client for render. The only problem is I don't know how to generate the markup from my list, and second how I would inject it between h:commandButtons that are in my XHTML file currently.
Does any one know how I can solve this without having to completely rip OFF JSF? One main problem I have is that the business requirement that says we can't page the datatable (i.e: Next / Back buttons displaying 100 at a time for example). So, possibly I was thinking I could do this by Ajax calls to the server and get 100 rows at a time after page ready, and append new rows behind the scenes to the user. This would be a "perceived" speed of load, but I don't know how to do this at all.
8 seconds isn't bad for a whopping 1800 rows on 12 columns. 10~100 rows is done in less than a second, right?
Before continuing with this, are you absolutely positive that all those 1800 rows are supposed to be shown at once? Isn't this very user unfriendly? Wouldn't the user have to need Ctrl+F to find the information it is looking for? Isn't that annoying? Why don't you introduce filtering (a search field) and pagination exactly like as Google is doing to present the zillion of results in a sane and user friendly manner?
Anyway, you could consider using "On-Demand data" option of PrimeFaces <p:dataTable>, wherein the data is loaded by ajax during scrolling via <p:dataTable liveScroll="true">. See also the showcase example. No homegrown code nor manually fiddling with jQuery necessary. PrimeFaces has done it all under the covers.
It you don't want to use PrimeFaces for some reason, then you could consider using OmniFaces <o:componentIdParam> in combination with some jQuery "live scrolling" plugin. See also the last example in its (snapshot) showcase page for a kickoff example (which should easily be adapted to be triggered by hitting the scroll bottom instead of by clicking).