![slickgrid responsive resize window slickgrid responsive resize window](https://i1.wp.com/www.softerm.net/img/soft/vmware-workstation-logo.png)
Padding rows need to be dynamically added and removed accordingly. If the detail content is static, column resizing is a gimme.ĭetail content that responds to a change in column width (flowing text or wotnot) requires some work. Notice also on lines 148-150, i invoke the Slickgrid tCellCssStyles API to add a custom dynamic-cell css class that sets the overflow to visible in order to style away the per-cell overflow clipping. In the next fiddle, on line 107, see the onRenderRow implementation of this interface: The Slickgrid API provides row-based styling via the Grid.getItemMetadata callback interface. To do dynamic row-heights per-cell, we employ a similar trick but we must also deal with a few side-effects:~ styling away the row divisions But it involves a slight hack and in any case does *not exactly meet the OP requirements which i claim is possible. &imo it is the correct pattern & how i am choosing to implement my own stuff using Slickgrid. Incidentally, this is the kind of approach that the also excellent Datatables provides (almost) natively through it's API. *- generic slickgrid padding pollyfill -*/ webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) įont-family: Arial, Helvetica, sans-serif īackground: url() no-repeat center center wire up model events to drive the grid per DataView requirements _grid=new Slick.Grid("#grid-simple", _dataView, _gridColumns) Item._height=(item._sizePadding * _grid.getOptions().rowHeight) Item._sizePadding=Math.ceil((oookCount*lineHeight) / _grid.getOptions().rowHeight) Var lineHeight=13 //we know cuz we wrote the custom css innit ) worst-case: create an invisible dom node now &find it's height. calculate padding requirements based on detail-content. Item._detailContent=oookContent.join("") &omit a final closing detail container that would come next Html.push("",item._detailContent,"") //sub ctr for custom styling
![slickgrid responsive resize window slickgrid responsive resize window](https://www.drupal.org/files/issues/Screenshot%202014-11-18%2016.50.04.png)
Html.push("") //shift detail below 1st row slick-cell to escape the cell overflow clipping. nice =) ~no need to apply a css change to the parent so our detail becomes a child directly of insert our detail div as a new column ) ~since it wraps whatever we provide final closing div for the detail ctr div causes the slickgrid renderer to putting in an extra closing div after the closing toggle div and ommiting a Var rowHeight=_grid.getOptions().rowHeight If (item._isPadding=true) //render nothing Var onRenderIDCell=function(row, cell, value, columnDef, item) this just builds our expand collapse button additional hidden padding metadata fields Var getPaddingItem=function(parent, offset)įor (var prop in _data) item=null by ~ visit: //have all the fun with it ) vxx. cater for folks that wanna bung loads of stuff in a field & see it all. example codez re trying to create a grid with rows of dynamic height to