Skip to content
This repository

Frozen Column Functionality Implemented #208

Open
libory opened this Issue · 71 comments

15 participants

libory Justin Lynch Jeremy Gayed varmint slubowsky Kallin Nagelberg Michael Leibman Jared Scott Joerg abhinavsinghvi zo62 ApurvKalyan davidmoshal Oliver Sintim-Aboagye Eric
libory

Hello Every One!
I have just created a nice implementation for "Frozen Column" therefore I would like to share it with the
community!!!...The code added is for version 1.3 but it is portable for newer version as well.

Justin Lynch

Very nice! Have you posted the code anywhere?

libory
Justin Lynch

I'm not seeing an attachment. Maybe you can post it to the Google Group for SlickGrid?

libory
libory
libory

it seems a brand new CVS to learn at the end so I just put the code in a new issue..!!

libory

it is an issue in "Frozen-Column-Implementation" public repository

Jeremy Gayed

Could someone link to that here? Or add it to this repo with a pull request?

Justin Lynch

libory created a jsFiddle with the modified slick.grid.js http://jsfiddle.net/YdJ7T/2/

It works pretty well. Great job!

Here's the gist: https://gist.github.com/1175470

libory
Justin Lynch

I've only noticed two things.
1) The right canvas seems to lag slightly behind the left canvas when scrolling. Nothing major, just wondering if anything can be done to scroll both canvases more synchronously.
2) I'd like to be able to set the frozen columns to an existing grid. I tried using grid.setOptions, but that doesn't work because the grid is already loaded on the page. Do you think you could enable frozen columns similar in how the column picker can hide/show columns?

libory
varmint

Can someone please port this to the 1.4.3 version? I tried to, but I'm not that good!

libory
Justin Lynch

I started porting this to 1.4.3 over the weekend. I'm about 90% complete. The only thing that doesn't work is when you move columns. I can post what I have in a few hours...

Justin Lynch

I've finished porting to 1.4.3.

https://gist.github.com/1227887

varmint

Awesome! How can I get just the slick.grid.js?

varmint

Hmmm. Almost! It looks like the unfrozen columns get out of sync. Just add frozenColumn:0 to example3-editing.html and you will see that the first non-frozen column takes on the data and behavior of the frozen column. All subsequent columns take on the previous columns behavior and data. You have an index value off by one! Fix that and this baby is ready to rock!

Justin Lynch

Can you elaborate on what you mean by the first non-frozen column takes on the data and behavior of the frozen column? I changed example3-editing in my local code like you said, but I'm not seeing a problem.

varmint

Did you click on the cell and try to edit data? In my case, I froze the first column. If I click on row 1 column 2, it showed the data from row 1, column 1.

libory
Justin Lynch

Editing with frozen columns is now fixed.

https://gist.github.com/1233925

varmint

Works when you predefine the grid. Doesn't work when you dynamically build your grid. In my app, I don't know the number of column beforehand. To get around this, I created X dummy columns at definition time, where X equals the number of frozen columns I want. Then the grid is loaded dynamically. It appears OK until you start scrolling or using the keyboard arrows. The rows of the two panes get out of sync and painting the grid no longer works. I very much appreciate everything you've done so far but I think we need an implementation that works for static and dynamic columns.

libory
Justin Lynch

Painting and scrolling issues fixed: https://gist.github.com/1239709

varmint

Man, I'm like the bearer of bad news. Still not working properly. 1. For my grid, this code wont show the either scroll bar. 2. When I use the keyboard to navigate down to the last row painting and rows get messed up. 3. I looked at your example-frozenColumns.html and when I grab the vertical scroll bar tracker and pull it down, the grid no longer paints. If you want, you can send your code directly to me and maybe I can QA it for you or I can send you an example of how I use the grid.

Justin Lynch

No worries. I'd like to take you up on that example of how you use the grid. I don't experience any of the 3 issues you do so our environments must be different. Also, which version of jQuery and jQuery UI are you using? Browser?

varmint

Download this and click a few drop downs. You'll see the data load and the vertical scrollbars wont show up. Tried this in IE and Chrome. https://gist.github.com/f7c4e8a222352d71b6d4

Justin Lynch

I'm hoping this fixes it: JLynch7@5f666f9

varmint

Nope. Those variables are not even defined. I changed them to
$(canvas0).css("height",h);
$(canvas1).css("height",h);

and it still doesn't work.

Justin Lynch

Try using slick.grid.js and slick.grid.css from this branch: https://github.com/JLynch7/SlickGrid/tree/1.4.3-dynamicFrozenColumns

varmint

No go. Take my gist and stick it in the examples folder and run it. It loads 20 rows and the vertical scroll bar does not show up. Using the keyboard keys press down to the bottom and you will see the rows go out of sync.

Justin Lynch

It looks like the setData call wasn't re-rendering everything. This should fix your issue: JLynch7@6ebd21d

Also, I'm starting to implement frozen rows. So far its not perfect, but I'm close: https://github.com/JLynch7/SlickGrid/tree/1.4.3-frozenRows

Justin Lynch

Latest frozen row and frozen column implementation for 1.4.3 available
https://github.com/JLynch7/SlickGrid/tree/1.4.3-frozenRowsAndColumns

varmint

I think you got it. The only kinda hacky thing I had to do was for dynamic column loading. In my example I needed to freeze the first two columns. The number of columns after those two is dynamic so I can't define them before the data is loaded. All I had to do was define two blank columns ahead of time. Then when I load the data and dynamic columns the first two columns remain frozen! Thanks so much for your effort. This was a show stopper for my projects and now it works!

slubowsky

I just tried this fork and found that it seems to work pretty well (though there is a slight lag between when the unfrozen column are scrolled vertically and the frozen column moving to match up).
I did find that the changes break example12-fillbrowser.html (which of course is what I need in combination with a frozen column :( ). Resizing the browser gives various flavors of badness in both IE9 and firfox 9.0.1.
I also found that in IE 9 scrolling my example (but didnt see this with example12-fillbrowser.html) all the way to the bottom right of the grid often resulted in the grid endlessly jumping back and forth a few pixels.
Any ideas?
Thanks

Justin Lynch

I've notice the lagging as well. The latest versions of Firefox and Chrome do not lag anymore. In addition, the upgrade to jQuery 1.7 helps as well. Lagging is still present in IE9, so I'll have to look into it more.

I've updated my fork with various updates and tested the fillbrowser example successfully. Can you elaborate on what breaks when resizing the browser?

The jumping issue should be fixed in my latest update as well.

slubowsky

Just got what I think is latest frozen column fork (https://github.com/JLynch7/SlickGrid/tree/2.0-frozenRowsAndColumns) and find that in my example I still see some minor lagging even in Firefox 9.0.1 (but don't see it when I run the included example-frozen-columns.html). Only obvious difference I can think of is that my frozen column has nested elements (as in example5-collapsing.html).

I do also still see jumping in IE in my example. Issue seems to be related to vertical scrollbar being pushed just a bit to far to the right (especially when at bottom) by the grid and then jumping back in. Horizontal scrollbar doesn't seem to be involved.

The problem I mentioned with example12-fillbrowser.html seems to be unrelated to the frozen columns. I thought it resized the grid when the browser was resized with the original code but just noticed issue 263 which seems to indicate I am mistaken.

Kallin Nagelberg
Kallin commented

I'm really interested in using frozen columns for my project, but would rather stay on the original project than use a fork. Are there any plans to pull in JLynch7's work? It looks like he has kept it up to date with the changes happening in this repo.

libory
libory commented
Kallin Nagelberg
Kallin commented

Not sure what you mean by that libory.

libory
libory commented
Kallin Nagelberg
Kallin commented

JLynch7's? For sure, he has a good example here, http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html . What I meant by my original comment was that I hoped that mleibman could pull in the frozen column code to make it part of the main slickgrid project.

libory
libory commented
Michael Leibman
Owner

Column resizing seems to be broken in many ways. Also, rows get out of sync when filtering.

This is the reason I haven't merged any of the frozen columns implementations in yet. The base case is easy to do, but to make it work with all the existing features is a lot of work. Additionally, I'd like to reimplement the column headers first so that features like setting a frozen column or dragging a column to group by it, etc. are doable.

Justin Lynch

@mleibman
How are you planning to reimplement the column headers? I'm currently working on the column resizing bug(s) so I'm interested in any feedback you have. My current sticky point is resizing columns with forceFitColumns enabled. I understand the concept behind forceFitColumns, but because I've split the columns into 2 "panes", the dynamic width calculations don't work as intended. I've toyed around with a few ideas, such as adjusting the css left value of the right pane, but nothing has worked 100% yet. Depending on your reimplementation plans, it may make this bug fix easier.

If you noticed any other bugs with column resizing, please let me know.

I hadn't noticed the row filtering bug... I'll add it to my to-do list. In general, I'm happy to work on any bugs/upgrades to bring this functionality up to a level acceptable for merging with your main repo

libory
libory commented
Justin Lynch

@libory Sorry about that, my comment was directed towards mleibman

To answer your question. I've evolved your initial implementation of frozen columns to include frozen rows and I've maintained it through the latest versions of SlickGrid.

Justin Lynch

@mleibman I fixed column resizing and a number of other bugs. After these latest changes, I'm not seeing the filtering bug you mentioned. Do you mind confirming it still exists?

Jared Scott

@JLynch7 I was looking at cleaning up some of the code in your branch, however I found it extremely difficult to parse out your changes due to differences in formatting between your version and @mleibman. would it be possible for you to create a patch that I can apply? I am thinking about extending slickgrid to include a simple AOP framework so that in the future extending base functionality can be abstracted out when doing development liket his

abhinavsinghvi

@mleibman Just wondering if you have any plan to merge frozen column changes in original slick grid code some time soon?

Thanks.

Michael Leibman
Owner

Just to reiterate, I will not be merging existing frozen columns forks or writing my own until I've resolved all of the edge cases. This is a very complicated feature to do right and I have no intention of rushing it. This will take time.

Jared Scott

@mleibman agreed. Would it be beneficial to create a shared working draft consisting to help identify the edge cases and a process to implement the feature or is this something you would rather manage on your own?

Michael Leibman
Owner

As a first step, I need to rewrite the column headers implementation (rendering, resize/reorder, autosize, etc.) and define how they should work in the context of frozen columns.

Justin Lynch JLynch7 referenced this issue in JLynch7/SlickGrid
Closed

Merging with 2.1 #30

zo62
zo62 commented

I am working off slickgrid v2.1 and trying to find a fix for a frozen column issue that was mentioned above. (When scrolling vertically (not by clicking on the arrow keys) there is a lag between the left and the right panel. I have digged into the code and noticed there is a file called slickgrid.freeze that is triggering off the scroll event that renders out the left panel, I also noticed there is a syncscrolling variable I set to to true but there is still some lagging between the panels. Please Help!!

ApurvKalyan

@JLynch7 any plans to merge it with the latest version of slick?

davidmoshal

Hi, trying to use Frozen Columns, though not sure which version of SlickGrid to use:

a) mliebman-master
b) JLynch7-master
c) JLynch7-2.0-frozenRowsAndColumns
d) JLynch7-1.4.3-froenRowsAndColumns
e) dholcombe-master

note: support for IE8 is a requirement

Anywhere where one can find the status on this?
There seem to be 960 forks of this project?

David

Michael Leibman
Owner

There is no option (a).

davidmoshal

Thanks for the quick response.
OK, so a) is out, any thoughts on the rest?
dholcombe vs JLynch7 ?

David

davidmoshal

and there's this one:
e) guriddo

Justin Lynch
davidmoshal

Thanks JLynch7, I can confirm that (c) JLynch7-2.0-frozenRowsAndColumns works for frozen columns, even on IE7.

Impressive, kudos to mliebman and JLynch7 !

Note: fixed rows seems to be broken (at least in IE7-10 and chrome), though not a requirement for me right now.

David

note: extremely impressive response times from mleibman and JLynch7, especially on Thanksgiving!
confidence in project++

Oliver Sintim-Aboagye

Hi,
I' have an issue with JLynch7-2.0-frozenRowsAndColumns.
I have frozen the first column.
When i scroll to the right panel horizontally to the end (or to a point where the remaining horizontal scroll width is equal to or less than the size of the frozen column), then the frozen column stops getting rendered.

So new items don't get rendered. Changes to the right panel causes already rendered frozen column items to be cleared, and the vertical scrollbar clears all the rendered items in the frozen column.

This only happens when the horizontal scrollbar is used and is at a point as mentioned above.

Any ideas why this is happening?

Please take a look here

When Not Scrolled : http://www.oliversa.net/dc/images/slick_01.png
When Scrolled : http://www.oliversa.net/dc/images/slick_03.png

Jared Scott
gcko commented

@spidergeuse if you have an issue with the functionality on a branch owned by @JLynch7 , Please open an issue on his repository

Eric

I'm interested in building this feature. Not, I think, in a pin-all-left way like @JLynch7 has, but in a scroll-until-it-sticks way like the iphone contacts screen. @mleibman, when you said a year ago you wanted to re-write the column headers implementation, I have two questions:

  1. Does that still need to be done? I do wonder why they set their size inline instead of using the r0 l0 classes.
  2. Do you think of rewriting the actual headers of the columns, or the metadata row that turns on with the option showHeaderRow: true?
Eric

Sorry to bother you again, @mleibman. I understand you have other priorities right now. I need to build this, and if I do it your way, I'm reasonably confident of two things:

  1. It'll be the most performant implementation that still supports all the options
  2. It's likely to get merged in when you pick up SlickGrid again

In 2010, you said you might have an approach in mind:

I played around with several ways of implementing this, and I think I've found a good compromise. My fear was that it would be impossible to implement frozen columns without impacting the performance dramatically, but I was able to get the overhead down to at most 20%, and that I can live with.

Do you remember the approach you had in mind? A high level description or pseduocode would help immensely.

Michael Leibman
Owner

@SimpleAsCouldBe I was referring to the rendering aspect, IIRC. I don't have the exploratory code from back then saved anywhere, but I believe I was specifically concentrating on keeping the rendering speed (as determined by the scrolling benchmark) as fast as possible. I think what I was playing around is adding a second stringArray param to appendRowHtml() so that both sections could be built up quickly, and then doing a similar thing in render().

I have since then realized that this was the easy part. The messy part is the integration in the rest of the grid, but what makes it difficult is actually changing the grid API in a way that accommodates frozen columns. Having them be a natural part of a cohesive API is something that the forks don't seem to have addressed. That also includes figuring out the UI interactions like column resizing/drag'n'drop and most likely requires a column header code rewrite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.