I'm having an issue with a my current dgrid. I have a column which is dijit/Form/FilteringSelect with a Ajax-based store. The store works fine for searching and populating, but, when I open a page with the dgrid store having a couple of rows already I face a problem. Only the last FilteringSelect triggers the edit event and fires the XHR request.
For example, if the Grid store has 4 items, so it will have 4 rows, only the FilteringSelect of the last row will go to the server to get the display value.
I'm a bit lost, any help?
Related
I have an angular webpage. One of the page sections (an angular ui grid) contains nearly 1000 rows of data. Each row has 7 columns. (There is no table tag available anywhere in the HTML the grid is made using nested divs)
At a time only 20 rows will be shown in the page section. Now using ruby and selenium I need to verify whether data displayed in 7th column is sorted in ascending order or not. I tried to do this by reading the contents of the
angular ui grid to an array of arrays. But at any point of time when I fetch the elements data for only 20 rows are getting stored. After loading this page I tried again by doing a horizontal scroll and fetching the data.
But still I get only 20 rows of data everytime I try. I believe only the data for the visible rows at the point of execution is only getting fetched. And I think the data is loaded dynamically to 20 rows on demand which
are visible in the section.
Now what is the best logic I could use to verify whether data displayed in 7th column or any other column is sorted in ascending order or not !
From your description what I understand is all 1000 rows will be stored in page source during page load. And on demand any 20 rows will be loaded from page source as user scrolls down or scrolls up in the page section. In this case, the best option will be to collect data from the source and store all of it to an array as per need. Which can be done as
browser.execute_script("return angular.element("your element.functionWhichloadsallRows)").collect{|e| e.values}
As you can see in the picture this is a kendo grid that gets the data from the database and do the sorting, paging and grouping and right now it has been grouped by. My record are a lot, they're more than 2-3 millions and because of this reason I can not send all my data to the grid so first the I send a request to database and then I receive the paged, sorted and group by response back from the server and everything works great but sometimes there might be only 2 set of grouped data but inside these two there might be millions of data so this is what I did, I just show the name of the groups with no child data. My problem is that when someone clicks on a group, I want to open up it's nodes and show the related data. but I didn't find any method in kendo to show the nodes' data that is present inside a datasource in its related node.
As title says, I would like to know how to decide which row model to choose and the reason why, depending on how the data change and the number of rows, for example.
Viewport - Use when you need to show realtime data, the server will maintain an open connection to update the grid whenever new data is ready.
Pagination/Virtual Paging - these are both about the same, just depends on what you want for your UI. In both situations you would use them if you have a lot of rows to show, but don't want the user to wait 10 min for the server to respond. Probably works best if you sort/filter on the server side.
Other notes:
In my opinion, if you have pagination, then don't have any scroll. I hate scrolling a table to realize that what I am looking for isn't on that page, then scrolling through another page. The only exception for this is if you have some sorting to your paging, like if the first page was all the A's, or had only from 2000, or just January's data.
Also, Pagination can be used in situations where you don't have a lot of data to request from the server, it could just be a UI preference.
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).
I'm facing this problem when using Richfaces 4.x... what I have is a datatable in edit mode so where the user can insert data using textboxes or radioButtons. The table needs to have a maximun of 10 rows per page reason why I also use a rich:Datascroller to paginate.
Suppose I'm on page 1 and there are validation errors on page 3, when the user clicks the save button JSF sends the entire table. However, since only the values of page 1 are visible it bypasses validations for rows on page 3. Any ideas how can I avoid this problem?. Thanks a lot.