We have two grids in a panel and we need to have their records to scroll together vertically. That is, if user scrolls any one of the grid vertically then other grid scrolls too.
Thus, what can be the way to bind their vertical scrollbars?
A solution for version 4.0.2a is present here but the functions used have been deprecated in 4.1 version and thus it does not work in the newer versions.
Could anyone guide on how to achieve this in ExtJs version 4.1.*?
Thanks for any help in advance.
I don't see anything handy in API, but still it's possible to hook up to html elements:
grid1.view.getEl().on('scroll', function(e, t) {
grid2.view.getEl().dom.scrollTop = t.scrollTop;
});
grid2.view.getEl().on('scroll', function(e, t) {
grid1.view.getEl().dom.scrollTop = t.scrollTop;
});
Working sample: http://jsfiddle.net/CSwAH/
Lately "Locking grid" has become available.
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html
Easy to use and is useful too.
My answer comes 2 years later but it's for anyone who's looking for a good solution.
This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow.
See this fiddle.
So, what I've come up with is to add a delay to the event:
grid1.view.getEl().on('scroll', function(e, t) {
grid2.view.getEl().dom.scrollTop = t.scrollTop;
}, grid1.view.getEl(), {delay: 50});
grid2.view.getEl().on('scroll', function(e, t) {
grid1.view.getEl().dom.scrollTop = t.scrollTop;
},grid2.view.getEl(),{delay: 50}); //50 seems fine for me. adjust if you must
Related
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.
I have a ng-grid that has scrollbars (default).
The ng-grid triggers the ngGridEventScroll event (api) when you are at the bottom of the grid.
So far so good but I want this behaviour when there are no scrollbars. The only way I could turn these scrollbars off is by using the ng-grid-flexible-height.js plugin but then the ngGridEventScroll event is ignored.
I there a way to get this event when you're at the bottom of the grid?
Are there other ways to throw your own custom event?
When using a custom event, the ideal situation would be to throw the event when you're at the last 'x' records (to preload data).
There is a jsfiddle here (with flexible height plugin enabled, to disable comment out: ,plugins: [new ngGridFlexibleHeightPlugin()])
Thanks for any input!
I checked the documentation and I dont think Ng Grid provides incremental loading. You ll need to write custom code for it.
You could use some jquery like as discussed here - Auto Load More Data On Page Scroll (jQuery/PHP)
$(window).scroll(function() { //detect page scroll
if ($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{ // do your stuff here; }
});
Or better use a jquery plugin like this one - jQuery Waypoints | Example
I have a container with a card layout(horizontal). Each card is a scrollable component (vertical).
I want to edit the identificaition of each of those two type of scroll, because it actually allow to do Diagonal scroll and I do not want that at all
How do I do that?
I can't find anything in the doc that would allow me to do that.
PS I don't care if I have to work in private classes
Aught to be able to use the scrollable config.
scrollable: {
direction: 'horizontal'
}
If you are dealing with a lot of card items see the defaults config as well, might save you some typing!
If that doesn't work please post some code and I'll try to get you an example.
Good luck, Brad
i have a window with grid panel as the content...
when the window first shown, my store is empty and i can't see the scrorllbar (good)
when i load the data to store, i can see the scrollbar (good)
when i remove all data from store, i can still see the scrollbar and scrollable. when exactly there's no data in view (bad)
so my question is my title, how to remove scrollbar after datastore removed
here is the demo
Its is a open bug. Sencha team promises to fix it it 4.0.7. Have a look at this discussion at Sencha forum.
One possible solution given in the forum, is to hide the scrollbar using hideVerticalScroller() method. I did try it on fiddle but was not successful 100% (may be something to do with fiddle). I had to click "remove data" button twice to remove the scroll bar:
handler:function(){
storeSr.removeAll();
gridSr.hideVerticalScroller();
}
On the forum, they suggest doing (And this works!):
storeSr.removeAll();
var data = [];
var store = gridSr.getStore();
store.loadData(data, false);
if (data.length == 0) {
gridSr.hideVerticalScroller();
}