Ask Question

How to freeze a column in the grid

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

at 09 Aug 2020 Omu
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); }
Omu

answered at 17 Aug 2020
- 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