While implementing virtual scrolling with wijmo grid, as per the below code, when the new data is appended to data array (once we scroll and reach to the last record of the grid), the scroll gets reset to the initial position.
Check this JSFiddle
scrollPositionChanged: function(s, e) {
// if we're close to the bottom, add 10 items
if (s.viewRange.bottomRow >= s.rows.length - 1) {
addData(data, 20);
s.collectionView.refresh();
}
}
Any idea how can we stop this behaviour? Other grids like slickgrid, ag-grid provides smooth behaviour - once the data is appended, the previous last record stays in the view. Can we achieve similar kind of behaviour for wijmo-grid?
You can save scroll postion before refreshing the grid and restore the same after scroll.
var pos;
var grid = new wijmo.grid.FlexGrid('#flex', {
itemsSource: data,
scrollPositionChanged: function (s, e) {
// if we're close to the bottom, add 10 items
if (s.viewRange.bottomRow >= s.rows.length - 1) {
addData(data, 20);
//save current scroll postion
pos = grid.scrollPosition;
s.collectionView.refresh();
}
//restore scroll position
if (pos) {
s.scrollPosition = Object.assign({}, pos);
pos = null;
}
}
});
Check the updated fiddle:- http://jsfiddle.net/797tjc5u/
You need to store scroll position before making http request and set back once items have been added to FlexGrid.
Please refer to the following updated fiddle with http service delay simulation:
[http://jsfiddle.net/hwr2ra1q/41/][1]
Related
I have a Blazor WASM application using a MudTable that displays many rows from List<T>.
The MudTable uses #ref="_mappingTable" to identify the table in code.
In code, I set the selected item:
_mappingTable.SetSelectedItem(specificItemFromTheList);
StateHasChanged();
This seems to work fine. However, I'd then like the table to automatically scroll so that item is now visible. It's not automatically doing that and not sure how to achieve that.
There is an open issue requesting a new function "Scroll to row in MudTable"
https://github.com/MudBlazor/MudBlazor/issues/5445
You can wait for that issue to be solved or try the alternative posted by the user geometrikal
Currently using this code to scroll a row into view. It assumes the
table rows are all the same height.
export function scrollMudTableToRow(rowIndex) {
var tableElement = document.querySelector("div.mud-table-container");
var tableHeight = tableElement.offsetHeight;
var tableOffset = tableElement.scrollTop;
var tableRowHeight = tableElement.querySelector("tr.mud-table-row").scrollHeight;
// Element is above view - scroll so it is at top
if (rowIndex * tableRowHeight < tableOffset) {
tableElement.scrollTo(0, rowIndex * tableRowHeight);
}
// Element is below view - scroll so that it is at bottom
else if ((rowIndex + 1) * tableRowHeight > tableOffset + tableHeight) {
tableElement.scrollTo(0, (rowIndex + 1) * tableRowHeight - tableHeight);
}
}
Let me start with i am sorry for the long post.
I'm attempting to use the bootstrap carousel and unfortunately the pictures i have been given are NOT uniform. for example some are 100x200, doe are 150x100, etc. The aspect ratios are different, letter vs landscape. Ive attempted a number of things, including the using the following helper function on load of each of my images in the Carousel:
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {
var result = { width: 0, height: 0, fScaleToTargetWidth: true };
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
}
else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
}
else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
result.targetleft = Math.floor((targetwidth - result.width) / 2);
result.targettop = Math.floor((targetheight - result.height) / 2);
return result;
}
function OnImageLoad(evt) {
var img = evt.currentTarget;
// what's the size of this image and it's parent
var w = $(img).prop('naturalWidth');
var h = $(img).prop('naturalHeight');
//var tw = $(img).parent().width();
//var th = $(img).parent().height();
var tw = $(img).parent().parent().parent().parent().width();
var th = $(img).parent().parent().parent().parent().height();
// compute the new size and offsets
var result = ScaleImage(w, h, tw, th, true);
// adjust the image coordinates and size
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
and using the following for each of my images for the carousel
<img src="~/Images/Img1_Tall.jpg" alt="Tall" id="firstImage" onload="OnImageLoad(event);" />
and for the FIRST image in the carousel it works great, but each one after that they seem to just end up their natural size and are horizontally centered but are just against the top boarder of the carousel.
I've even changed the "onload" to pass the values of the length and width of the image but that didn't work either, in debug it seems only the first image kicks off the "onload" event.
the effect i am going for is if the ratio of the container is 3:4 and the ratio of the image is 1:2, the image stretch to meet the left and right edges and would center vertically and have letter box above and below, but the container does not change so that the navigation buttons of the carousel do not move. if the image is 2:1, the image would stretch to meet the top and bottom centered horizontally with letterboxes on the right and left, again keeping the navigation buttons unmoved.
any help would be appreciated... including:
what you are trying to do is crazy
do you want to do something like http://jsbin.com/zotelasa/1 . With that code I can get the active items w,h or any other variables you used in your code to run scale image. Because of parent.parent codes it applies to carousels main divs but you can set your own container.
The quick and dirty solution would be to resize the images using an image editor, and save the properly-sized images to a folder named eg carousel_images. Then whenever you get new content you simply run the image through your editor. With a carousel you're most likely dealing with a number of images in the several to dozens range and not hundreds or thousands.
A more complicated solution is explain to your image provider that you need everything one size. The images aren't going to look right if you're stretching and skewing them on the fly, and you can show them an image with the aspect ratios wrong to explain what you mean.
Finally, as a technical solution, I would try to find out why your image resizer is only being run on the first image. From the sound of it, other images just aren't being run through your function. I think that the technical solution should be a last resort in this case because, like I said, the end results are just not going to be as good. You should at a minimum, if possible, handle each image by hand to make sure the result is adequate.
...And the answer is a little long too...
• I assume that the width’s image’s parent is a constant, and while you don’t change the width’s viewport that must remain.
A-. Get the width’s image’s parent…
(Because the id attribute I took the grand parent’s parameter, that is (must be) the same than the parent’s one).
B-. With the below value deduce the height’s image’s parent, including the preferred ratio (in this case 16x9…
C-. … And with this, set the images’ parents height collection (all the elements with class=”item”).
D-. In order to conserve your carousel’s responsive characteristic, you must add the $F_getAdjustImagesParents function to the window resize event.
E-. Set the slide’s images position to absolute (Note: That must be via JQuery because if you do it in Css the bootstrap carousel will not display correctly. I did it with a new class for the images ('myCarouselImgs').
• Bootstrap carousel’s event 'slide.bs.carousel' and 'slid.bs.carousel'.
As you know, after the ‘click’ event, the slide.bs.carousel event is one of the firsts events that imply the change from the present slide to the next one; while the 'slid.bs.carousel' one is the end of the process.
F-. In the first one (slide.bs.carousel event), using the ‘relatedTarget’ variable of the Bootstrap’s plugin, the item’s id attribute and a item’s data attribute, get the number of the next item (ensure that these last ones -id attribute and data attribute- be present).
G-. In the second one, 'slid.bs.carousel', get the image’s size. For that you need to identify the implied image. I gave an id to each one. With this and the value obtained in previus step, it can do it.
H-. Well, now you already have the four values required for the ScaleImage function. You can call it…
I-. … And apply the result with some effect
var $parentImgW = ' '
var $parentImgH = ' ';
var $myCarousel = $('#myCarousel')
var $carouseItems = $('.item');
function $F_getAdjustImagesParents(){
$parentImgW = $myCarousel.width(); // A
$parentImgH = ($parentImgW*9)/16; // B
$carouseItems.height($parentImgH+'px').css('max-height',$parentImgH+'px'); //C
console.log('$parentImgW ====> '+$parentImgW);
console.log('$parentImgH ====> '+$parentImgH)
};
$F_getAdjustImagesParents();
$(window).on('resize',function(){ // D
$F_getAdjustImagesParents();
});
$('.myCarouselImgs').css('position','absolute'); // E
$myCarousel.on('slide.bs.carousel', function(event) {// The slide’s change process starts
var $slideNum = $("#"+event.relatedTarget.id).data('slide_num'); // F
console.log('$lideNum ====> '+$slideNum)
$myCarousel.on('slid.bs.carousel', function(event) {//The slide’s change process ends
var $imgW = $('#myCarouselSlideImage'+$slideNum).width(); //G
var $imgH = $('#myCarouselSlideImage'+$slideNum).height(); //G
console.log('$imgW ====> '+$imgW);
console.log('$imgH ====> '+$imgH);
var $result = '';
$result = ScaleImage($imgW, $imgH, $parentImgW, $parentImgH, true); //H
console.log('$result.width ====> '+$result.width);
console.log('$result.height ====> '+$result.height);
console.log('$result.targetleft ====> '+$result.targetleft);
console.log('$result.targettop ====> '+$result.targettop);
$('#myCarouselSlideImage'+$slideNum).animate({ // I
width:$result.width+'px',
height:$result.height+'px',
left:$result.targetleft+'px',
top:$result.targettop+'px' },
300);
});
});
See it runnig at https://jsfiddle.net/nd90r1ht/57/ or at https://jsfiddle.net/omarlin25/nd90r1ht/59/
I constantly generate new HTML pages that I display in a QWebView. Now I have trouble to restore the current position of the vertical scrollbar after the setHtml() call, if the HTML contains images. The scrollbar always jumps back to the top.
The following code works as long as the HTML only contains text:
void MainWindow::htmlResultReady(const QString &html)
{
// remember scrollbar position
int scrollBarPos = ui->webView->page()->mainFrame()->scrollBarValue(Qt::Vertical);
ui->webView->setHtml(html);
// restore previous scrollbar position
ui->webView->page()->mainFrame()->setScrollBarValue(Qt::Vertical, scrollBarPos);
}
I also tried to use the signal QWebView::loadFinished() without success:
void MainWindow::setupHtmlPreview()
{
connect(ui->webView, SIGNAL(loadFinished(bool)),
this, SLOT(restoreScrollBarPosition()));
}
void MainWindow::htmlResultReady(const QString &html)
{
// remember scrollbar position
scrollBarPos = ui->webView->page()->mainFrame()->scrollBarValue(Qt::Vertical);
ui->webView->setHtml(html);
}
void MainWindow::restoreScrollBarPosition()
{
// restore previous scrollbar position
ui->webView->page()->mainFrame()->setScrollBarValue(Qt::Vertical, scrollBarPos);
}
Perhaps the size of the page changes. Call setScrollBarValue when contentsSizeChanged is emitted by the frame (typically webView->page()->mainFrame()).
I've got a spark List with an item renderer. When I click on an element, the renderer becomes larger and when I click again, it becomes small again.
The problem is that list doesn't resize with the content. I've tried to dispatch an event from the renderer passing its content size and resize list in this way:
private function refreshList(event:ResultEvent):void
{
var size:Number = (event.result as Number) + 6;
if (size >= mylist.width)
{
consultingNumber++;
mylist.width = size;
}
else
{
consultingNumber--;
if (consultingNumber == 0)
mylist.width = size;
}
mylist.invalidateDisplayList();
}
consultingNumber is the number of 'opened' renderer.
It works quite well, but when all renderer is 'closed' an horizontal scrollbar appear.
Tracing list's width it result correct but the scrollbar is there even if I set horizontalScrollPolicy to off.
Try calling myList.invalidateSize() instead of myList.invalidateDisplayList();
Here is some more information about the flex component lifecycle which should get you on the right track:
http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/
http://www.slideshare.net/rjowen/adobe-flex-component-lifecycle-presentation
Cheers
I generate panels dynamically and put them in other states in that way so in one state you have a list of panels on the left and one big panel on the right for example in one state and when you click on the list on the left (with small panels) that panels takes the places of the big panel and the big one goes back in the place. So I have 50 panels on the left and i want to scroll them down but I don't want to big panel to go down with them I want it fixed.
this is where I got and I don't know how to do that
here is my code:
enter code here
protected function canvas1_creationCompleteHandler(event:FlexEvent):void
{
blurEffect= new BlurEffect(myBlur,myUnBlur);
listEventsResult.token=eventService.listEvent();
blurEffect.initFilter(event);
panels=generatePanels(panelNumber);
var vBox:VGroup= new VGroup();
states=statesList.toArray();
trace("stavi sequence i sostojba e"+ states[0].toString());
for(var i:int=0; i<panelNumber ;i++) // get panel from list panels and set states
{
addChild(panels.getItemAt(i) as Panel);
(states[i] as State).overrides=[ new SetProperty(panels.getItemAt(i),"x",110), new SetProperty(panels.getItemAt(i),"y",0),
new SetProperty(panels.getItemAt(i),"width",widthBigPanel), new SetProperty(panels.getItemAt(i),"height",heightBigPanel)
//,new AddChild(g2,(panels.getItemAt(k) as Panel))
//,new SetProperty(panels.getItemAt(i),"scaleZ",110)
];
trace("vlegov override za new state");
var yy:int=0;
for(var k:int=0;k<panelNumber;k++)
{
trace("menuvam state: yy = " + yy);
if(k!=i){
vBox.addChild(panels.getItemAt(k) as Panel);
(states[i] as State).overrides = (states[i] as State).overrides.concat([ new SetProperty(panels.getItemAt(k),"x",x), new SetProperty(panels.getItemAt(k),"y",yy),
new SetProperty(panels.getItemAt(k),"width",widthPanel), new SetProperty(panels.getItemAt(k),"height",heightPanel)
//,new AddChild(g1,(panels.getItemAt(k) as Panel))
]);
yy+=110;
}
}
for(z=0; z<(states[i] as State).overrides.length; ++z){
var tempSetProperty:SetProperty= (states[i] as State).overrides[z] as SetProperty;
trace("\nname: " + tempSetProperty.name);
trace("target: " + tempSetProperty.target);
trace("value: " + tempSetProperty._value);
}
setCurrentState("state0");
addChild(vBox);
}
//sequence.targets=panels.toArray();
t1.targets=panels.toArray();
}
You could do your regular scrolling, but add a vertical scroll bar listener, scroll="myScroll(event), that repositions the large panel as scrolling occurs (using something like the original x,y values of the panel and the verticalScrollPosition property).
Alternatively, you could add a second canvas on top of the first one, and sets its background to transparent. Place the large panel on the transparent canvas so it doesnt scroll (and put it back to the original canvas when scrolling completes if that suits).
Both of these are heavy(ish) on processing (especially the transparent canvas).