I'm really confused about how to implement server side sorting with Ag Grid while having pagination and infinite scrolling options. I have the following use cases specified for our application implementation of ag grid
5 page sizes (20, 50, 100, 200, All)
All = grid height of 300 rows and infinite scrolling
Each specific page size means we retrieve the # of items from our API call that is = to page size. So for example, a page size of 50, means each API call per page, retrieves 50 items.
The above statement means that navigation to a new page of the grid = a new call to API to retrieve data
Based on all of this, I also need to implement server-side sorting. What I need to do, is the following
User clicks a column header
Header click triggers a function that calls our API with a sort parameter and returns results
Grid refreshes with new (sorted) results
From what I've read so far, the two primary requirements are that sorting and enableServerSideSorting parameters are set to true. However I'm not sure what to do after that. Is it possible to modify the getRows ag grid callback, to call my API each time instead of the function looking only at cached results?
I'm just looking at what the conventional process is to handle a situation like this. Any help is appreciated and thank you in advance.
Related
In Sencha, how to create a DataView or List component which renders only 1 item at a time and contains prev/next buttons to navigate data?
Store has pagination enabled to pull only 5 records at a time. Out of these 5 records I want to display only 1 record at a time on the view and with navigation buttons to move forward/backwards. Is there a built-in component for this requirement?
I see few SO posts (Sencha Touch limit number of items in list) suggesting to use 2 stores (DisplayStore to slice the actual data). This didn't work for me. I tested this with static data in the actual store. It still renders all the data in the list. Moreover I am looking for forward/backward navigation buttons too.
If there is no such built-in component (at least close enough), I want to create one for my needs. Please suggest.
You should go with a filter, and two buttons.
The handler for the next button could be alike
var number= list.getStore().first().getId()
list.filter('id', number+1)
If there is anyway to increase a number for the next valid item. Otherwise you need a counter of your current selected item and increase that.
I have a CListView with pagination showing all results. Everything works fine.
I have a search widget on the page that renders a partial view to replace the existing list with search results.
The first search result page loads, looks great, and even shows the correct number of results in pagination, but if I try to go to one of the next pages, items from the first list are loaded.
Does anyone know what I have to do in order to fix this? Do the search results need their own full view rendered?
Thanks you in advance.
I was mistaken.
The pagination was not linking to the previous result, it was loading everything which the previous result also does, which is why I was mistaken.
I thought that the data provider in the controller kept track of the result set but you have to keep resending the same criteria every time. I was sending the criteria the first time and not on subsequent results so it loaded everything in absence of any constraints. I simply put the search parameters in session and then retrieved them so they could be considered on every request and it fixed the problem.
In short there is no bug, just me being new working with Yii.
I have an OnDemandGrid setup to display product data (called parts) for a project i am working on. I currently have only two entries in the product database.
My OnDemandGrid is setup with only the basic options: store, and columns. I am hoping it will be a virtual scrolling grid. the store was setup as a JsonRest store, with Cache
what happens when i open up the page and startup the grid is, the grid keeps sending requests to the server for data continuously - approximately 2 requests per second.
I also realize that for a grid with only two rows, it has a scrollbar on the right. when i try to use this scrollbar to scroll, I find that the grid seems to flicker and reset itself. many times.
I suspect the virtual scroll feature is doing something funky, somehow not acknowledging that there are only two entries. can some one help me out in this? am willing to provide more details should that be necessary.
Here is my code by the way:
require(["dgrid/OnDemandGrid", "dojo/store/Memory", "dojo/store/Cache"], function(OnDemandGrid, Memory, Cache){
var partsCache = new Memory();
App.Store.parts = new Cache(partsMaster, partsCache);
var grid = new OnDemandGrid({
store: App.Store.parts,
columns: {
name:'Part Name',
part_no:'Part Number'
},
}, "grid");
grid.startup();
})
partsMaster is a JsonRest store defined earlier (global at the moment - taking the grid for a spin) in the code. I've done some tests to safely determine that JsonRest is not the issue.
here is a screenshot of the grid currently (note the existence of the scrollbar):
Any help is appreciated!
EDIT: attached is a screen shot of the first request response header from chrome:
Based on the screenshot it looks like your response is not including the Content-Range header, which is what dojo/store/JsonRest uses to inform itself of the total number of results in the set. While I'm not sure that alone will cause your infinite-querying problem, it will definitely cause a problem.
The Content-Range header should look like e.g. Content-Range: items 0-24/500 (assuming 500 was the total number of items in the result set).
See http://dojotoolkit.org/reference-guide/1.9/quickstart/rest.html for more information on how JsonRest expects services to behave.
If this doesn't completely solve the problem, I'd also be curious to verify that the response body is indeed yielding the correct subset of results.
Edit: based on interaction I had on a dgrid issue today, the issue could be that your service is actually returning the incorrect number of results based on the query. See these comments on #691.
I'm currently having an optimization problem with a page. This is a dashboard-like page, it contains and AspxNavBar (analogue of Accordion control) with 3 groups, groups contain 2 charts inside callback panel, 4 grids inside callback panel (1 main + 3 dependend), filtering controls with many comboboxes and a callback panel.
The total weight of the page is like ~4 megabytes, and, in addition, the first load of the page immediately starts a callback on dependent grids (first row is 'selected' in main grid) and on panel with charts (for chart resizing).
Is there a way to reduce page size, say, size of html or callback/view state for devexpress controls? I've searched and found advices to disable rows cache (that doesn't actually help), switch textboxes to native mode (i don't have textboxes), etc. I've also disabled viewstate for all grids and got rid of 2 callback panels, but that also didn't result in significant page size reduction ( ~ 1-2 %).
I've managed to reduce the page size from 4.5Mb to 575Kb using following:
I've disabled the ViewState from the whole page and all the inner user-controls. I've enabled it for individual controls where it was necessary (actually I've come up with no viewstate at all at the very end).
I've disabled callback state for some controls where it was possible, since i do not need any info about the page at callback except those that i explicitly pass as callback parameter.
I've simplified the layout a bit. (Got rid of another 2 callback panels on a filtering control - the was a panel with 2 comboboxes inside. I am now doing 2 callback on each combo-box instead of 1 panel-callback. Combo-box callbacks are faster and healthier since they don't return page layout as html). Also, I've changed labels to spans, buttons to inputs, etc. And i got rid of some nested tags.
Used RenderMode='Lightweight' for AspxNavBar (actually, that only reduced page size by ~20kb)
Improved the code behind architecture, refactored javascript, reduced the number of callbacks and event postbacks (!filter is now applied using callback), etc.
That's all =) Hope that will help somebody.
I have JQGrid loading data from WCF OperationContract with paging and sorting working fine. I am using "multiselect: true" so that I get the checkbox column and ability to select multiple rows. I've implemented gridComplete:, onSelectAll: and onSelectRow: to capture when checkboxes are checked/unchecked and to maintain checked state upon pagination. I am able to save the checkbox state to the DB via another WCF method call.
What I cannot figure out how to do is load the saved checkbox state for each row along with the other fields specified in colModel:.
Any ideas? I realize I can make a separate WCF service call to get the values, loop through them and set state manually, but that seems like a huge waste and overly clunky.
Thanks in advance.
The simplest way, which I imagine me immediately after reading of your question, is to have additional hidden column (hidden: true property in the colModel for the column) and the checkboxes inside. You can load the selection state from the database an fill the hidden checkboxes. Inside of loadComplete or gridComplete you can use the information to select the rows.
If you would use loadComplete instead of gridComplete you can even eliminate the need to hold hidden row. The callback method loadComplete has data parameter which are initialized with the data originated from the ajax call. So if your server response contain more information as jqGrid need the data will be ignored by jqGrid, but you can see the data in the loadComplete and use the information to set row selection.