How to freeze a column in the grid

I would like to freeze the first 2 columns in a grid from moving when the user moves the horizontal scroll bar

Chad

asked at 08 Aug 2020

our grid doesn't have such feature but we'll update this post if we get a hack solution

our grid doesn't have such feature but we'll update this post if we get a hack solution
at 09 Aug 2020 Omu
UPDATE: please see our new demo https://demo.aspnetawesome.com/GridFrozenColumns

UPDATE: please see our new demo https://demo.aspnetawesome.com/GridFrozenColumns
at 07 Oct 2020 Omu

Answers

you can use this script to freeze columns in our grid, example:
    $(function () {
        freezeColumns('Grid1', 2);
    });
you can't use it on grids with `ColumnsPersistence`, this will be solved when we release the next version
js function:
    function freezeColumns(gridId, count) {
        var g = $('#' + gridId);
        var o = g.data('o');
        var cont = g.find('.awe-content');
        var prevSl = cont.scrollLeft();
    
        var columnw = o.cw;
        var colgroups = g.find('colgroup');
        var hrow = g.find('.awe-hrow');
    
        awe.bind(o, g, 'aweheaderinit', reset);
    
        awe.bind(o, g, 'aweinlineedit aweinlinecancel aweinlinesave',
            function () {
                reset();
                onScroll(cont.scrollLeft());
            });
    
        awe.bind(o, cont, 'scroll', function (e) {
            onScroll(e.target.scrollLeft);
        });
    
        function setColW(col, w) {
            var cg = colgroups.find('[data-i=' + col.ix + ']');
            var cix = cg.index();
    
            if (awef.isNull(col.fzo)) {
                var defw = col.W || col.Mw || columnw;
                col.fzo = {
                    colw: defw,
                    w: col.W,
                    mw: col.Mw,
                    r: col.R
                };
    
                col.R = false;
    
                // set header
                var hcol = hrow.find('[data-i=' + col.ix + '] .awe-col');
    
                hcol.width(defw - 17);
                hcol.css('float', 'right');
                hcol.parent().addClass('o-fzct');
    
                g.find('.awe-row').each(function (i, el) {
    
                    var td = $(el).find('td').eq(cix);
                    td.addClass('o-fzct');
    
                    var ccont = td.find('.oinlc, .o-fcell');
    
                    if (ccont.length) {
                        ccont.addClass('o-fzcc').width(defw);
                    } else {
                        var cellcont = td.html();
                        td.html($('<div class="o-fzcc o-fzw"></div>').width(defw).append(cellcont));
                    }
                });
            }
    
            cg.css('width', w);
            col.W = w;
            col.Mw = w;
        }
    
        function restore(col) {
            var cg = colgroups.find('[data-i=' + col.ix + ']');
            var fzo = col.fzo;
            if (awef.isNotNull(fzo)) {
                col.W = fzo.w;
                col.Mw = fzo.mw;
                col.R = fzo.r;
    
                cg.attr('style', '');
    
                col.fzo = null;
    
                if (col.W || col.Mw > o.cw) {
                    cg.width(col.W || col.Mw);
                }
    
                var hcol = hrow.find('[data-i=' + col.ix + '] .awe-col');
                hcol.attr('style', '');
                hcol.parent().removeClass('o-fzct');
    
                var cix = cg.index();
    
                g.find('.awe-row').each(function (i, el) {
                    var td = $(el).find('td').eq(cix);
                    var fzcc = td.find('.o-fzcc');
                    if (fzcc.hasClass('o-fzw')) {
                        td.html(td.find('.o-fzcc').html());
                    } else {
                        fzcc.removeClass('o-fzcc');
                    }
    
                    td.removeClass('o-fzct');
                });
            }
        }
    
        function reset() {
            prevSl = 0;
            awef.loop(o.columns,
                function (col) {
                    restore(col);
                });
        }
    
        function onScroll(sl) {
            var delta = sl - prevSl;
    
            if (delta) {
                var scont = cont.find('.awe-tablw');
                var hscont = g.find('.awe-colw');
                var columns = o.columns;
    
                prevSl = sl;
    
                var avw = sl;
                var minw = g.data('o').gl * 16;
                var viscoli = 0;
                for (var i = 0; i < columns.length; i++) {
                    var col = columns[i];
                    if (col.Hid) continue;
    
                    var defw = col.fzo && col.fzo.colw || col.W || col.Mw || columnw;
                    if (viscoli > count - 1) {
                        if (avw <= 0) {
                            restore(col);
                            minw += defw;
                            continue;
                        }
    
                        avw -= defw;
    
                        if (avw >= 0) {
                            // hide column
                            setColW(col, 0.00001); // just 0 will not work on chrome when grouping
                        } else {
                            // set w
                            var w = defw - (defw + avw);
                            minw += w;
                            setColW(col, w);
                        }
                    } else {
                        // frozen col
                        minw += defw;
                    }
    
                    viscoli++;
                } // end for
    
                scont.css('margin-left', sl).css('min-width', minw);
                hscont.css('margin-left', sl).css('min-width', minw);
    
            } // end if delta
        }
    }
and css:
    .o-fzcc {
        float: right;
        padding: 0 1.4em;
    }
    
    .o-fzct {
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
    }

you can use this script to freeze columns in our grid, example:

$(function () {
    freezeColumns('Grid1', 2);
});

you can't use it on grids with

ColumnsPersistence

, this will be solved when we release the next version js function:

function freezeColumns(gridId, count) {
    var g = $('#' + gridId);
    var o = g.data('o');
    var cont = g.find('.awe-content');
    var prevSl = cont.scrollLeft();

    var columnw = o.cw;
    var colgroups = g.find('colgroup');
    var hrow = g.find('.awe-hrow');

    awe.bind(o, g, 'aweheaderinit', reset);

    awe.bind(o, g, 'aweinlineedit aweinlinecancel aweinlinesave',
        function () {
            reset();
            onScroll(cont.scrollLeft());
        });

    awe.bind(o, cont, 'scroll', function (e) {
        onScroll(e.target.scrollLeft);
    });

    function setColW(col, w) {
        var cg = colgroups.find('[data-i=' + col.ix + ']');
        var cix = cg.index();

        if (awef.isNull(col.fzo)) {
            var defw = col.W || col.Mw || columnw;
            col.fzo = {
                colw: defw,
                w: col.W,
                mw: col.Mw,
                r: col.R
            };

            col.R = false;

            // set header
            var hcol = hrow.find('[data-i=' + col.ix + '] .awe-col');

            hcol.width(defw - 17);
            hcol.css('float', 'right');
            hcol.parent().addClass('o-fzct');

            g.find('.awe-row').each(function (i, el) {

                var td = $(el).find('td').eq(cix);
                td.addClass('o-fzct');

                var ccont = td.find('.oinlc, .o-fcell');

                if (ccont.length) {
                    ccont.addClass('o-fzcc').width(defw);
                } else {
                    var cellcont = td.html();
                    td.html($('<div class="o-fzcc o-fzw"></div>').width(defw).append(cellcont));
                }
            });
        }

        cg.css('width', w);
        col.W = w;
        col.Mw = w;
    }

    function restore(col) {
        var cg = colgroups.find('[data-i=' + col.ix + ']');
        var fzo = col.fzo;
        if (awef.isNotNull(fzo)) {
            col.W = fzo.w;
            col.Mw = fzo.mw;
            col.R = fzo.r;

            cg.attr('style', '');

            col.fzo = null;

            if (col.W || col.Mw > o.cw) {
                cg.width(col.W || col.Mw);
            }

            var hcol = hrow.find('[data-i=' + col.ix + '] .awe-col');
            hcol.attr('style', '');
            hcol.parent().removeClass('o-fzct');

            var cix = cg.index();

            g.find('.awe-row').each(function (i, el) {
                var td = $(el).find('td').eq(cix);
                var fzcc = td.find('.o-fzcc');
                if (fzcc.hasClass('o-fzw')) {
                    td.html(td.find('.o-fzcc').html());
                } else {
                    fzcc.removeClass('o-fzcc');
                }

                td.removeClass('o-fzct');
            });
        }
    }

    function reset() {
        prevSl = 0;
        awef.loop(o.columns,
            function (col) {
                restore(col);
            });
    }

    function onScroll(sl) {
        var delta = sl - prevSl;

        if (delta) {
            var scont = cont.find('.awe-tablw');
            var hscont = g.find('.awe-colw');
            var columns = o.columns;

            prevSl = sl;

            var avw = sl;
            var minw = g.data('o').gl * 16;
            var viscoli = 0;
            for (var i = 0; i < columns.length; i++) {
                var col = columns[i];
                if (col.Hid) continue;

                var defw = col.fzo && col.fzo.colw || col.W || col.Mw || columnw;
                if (viscoli > count - 1) {
                    if (avw <= 0) {
                        restore(col);
                        minw += defw;
                        continue;
                    }

                    avw -= defw;

                    if (avw >= 0) {
                        // hide column
                        setColW(col, 0.00001); // just 0 will not work on chrome when grouping
                    } else {
                        // set w
                        var w = defw - (defw + avw);
                        minw += w;
                        setColW(col, w);
                    }
                } else {
                    // frozen col
                    minw += defw;
                }

                viscoli++;
            } // end for

            scont.css('margin-left', sl).css('min-width', minw);
            hscont.css('margin-left', sl).css('min-width', minw);

        } // end if delta
    }
}

and css:

.o-fzcc {
    float: right;
    padding: 0 1.4em;
}

.o-fzct {
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}

Omu

answered at 17 Aug 2020

Thank you I will give a try and let you how I make out

Thank you I will give a try and let you how I make out
at 17 Aug 2020 Chad

please Sign In to leave an answer