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.
Related
i have many groups on grid and each groups has many record, so item list is took many time to load.
i want grid list is loaded on demand when the user clicks the group.
Is it possible?
Either you let Javascript do the grouping or return the data grouped (as described in https://stackoverflow.com/a/23688299/4944034). But this won't change the amount of data and will not reduce the time it takes to do that.
I suggest you to use detail templates as shown on https://demos.telerik.com/kendo-ui/grid/detailtemplate The content of a detail template will be loaded on demand. It's not exactly a grouping but it might do the trick for you.
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 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.
Ok I have a grid setup binding to local data
Here it is based on the examples in the kendo demos
http://dojo.telerik.com/#marcushaslam/ovOKo
I'm having problems when rows are deleted. They appear to be deleted but then the original rows re-appear when columns are grouped.
Grouping works when 1 row is left - delete both rows (they disappear) group by a column and the original 2 come back!
I thought that the datasource automatically updated based on the destroy events. Am I missing something that will update the original data array from the datasource?
You are missing transport configuration, that will update correctly the array and the grid. Please check this article that explains how to implement transport functionality with local data:
http://docs.telerik.com/kendo-ui/web/grid/how-to/grid-localstorage-crud
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.