I noticed an issue when I resize a column when columns our frozen. When I try to resize a column, the column before the one I want to resize is actually the one resized.

To duplicate for the column resizing eample (http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html) do the following.

1. Resize the "% Complete" Column. The Duration column is resized instead.

The weird thing is that it only seems to be a problem for some columns. I noticed this behavior with the "% Complete" and "Effort Driven" columns, but other columns work as expected.

We are currently replacing the mleibman slickgrid with yours to take advantage of the column freezing feature. However, some of our grids do not have an explicit height set on the div, but instead set the autoHeight option to true when initializing the grid. This results in the grid not showing up after the switch. Upon inspecting the dom, the data is all there, it just doesn't show up because the grid has no height.

The best way to reproduce is to take the the example1-simple.html example and add autoHeight=true to the grid options and remove the 500px height from the div with the id "myGrid".

onBeforeHeaderRowCellDestroy event is triggered after $headerRowL.empty() and $headerRowR.empty() calls. jQuery empty() method removes all child nodes, data and event handlers from the child elements so when onBeforeHeaderRowCellDestroy event is triggered there is nothing left to work with. It should be:

$headerRow.find(".slick-headerrow-column")
    .each(function() {
        var columnDef = $(this).data("column");
        if (columnDef) {
            trigger(self.onBeforeHeaderRowCellDestroy, {
                "node": this,
                "column": columnDef
            });
        }
    });

$headerRowL.empty();
$headerRowR.empty();

Add support for variable row height.

I really like the frozen column feature you have implemented. I am just wondering if there is any plans to merge this into mleibman/SlickGrid in the near future?

Thanks!

frozenRow & frozenColumn is not competitive with multi-cells selection
change example3-editing.html like below
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
frozenColumn: 0,
frozenRow: 1,
autoEdit: true,
frozenBottom:true
};
select cells with your mouse
and the rect of the cells is not correct

There are two parts to this issue:

1. Mousewheel events on the frozen columns do not scroll either the non-frozen or frozen columns. This can be tested in the frozen columns example.
2. Scrolling the frozen columns does not scroll the non-frozen columns. The only way to scroll the frozen columns by themselves is to click within the frozen column and drag the mouse below or above the canvas. Doing so scrolls the frozen columns without scrolling the non-frozen columns. This can also be tested in the frozen columns example.

After window resize, resizeCanvas is, in case there are frozen columns, not properly calculating grid's width.

When using other grid controls (e.g. devexpress) or even standard spreadsheets like excel, the way frozen columns work is that you get a single scrollbar that scrolls the unfrozen columns. In this implementation, we have two scrollbars, one for frozen section and the other is for unfrozen section. Is it possible to have only one scrollbar stretching across the entire grid that would only scroll the unfrozen part of the grid?

I am getting this error when using the cell editors. It only happens after I enter the edit state on a row in a cell then scroll down to select a different row. You must scroll off the current screen of rows to get the error message.

This also happens on the example @ http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html

Here is the full firebug error

TypeError: rowsCache[activeRow] is undefined
[Break On This Error]

rowsCache[activeRow].rowNode.removeClass("active");

Any help would be appreciated.

Thanks

The frozen columns and rows are really great. Thanks for creating this branch.
I am embedding multiple grids in a JQuery Tab UI element. The grids are created and populated dynamically. In the first tab, everything works great. But in the other tabs, the grid only shows the first couple columns, and the rest is blank. This occurs whether there are frozen elements or not. The exact same code looks correct with the slickgrid Trunk.
Screenshot is here: http://tinypic.com/r/2f092xj/6

Thanks for your help!

Hi,

On this example: http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html

press mouse button and scroll horizontally to the right, until the mouse goes outside the table. The frozen columns will be hidden in the left side, and you get empty space on right.

This issue appear only in Chrome and Safari (for mac and windows).

Later edit:
The problem was appear because .slick-pane have width:100%;

quick fix for this:

$paneWidth = $('.slick-viewport.slick-viewport-top.slick-viewport-right').width();
$('.slick-pane.slick-pane-top.slick-pane-right').width($paneWidth);
$('.slick-pane.slick-pane-header.slick-pane-right').width($paneWidth);

scenario:
200 rows with 3 frozen rows
200 columns with 3 frozen columns
move vertical scrollbar down
move horizontal scrollbar
Frozen rows are not redrawn (remains white)

I have implemented this branch of your the SlickGrid project in order to get the frozen columns feature (which by the is Awesome!), however, our cell range selector quite working and browser is throwing a javascript error in the slick.cellrangeselector.js file line 94

    var end = _grid.getCellFromPoint(
        e.pageX - _$activeCanvas.offset().left + _columnOffset,
        e.pageY - _$activeCanvas.offset().top + _rowOffset
    );

SCRIPT5007: Unable to get value of the property 'offset': object is null or undefined
slick.cellrangeselector.js, line 94 character 9

Can anyone offer a suggestion on how I can fix this?

You can confirm / test this issue in the example "example-spreadsheet.html". Cell range selection works fine in the mleibman/SlickGrid fork but doesn't work in this projects fork.

Add support for virtual columns similar to virtual rows

What about merging this nice piece of Software with the actual Version of mleibmann ?
There are a few bugs, which have been fixed in his Version.

I really love the "frozenColumn"-Feature here.

mliebman appears to have posted a newer version of SlickGrid than 2.0 Alpha, as shown in his examples. Do you plan on branching from the newer version?
We need to use your version, with frozen columns, for our application, so we have been using your branch (which we like very much, thank you!).

Just wondering before I dive into this fork. I'm researching my options.
Also do you have any documentation or design notes on how you implemented your frozen columns?

In example-header-row.html if you change number of columns to 20, header row doesn't get populated. (line 64)

Also line 57 in example-header-row.html is missing an comma

This is on branch SlickGrid-2.0-frozenRowsAndColumns

both calendar.gif and tick.png can't be visible when the html page is not under /examples/,for examples move the example3-editing.html under directory /examples/newpath/
I fixed the problom with that:
1、change /slick.formatters.js like that
...
var slickgrid_formatters_jspath=document.scripts;
slickgrid_formatters_jspath=slickgrid_formatters_jspath[slickgrid_formatters_jspath.length-1].src.substring(0,slickgrid_formatters_jspath[slickgrid_formatters_jspath.length-1].src.lastIndexOf("/")+1);

function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
return value ? "" : "";
}
...
2、change /slick.editors.js like that
this.init = function () {
...
var slickgrid_formatters_jspath=document.scripts;
slickgrid_formatters_jspath=slickgrid_formatters_jspath[slickgrid_formatters_jspath.length-1].src.substring(0,slickgrid_formatters_jspath[slickgrid_formatters_jspath.length-1].src.lastIndexOf("/")+1);

  $input.datepicker({
    ...
    buttonImage: slickgrid_formatters_jspath + "images/calendar.gif",
   ...
};
...

Wath happend to the byour frozen-columns feature for SlickGrid?
Did you stop to integrate frozen-columns into SlickGrid?
Is it still recommended to use the branch including frozen-columns?

Scrolling using mouse wheel only works in the non frozen section of the grid

How to reproduce:
Open example example-frozen-columns-and-rows.html
Scroll all the way to the bottom, press the up or down arrow on the scrollbar and move around. When you are at the last row, the rows are mismatched.

I tried the latest fix that fixed the autoHeight = true issue, but when using it with the frozenColumn option, no columns are frozen (or at least no horizontal scroll bars are shown). Also the scroll bar on the right of the grid (which really isn't necessary) acts a little weird (behavior differs between chrome and FF).

To reproduce, take the example-frozen-columns.html example and do the following:

1. Remove the style height from the myGrid div.
2. Add autoHeight = true to the grid options.
3. Reduce the number of data elements from 50000 to 25 or something smaller (Optional but makes it easier to test).

At the bottom right intersecting area of vertical and horizontal scroll bar area, when clicked and dragged by the user, it breaks the frozen column and the grid. Either the user has to replicate the action dragging back the opposite direction to bring back or refresh the page is the only option.

Hi - my first issue created on GitHub. Please let me know if the issue is unclear or the write-up is not optimal.

Using 2.0-frozenRowsAndColumns.

When a checkbox cell is selected and editable, clicking spacebar triggers a click and marks the checkbox as selected.

This triggers the slick.grid.js function:
handleClick(e)

Which calls
getCellFromEvent(e)

In the standard Slickgrid, the value of the selected cell is returned from getCellFromEvent().

In this fork, the row that is returned is based on which row the idle mouse is located on the grid.

If a user is using the keyboard, this means that the next line:
if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
return;
}

will not execute the "return;", and will continue execution for an invalid click event.

This causes the onClick events to trigger for a cell which is not being edited or clicked.

On all examples in firefox I get the below issue:

http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html

enclosed a screenshot if it helps.

PS: (using an older version - firefox 4.0)

Any help would be appreciated.

It appears that when 'forceFitColumns' option is set to true, the calculations in getCanvasWidth() are not correct for grids that require vertical scrolling and have no frozen columns (frozenColumn: -1). This ultimately leads to extra empty space on the right.

this issue happened in gh-pages branch , in master branch is ok

You can reproduce by dragging to the bottom and try scrolling up and down using mouse wheel.

http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html

Hi,

There is a bug in cleanupRows() method, removeFrozenRow flag logic should be reversed. It should be initialized to true and set to false within condition bellow.

How to reproduce:
Make rows highlight when hovering.
Highlight is only applied to the left or right pane but not the entire row.

When using row-level selection and hoving over the "frozen" section, only the frozen part of the row is highlighted. similarly when hoving over non frozen section, only that section is highlighted

My canvas didn't scale correctly to the full width of the div, but rather only to about 100px. After some investigation I found out that viewportW = parseFloat($.css($container[0], "width", true)); returns 101,xx, but not the real width of my div.

I then discovered that my div looks like this

Chaning it to absolute values, e.g.

FYI - With latest code removing a column by unchecking it in the column picker results in an error. For example go to:
http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html
right click in columns and uncheck the checkbox for title
Error - on slick.columnpicker.js line 102 - _self is not defined

After latest merge, behavior when column headers is resized is incorrect. Different bad behavior depending on which column is resized. Often you can cause a space to appear between frozen and unfrozen columns, can lose "line" dividing frozen column header and unfrozen column header, have also seen columns get out of sync with column headers.

Easily reproducible by running the example-frozen-columns.html in IE9 (didn't try any other browsers) and just randomly resizing various column headers

Description

With one or more frozen columns enabled, rows become offset between the frozen and non-frozen column when an editor is opened for a non-frozen column cell. This is an issue in Google Chrome only, and does not occur in Firefox or IE.

Version

f5b7d77

Browsers

Google Chrome (15.0.874.106)

Steps to reproduce

1. Open frozen columns example in Google Chrome.
2. Edit a cell in a non-frozen column.

I'm having issues getting the example to work with bootstrap. I was wondering if you could tell me the bits that relate to the frozen columns (beyond the option : numberCols thing), so just wanted to debug where I'm going wrong with it or where there may be a conflict between the two.

Thanks

I really like your implementation of slickgrid, Frozen Column, Row.
After some study, I decided to use your code on my project and seems work fine.
However, I found an issue that the Header columns scrolling is stopping at the certain points (but other data rows are scrolling fine >> horizontally).
If I remove option FrozenColumns, header column scrolling is fine to the end of the columns.
Would you check?
I tried to find what ? but could not find the solution from code yet.
Thanks

Add support for grouped columns

Unzoom twice(ctrl - )on the frozen columns example. Scroll to the bottom, row lines do not match up anymore.

I have tested in Chrome and IE9. Both browsers have same problem.

To reproduce it, reduce the height of the browser to make the vertical scrollbar visible (i.e. there is a vertical scrollbar of the body tag), you drag vertical scrollbar of the body tag to the bottom.

After that, you click in the middle of the grid and you will see the selection is shifted....

http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html

When I try to use the grid in the IE8 and IE9 and scroll down in the frozen columns, I found that the there would be an row offset between frozen columns and non-frozen columns.

http://jlynch7.github.com/SlickGrid/examples/example-frozen-columns.html

Hi,

Looks like you have done a great job.

I am using the latest version of SlickGrid which seems v. different to the 1.4 branch you have based this on. Do you have any plans on merging your changes forward (or getting the main branch of SG to include them).

Thanks

This code only pushes down grid canvas in the left grid panel and leaves the right panel unchanged:
grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);

Mliebman added new code, specifically a new function called scrollRowToTop() among other changes. Will you be updating your locking column branch to match his updates?

I am not able to get row reordering with a frozen column to work. I have a hunch this isn't possible, so before I painstakingly try to figure it out only to raise the white flag in defeat, I was wondering if you could give me a "yeh" or "neh" on being able to do this. All I've done so far is just add the "frozenColumn: 0" grid option to the row reordering example and got no love in return.

Thanks!

Steps:

go to http://jlynch7.github.io/SlickGrid/examples/example-frozen-columns.html

scroll to bottom, enter editor mode of Title, and enter test data. press enter.

fix, just one line (bottom one. In fact, don't reproduce my entire bit as I've extended it to use textbox data for Title1-Title4):

  grid.onAddNewRow.subscribe(function (e, args) {
    var item = {
        "num": data.length + 1, "id": data.length, "title": "New task", "duration": "1 day", "percentComplete": 0, "start": "01/01/2009", "finish": "01/01/2009", "effortDriven": false,
                "title1": $('#item1').val(), "title2": $('#item2').val(), "title3": $('#item3').val(), "title4": $('#item4').val()};
    $.extend(item, args.item);
    dataView.addItem(item);
    grid.invalidate();
    grid.scrollRowIntoView(grid.getDataLength(),true);
});

this leads to some bugs: rows removed after vertical scrolling appear only after horizontal scrolling because we have additional cleaning in render -

if (lastRenderedScrollLeft != scrollLeft) {
  cleanUpAndRenderCells(rendered);
}

the fix is probably to replace && with || in cleanupRows:

if ( ( ( i = parseInt(i, 10)) !== activeRow )
    && ( i < rangeToKeep.top || i > rangeToKeep.bottom )
    || ( removeFrozenRow )
    ) {
   removeRowFromCache(i);
}

Add support for sub-grids