I am using a dojo 1.6 EnhancedGrid with a JsonRestStore as shown in the snippet below. I have about 15000 records of data. When the vertical scrollbar for the grid is dragged down in order to scroll, it takes a long time to get the data visible in the grid. After some debugging, I noticed that the single act of scrolling sends 4-5 GET requests to the server.
Is there a better way to solution this, or is there a way to insure that only the last GET request is sent to the server? I was able to capture the onscroll event, but wasn't sure how to prevent the GET request from being sent.
store = new dojox.data.JsonRestStore({
target:"myurl",
idAttribute: 'id',
allowNoTrailingSlash: true});
mygrid = new dojox.grid.EnhancedGrid({
id: 'mygrid',
queryOptions: {ignoreCase: true},
sortInfo: '3',
store: store,
structure: my.grid.structure,
selectionMode: "extended",
autoHeight: 12,
plugins: {indirectSelection: true},
fastScroll: false
},document.createElement('div'));
dojo.byId("datagrid").appendChild(mygrid.domNode);
// start the grid
mygrid.startup();
if you have that much information to handle i would suggest you to use the pagination-plugin for the enhanced Grid. The advantage is that only a certain number of data records will be loaded at once.
have a look here:http://dojotoolkit.org/reference-guide/1.8/dojox/grid/EnhancedGrid/plugins/Pagination.html#id2
Regards, Miriam
Related
Really need help on this, please.
Brief: I have implemented ag-grid serverside mode with partial store for lazy loading.
Problem Scenario : ServerSide mode, what happens is as you scroll more data is loaded, in terms of ag-grid more row blocks are loaded.
Lets say block size is 100 rows.
I scrolled 5-6 times, 5-6 request went to the server , loaded the data into the grid using success callback of getRows method in ServerSideDataSource Implementation.
You are currently viewing 500th-600th row in your viewport(the last request that went to server).
If you go and apply a fresh/change-existing filter on a column, the getRows method will get called but with request params having startRow 500 and endRow 600(rowBlock you are currently viewing).
This is the issue. I want that to be 0 and 100 respectively as you generally implement server-side filtering. It should be a fresh request to server right. ag-grid should recognise a new filter got applied so dump the existing rows on the grid send fresh request to server with 0 and 100 values.
This start and end row values are fine when you have already loaded data with filter applied till 500 and scrolling to load 500-600. But when the filter is first applied/ freshly applied(change from existing filter/ newly applied) you need the start and end rows to be 0 and 100 right. Help!!
Hi i came across this question while searching for this exact problem, looking around to the docs and couldn't find solution there. It's happening after they introduce serverSideStoreType: "partial | full".
my current workaround for this is to updating params.request.filterModel on your getRows datasource, if detect any changes on filterModel
getRows: function (params) {
//update startRow to 0 then detect changes
if(grid.filterModel != JSON.stringify(params.request.filterModel) ){
params.request.startRow = 0;
}
grid.filterModel = JSON.stringify(params.request.filterModel);
I got a method,after filter changed grid will be scrolled to the first row.
Angular :
filterChanged(params: FilterChangedEvent): void {
this.gridApi.ensureIndexVisible(0,null);
}
Javascript :
filterChanged(params) {
gridOptions.api.ensureIndexVisible(0,null);
}
we want to take care that all running busy indicators will be stopped after a couple of time. How can we do that? For the moment we use setBusy(false) for each control.
Thanks a lot!
I think that you should change your overall approach because it's not a good UI/UX pattern.
First of all, why do you have more than one busy control in your view? For instance, you if you are loading record in a list you just set busy the list, not the whole page. If you are submitting a form data, you set busy only the form not everything else.
Second of all, why do you say "For the moment we use setBusy(false) for each control"? You should remove the busy state after a specific event. For istance when you finished to load list's result or you get the result of a form submission.
Anyway, to solve your current issue, the best approach is to use XML binding with a temporary JSON model.
You could have a JSON model like with content like this:
{
busy: false
}
and you bind the busy property of the control to youtJSONModel>/busy at this point when you need to set the control to a busy state you can do this.getView().getModel("youtJSONModel").setProperty("/busy", true); and when you have finished the operation you can do this.getView().getModel("youtJSONModel").setProperty("/busy", false);
I am using MapQuest map with leaflet. The routes are being injected dynamically. When we add routes to the map, it takes time to finish the rendering.
I want to block the screen while the map is being rendered.
Is there any way(mapquest API or leaflet event) to know the map is ready or finished rendering so that I can stop the blocking of the screen.
I'm using Leaflet to add the routes. Something like this:
function (locations) {
const dir = MQ.routing.directions();
dir.route({ locations: locations });
comp.mqroute = MQ.routing.routeLayer({
directions: dir,
fitBounds: true,
draggable: false,
});
comp.map.addLayer(comp.mqroute);
}
This is a case of RTFM.
The fact that you're using MQ.routing.directions in your code tells me that you're using the Mapquest routing plugin for Leaflet, which has complete API documentation.
By reading that API documentation, one can notice a success event, I quote:
success
Fired when route data has been retrieved from the server and shapePoints have been decompressed. [...]
I have a heavy suspicion that you don't need to know when the route is rendered (meaning: when the lines have been displayed on the screen) but rather when then network requests for the route are finished (which is what takes most time). The time to actually render lines on the screen is usually negligible unless one is working with thousands of segments (after the automatic douglas-peucker simplification).
I also have a heavy suspicion that this is a XY problem, and that the root problem you're trying to solve is race conditions when the user is (re-)requesting routes too fast, to which the solution is just throttling the requests rather than blocking the UI.
How to use this success event is illustrated in MapQuest's Route Narrative example:
dir = MQ.routing.directions();
dir.on('success', function(data) {
// ...
// the code here will run once the route is ready
// ...
}
I have a leaflet project where I am delivering a continuous stream of 'coordinates' via WebSockets to the client browser. I need to be able to display markers corresponding to those locations for a set period of time (something like 1 or 2 seconds) and then remove them (to make room for more locations).
Can anyone help me out or point me in the direction of resources wherein I could find some help?
Thanks!
Edit : Why the downvote? Its a legitimate and common question and one without a lot of solutions online.
Here is some code from the documentation (http://leafletjs.com/reference-1.0.3.html#layer):
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
layer.remove();
So in order to remove it after 2 seconds, I think you could try this one:
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
setTimeout(function() {
layer.remove();
}, 2000);
Example
in my sencha touch app I need to display a list of over 600 entries of objects per selected customer.
imagine one store holds some customers, displayed in a list. each of them has some "has-many"-related sub-stores, one holding about 600 objects (with urls, title, description...). these sub-info has to be listed when you select one customer from the first list.
the problem is on iOS you have to wait some seconds before the list is shown and it is very slow to scroll/use. it seems that it slows down the whole app.
are there any other options to display long lists, maybe like pagination ore something...
thnx!
edit: I found this article and will test these thoughts soon: Link
edit2: here we go: https://github.com/Lioarlan/UxBufList-Sench-Touch-Extension
You can paginate your list by adding a pageSize param to your store and the listpaging plugin to your list. By setting the autoPaging option, you can control whether the data is loaded automatically or on user click. Below is an example:
// store
Ext.regStore('BarginsStore', {
model: 'BarginModel',
autoLoad: true,
pageSize: 6,
clearOnPageLoad: false,
sorters: 'category',
getGroupString: function(record) {
return record.get('category');
}
});
// list
this.list = new Ext.List({
store: 'BarginsStore',
plugins: [{
ptype: 'listpaging',
autoPaging: true
}],
singleSelection: true,
emptyText: '<p class="no-bargins">No bargins found matching this criteria.</p>',
itemTpl: '<div class="bargin-record">{name}</div>'
});
are there any other options to display long lists, maybe like pagination ore something...
Pagination. Smartphones have far more limited CPU and RAM resources than a desktop PC. A six hundred row table with several elements is not going to display well on the devices on the market now. Hell, it'll probably slow down desktop browsers. Paginate it.