The default pager view in Slick grid looks like this:
Assume that I have the count of total number records, then how to customize slick-pager to show the clickable page numbers depending on the total number of records, so that pager looks something like this.
Also, how to handle their events?
the controls/slick.pager.js file creates the pager along with all its graphic elements, and handles the events too. Customise that.
It's going to be a little tricky though because if you have 1000 pages, you're going to need to cull the middle page numbers down to a maximum of 10 or so...
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've two fields on account form, one is two option(checkbox) and other is text box. As par my requirements, I've to not show the label of the checkbox but show them as simple fields without caption. I am done with it but stuck in a problem that it create a huge space between two fields, as shown in following screenshot. I would like to hear from your side to resolve this problem.
You could try this:
Set the tab to two columns, settings the first column around 5-10% (experiment with the value)
put the checkboxes in the first section, the other fields in the second one
set the first section to have 1 pixels for label width (instead of default 115)
I'm not sure how it would turn out, and would probably need some tweaking (to account for different form/window widths) but you might accomplish something close to what you need.
Another approach would be to build a custom HTML webresource, put it in an IFRAME as the only form element, and rebuild the form from scratch as you like... but it's probably best left as a last-est resort
You can convert the section from 2 columns to 4 columns, span the textbox field to 3 columns. This will reduce the checkbox field columns to 25% and textbox to 75%
This is the maximum we can do in supported way.
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 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.
I have a View (block display) listing node titles of a certain content type displaying the latest 12 published items. It displays underneath all nodes of a specific type.
What I'd like to do is be able to load the next 12 items with AJAX (I know the pager does this but I was hoping to avoid it) and also control the offset based on the node title.
I think the second request can be achieved with the row number in the query but so far I'm having trouble achieving a working script.
you always can call view results from Drupal API:
$results = views_get_view_result('my_view',$display, $args)
and in arguments you can pass start/end number of items, or something else, depends how you sorting your results
Well, instead of that work, how about selecting the mini pager? I'm pretty sure it only shows previous and next links. If it's not the exact display you want to use, you can override theme_views_mini_pager (from views/theme/theme.inc, line 636) to only show what you need.