ExtJs How do I scroll to the bottom of a grid? - javascript

I am making a web-based logviewer using extjs.
I would like new log-lines to be added to the bottom of my gridview as it saves cpu by not requiring a sort to move it to the top of the grid (plus its how my coworkers prefer it).
My problem is that ideally the grid would scroll to the bottom after a new row is added.
I have been looking through the documentation and I cannot figure out how to do this. I just see a method to scroll to the top.
Any ideas?
Thanks!

Use GridView's focusRow method, e.g.:
myGrid.getView().focusRow(20);
If you don't already have the row index you'll have to retrieve it using one of GridView's related methods for finding a row.

Related

Is there a way to disable Angular Grid virtualization, i.e. Angular creating div's for grid based on height/width position?

I have a Angular grid (ag-grid) that will, based on scrolling/view, create div in the DOM to display data. I am writing a Selenium WebDriver test that would read the data from the grid and compare it to the data returned from the API.
Since some of the div's are not yet created (hidden behind Angular virtualization) WebDriver is not able to effectively capture the data.
Is there a way to force the grid to display all data?
there is a setting, gridOptions.rowBuffer, that tells the grid how many extra rows to render above / below the viewport. set this to a number greater than the number of rows you have and then all rows will be rendered. or if unsure, set it to 9999999.
ps you mention 'Angular Grid' and 'Angular Virtualisation'. to be correct, it is called 'Agnostic Grid' - the ag stands for AGnostic - and also the virtualisation is not Angular, grid grid has it's own implementation of row virtualisation.
Try explicitly clicking the scrollbar or panning the scrolled area in order to bring the desired div(s) into view to force Angular to instantiate the divs. You could try scroll-into-view on a known instantiated object on the edge of the instantiated div set, which would, I imagine, kick Angular into instantiating the ones just outside the view, in anticipation of continued scrolling. Wash, rinse, repeat if desired.
Here's a possibly helpful page about scroll to element in Selenium: Scroll Element into View with Selenium
Try setting domLayout to domLayout = 'autoHeight'

slickgrid how do you make the header row not scroll up and away

I just started using slickgrid. I was trying to find out how to make the header row not scroll away as the user scrolls down in the browser so long as part of the table is visible. I could not find any grid option or api method that does that.
Is this possible to do using a slickgrid api? My apologies if this has been asked before - I could not find it in search.
Thanks.
I don't know what method you used for that.
I suggest you that us scrollRowIntoView
mySlickGrid.scrollRowIntoView(90, 6);
scrollCellIntoView takes in a row as an argument that needed for colspan support. Without it, SlickGrid wouldn't be able to uniquely identify the cell

jQuery and HTML5 Drag and Drop into Table (Scheduler)

I've been using jsfiddle.net to try and prototype a scheduler where the items to be scheduled are dragged and dropped into it. I've gotten dragging and dropping from an "unassigned" list and onto the schedule table working. I've also gotten the ability to remove from the schedule table working. What I'm having a difficult time wrapping my head around is moving an item in the table to another part of the table.
The fiddle is located here. I'd appreciate any suggestions on getting internal drag and drop to work. I've been working on this all day and I'm starting to get blurry vision. Oh, and by all means if you think what I'm doing can be done better, please make the change, just let me know what version the fiddle is up to.
UPDATE
As per #SMathew and #darksky I've rebuilt the whole fiddle where I'm not directly shifting the table cells around, but instead their content.
I know you guys recommended using divs and/or spans, but I want to use the structure of the table, especially the rowspan to designate the height of the cell in 30 minute increments. It does work a lot better now, with the only bug being moving cells (or moreso their contents) around because I have to restore cells affected by the rowspan at the source site and remove the cells that will conflict with the rowspan at the target site.
The updated fiddle can be found here.
UPDATE 2 (FINAL)
So, I went back to the drawing board again, and after 64 fiddles, I finally got it to do what I want. In the end, the trick to get everything to work fine without manipulating the structure of the table. All I had to do was set cells that are in the way of a rowspan to display: hidden.
Anyway, for anyone whose interested, the new fiddle is here. I did discover that Chrome has some issues handling the API. I've noted them in the fiddle (along with a partial rant).
The problem is that you are trying to make the td elements draggable. When you remove/insert td elements from a table like that, you have to create a bunch of empty cells to balance it out. I would suggest keep the table intact and wrap draggable elements in a div or span tag. This way the table structure never changes. Your code will also be much simpler and efficient.

Timeline/Schedule View using QML

I'm trying to implement a Timeline View (more specifically, a schedule) which looks like this:
http://img52.imageshack.us/img52/5369/schedulek.png
I tried implementing it with nested ListViews, where the the main ListView is Vertical and its child ListViews are the horizontal programs.
Navigating left or right the view updates the ContentX of each child (Not sure its very efficient..)
Navigating up or down should get the coordinates of the current position of the highlight in the list and highlight the appropriate item in the ListView below (or above)..
I'm not sure if this solution is efficient enough..
if you see a better way implementing this please comment..
Thanks
Initially I'd think of a Flickable (with horizontal only) plus a Column of ListViews. Keep the nested ListViews static and only use the Flickable for scrolling.

SlickGrid with first column fixed

Is it possible to make the first column of a SlickGrid fixed? So that it is always visible during horizontal scrolling, like the header-row?
Thanks for help!
There was another forum link (can't find it now) that lead my to JLynch's fork. He maintains both a 1.4.3 tag with his patches for frozen columns and rows, as well as maintaining a 2.0 head. Here is the 2.0 example with both frozen rows and columns.
In that example, the author uses a couple additional options properties:
,topPanelHeight: 25
,frozenColumn: 2
,frozenRow: 5
Hopefully this does what you want without having to hack too much on the core!
I think you can make in the event .onViewportChanged() the next steps:
Get the columns with .getColumns() and stored in an array variable arrColumns.
Then detect the first column.
Store the data with .getData() in an array variable arrData
Sort arrColumns putting the first column at the beginning.
Set the columns in the new arrColumns with .setColumns()
Reassembly arrData with the order of the new arrColumns.
Call .resizeCanvas()
Cross your fingers. :D
Sorry but I don't find a method or an option in that you can make this behavior in the way that you want.
Well, see what you think of this. It is far from perfect, but it is an idea. I would make something better if the method scrollTo() would be public.
I know this doesn't fully match your needs, but you can completely avoid horizontal scrolling by setting forceFitColumns to true in the options object.
I reckon that this behavior would be undesirable for users with a very small screen.

Categories

Resources