Slickgrid: End column automatically sorts to use all remaining space

Question

I use SlickGrid and struggle to find an elegant solution for the following:

• All columns must have a specific initial width when first rendering, but then resize them
• The end column should automatically fill the remaining column space when the window is resized
  

I have seen:

Make one column fill with the remaining content in SlickGrid without messing up the column width columns
resize grid when resizing browser window
How to authorize a column in SlickGrid?

But they don't seem to do what I need. If I use the forceFitColumns parameter, then all columns will be authorized (unless I add maxsize to them). Using resizeCanvas on window.resize works well - but it still only works if forceFitColumns is true.

If I set minWidth=maxWidth - then I cannot resize the column.

Any suggestions?

Answer 1

I'm not sure that it will fix all your problem, but in my case I use forceFitColumns , and then depending on how I want my column to respond to size, I will use a combination of minWidth and width , and in some cases those which will never exceed some width, then I would use maxWidth . Now the problem is that when setting the parameter minWidth the same as maxWidth , this, of course, will make it unrecoverable, think that you set the minimum and maximum, SlickGrid respects it, now it can size it afterwards. I also have my grid, which occupies 95% of the width of my screen, so I have a small addition on the side, and with it I use automatic resizing using jQuery.

Here is my code:

 // HTML Grid Container <div id="myGridContainer" style="width:95%;"> <div class="grid-header" style="width:100%"> <label>ECO: Log / Slickgrid</label> <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow1()"></span> </div> <div id="myGrid" style="width:100%;height:600px;"></div> <div id="myPager"></div> </div> // My SlickGrid Options var options = { enableCellNavigation: true, forceFitColumns: true }; // The browser auto-resize $(window).resize(function () { $("#myGrid").width($("myGridContainer").width()); $(".slick-viewport").width($("#myGrid").width()); grid.resizeCanvas(); }); 

EDIT
I was also annoyed by the fact that using all of these elements prevents you from resizing the column. I came to another solution, much later, which makes the fields expand (gain width) and does not block you after resizing. So this is a new solution, which I believe gives you exactly what you are looking for ... First of all, remove the maxWidth property and use only minWidth and width , in fact you could probably only use width if you are wanted . Now, unfortunately, I had to change 1 main slick.grid.js file to the following code:

 //-- slick.grid.js --// // on line 69 insert this code autoExpandColumns: false, // on line 1614 PREVIOUS CODE if (options.forceFitColumns) { autosizeColumns(); } // on line 1614 change to this NEW CODE if (options.forceFitColumns || options.autoExpandColumns) { autosizeColumns(); } 

and then back to the definition of my grid, I will replace my previous parameters with the following:

 // My NEW SlickGrid Options var options = { enableCellNavigation: true, forceFitColumns: false, // make sure the force fit is false autoExpandColumns: true // <-- our new property is now usable }; 

with this new change, it has some strength functionality that fits (expands), but does not limit you after you resize the columns after this happens. I also tested it with a Picker column if you hide a column that resizes the rest accordingly. I also modified the slick.columnpicker.js file to include a checkbox for this property, but this is completely optional ... I can add code for this if one of you wants this too. Voila !!! :)

CHANGE No. 2
I realized much later that there is no need to modify the main file, we can just call grid.autosizeColumns() after creating the grid. Like this

 var options = { forceFitColumns: false }; grid = new Slick.Grid("#myGrid", data, columns, options); // will take available space only on first load grid.autosizeColumns(); 

This will automatically resize the columns to fit the screen on first boot, but will not give you the forceFitColumns flag forceFitColumns .

Answer 2

I know this is pretty late for this answer.

But I managed to do this without having to change things to slick.grid.js or set min / maxWidth in an array of columns.

Instead, I did to iterate over the array of columns, adding the width field values ​​for each column, and then I did a simple math count to set the last column width as innerWidth - totalColumsWidth + lastColumnWidth.

code:

 function lastColumnWidth(columns) { var widthSum = 0; angular.forEach(columns, function(col) { if(col.width) { widthSum = col.width + widthSum; } }); if(window.innerWidth > widthSum) { columns[columns.length-1].width = columns[columns.length-1].width + (window.innerWidth - widthSum); } return columns; }