We're using Handsontable to display charting information in certain cells and want our users to be able to resize most columns, but not columns with charts in them.
Does HoT feature a mechanism for disabling column resizing for certain columns or previewing / cancelling column resize?
You can use the beforeColumnResize (View in documentation) and return false in the method to abort the resize ;)
EDIT
You can use :
beforeColumnResize: function(currentColumn, newSize, isDoubleClick) {
if(this.getSelected() != undefined) {
return this.getPlugin('autoColumnSize').getColumnWidth(this.getSelected()[1]);
}
}
But when no selection before resize you can't prevent it :/
Related
I'm trying to access the currently-hovered series data and color via JavaScript. The data is available to the legend and tooltip, but I'm not sure how to directly access it.
It's possible to place the legend in an external container, but their code creates a lot of additional containers/wrappers which makes formatting difficult. This Github question addresses it, but no answer was provided.
Perhaps events could be used to detect changes in the legend text or tspan elements and then grab the new text, but I'm not sure how to do this (using amCharts events) and how efficient it would be (especially with multiple series and/or charts with synced cursors).
Another idea was to get the data based on cursor position, but this seems inefficient (cursorpositionchanged fires too often - on mouse/cursor movement even when the series data hasn't changed). Maybe it could be done more efficiently based on change in dateAxis value? For example, using the positionchanged event listener:
chart.cursor.lineX.events.on('positionchanged', function() {
// get series data and do something with it
});
At least when using chart.cursor.xAxis = dateAxis, the positionchanged event only seems to fire when the cursor jumps to a new value. So it would be more efficient than an event that fired on mouse/cursor movement.
Any suggestions would be appreciated.
UPDATE
By currently-hovered, I am referring to the series data and color accessible via the tooltip (for example) with the mouse over the chart.
Examples: CandlestickSeries and LineSeries
One method you can try is to set an adapter for tooltipText on the object of concern. Since this may run multiple times especially via a chart cursor, perhaps keep track of changes to the tooltip via monitoring the unique value, e.g. in the samples provided that would be the date field. The data you're looking for can be found in the adapter's target.tooltipDataItem. The color, if on the series, will be target.tooltipDataItem.component.fill (in the case of the line series example, the target is the line series and has no change of color, so you can just use target.fill), otherwise e.g. in the case of CandleStick series the color would be on the candle stick, or column, i.e. via target.tooltipDataItem.column.fill.
Sample adapter for LineSeries:
var tooltipDate;
series.adapter.add("tooltipText", function(text, target) {
// data via target.tooltipDataItem.dataContext
console.log('text adapter; color: ', target.tooltipDataItem.component.fill.hex);
if (tooltipDate !== target.tooltipDataItem.dataContext.date) {
console.log('new tooltip date, do something');
tooltipDate = target.tooltipDataItem.dataContext.date;
}
// note: in this case: component === target
return text;
});
Demo:
https://codepen.io/team/amcharts/pen/9f621f6a0e5d0441fe55b99a25094e2b
Sample Candlestick series adapter:
var tooltipDate;
series.adapter.add("tooltipText", function(text, target) {
// data via target.tooltipDataItem.dataContext
console.log('text adapter; color: ', target.tooltipDataItem.column.fill.hex);
if (tooltipDate !== target.tooltipDataItem.dataContext.date) {
console.log('new tooltip date, do something');
tooltipDate = target.tooltipDataItem.dataContext.date;
}
return text;
});
Demo:
https://codepen.io/team/amcharts/pen/80343b59241b72cf8246c266d70281a7
Let us know if this is making sense, and if the adapter route is a good point in time to capture changes, data, color, as well as if it's efficient enough a manner to go about this.
I am new to handsontable, and I can not achieve a goal as simple as to have the columns width as long as the content of the cells. Even if I have space enough in handsontable parent to display the full content of the table, some columns overlap the content of some cells.
I do not want to stretch the table to its parent. Just to show the full table contents (as I have space enough).
Update
The answer of fap is right.
I have realized the problem does not come from the basic definition of the table but for the definition of a renderer do on cells.
cells: function (row, col, prop) {
var cellProperties = {};
if (row === 0) {
cellProperties.renderer = firstRowRenderer;
}
return cellProperties;
}
function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.color = 'green';
td.style.background = '#CEC';
}
It is after the renderer is applied when the content does not fit into handsontable cells and it does not resize. This is the real problem I am facing.
Just don't specify any width for the table and/or columns. Handsontable will size the columns depending of the longest value there is in their respective cells.
See this simple example.
Note that if you edit the values, the column resize dynamically.
But what if you have a value that expand the column width so much that your table is wider than your screen ? Well, if you don't really want that (and I assume that you don't otherwise what's the point of delimiting your columns and/or your table in the first place ?), you can use the option preventOverflow :
preventOverflow: 'horizontal',
As you can see in this example, it will automatically create a navigate bar that prevent your table to go off screen but still size the columns in order to see all your data.
When the datatype is Date, the kendo grid uses a kendo datepicker with dropdown calendar for the column.
The datepicker's dropdown calendar usually aligns itself flush with the left edge of the input box. If there isn't room for that, it is moved to the left, but not quite enough. This presents a problem when the rightmost column in the grid is a Date, and the grid is occupying 100% of the width available on the screen: the Saturday column in the dropdown calendar gets "cut off". See pic attached.
Is it possible to tell the calendar dropdown (for a particular column) to align itself flush with the right edge of the text input?
I know that bug. Your datepicker animation container is hidden under right scrollbar. If you set body overflow to hidden, you will not have a scrollbars and calendar will fit and touch right border of screen, like in this example: http://dojo.telerik.com/UCOhA
However if you can't turn off the body scrollbars you need to set calendar position manually dirty way like this:
$("#piker").kendoDatePicker({
open: function(e) {
//setTimeout to let kendo make k-animation-container element at first open
setTimeout(function(){
var animationContainer = $("#" + e.sender.element.attr("id") + "_dateview").parent();
var left = e.sender.element.offset().left + e.sender.element.closest('.k-datepicker').width() - animationContainer.width();
animationContainer.css('left', left);
});
},
//turnoff the animation to avoid strange visual effects
animation: {
open: {
duration: 0
}
}
});
Running example: http://dojo.telerik.com/Imiqa/2
I'm using SlickGrid and struggling to find an elegant solution to the following:
All columns must have a specific initial width when first rendered but be resizable afterwards
The final column should auto fill the remaining column space when the window is resized
I've seen:
Make one column fill remaining space in SlickGrid without messing up explicit width columns
resizing of grid when resizing browser window
How do I autosize the column in SlickGrid?
But these don't seem to quite do what I need.
If I use the forceFitColumns option, then all columns will autosize (unless I put a maxsize on them).
Using resizeCanvas on window.resize works well - but it still only works if forceFitColumns is true.
If I set minWidth=maxWidth - then I can't resize the column.
Any suggestions?
I'm not sure it would correct all your problem but in my case I do use the forceFitColumns and then depending how I want my column to react in size I will use a combination of minWidth and width, and in some cases the ones that will never exceed a certain width, I would then use a maxWidth as well. Now the problem you have is when setting the minWidth to be the same with as maxWidth this of course will make it unresizable, well think about it you set a minimum and a maximum, SlickGrid is respecting it by now being able to size it afterwards. I also have my grid which takes 95% width of my screen so I have a little padding on the side and with it I use a auto-resize 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 also was annoyed by the fact that using all of these together is blocking you from resizing the width of the column. I came up with a different solution, much later after, which makes the fields to expand (take available width) and does not block you afterwards on resizing the width. So this new solution I believe is giving you exactly what you are looking for... First of all remove the maxWidth property and only use minWidth and width, actually you could probably use only the width if you wanted. Now I had to unfortunately, modify 1 of the core file slick.grid.js with 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();
}
then going back to my grid definition, I replace my previous options with this:
// 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 functionality of the force fit (expanding) but does not restrict you on resizing your columns width afterwards like the force fit does. I also tested it with the columnPicker, if you hide a column it's resizing the others accordingly. I also modified the file slick.columnpicker.js to include a checkbox for that property but that is totally optional...I can add the code for that too if any of you want it as well. Voila!!! :)
EDIT #2
I realized much later that there's no need to modify the core file, we can simply call grid.autosizeColumns() after the grid creation. 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 load but will not give you the restriction of the forceFitcolumns flag.
I know it's kind late for this reply.
But i've managed to do that without having to change things at slick.grid.js or set min/maxWidth at columns array.
Instead what i did was to iterate through the columns array adding the values of "width" field of each column and then i've 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;
}
There seems to be a bug in jqgrid, where one can not resize the last column.
This seems to be a quite old issue raised in 2009. I had a look and the latest jqGrid sample seems to have this issue...
What I found however was that last column can be dragged to resize the grid itself.
See here Go to section what is new in 3.6.
Any pointers if this is already fixed.
Seems I found a solution.
Resizing of the last column can be done only within the area of the header wrapper (div.ui-jqgrid-hbox). In the outer space resizing process losing focus.
Because of existing some padding-right area with default 20 pixels, increasing the size can be done in this small part only.
In addition, we need to temporarily cancel table wrapper influence, because he also cause to stop resizing process.
Here is my solution. I assume, that your table wrapper id is gbox_DataTable_u:
1:
CSS: define new wide padding-right area:
.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 10000px;}
2:
Append 2 events to your grid:
resizeStart:function(event, index){ $('#gbox_DataTable_u').width($('#gbox_DataTable_u').outerWidth() + 10000);}
resizeStop: function(width, index) {$('#gbox_DataTable_u').width($('#DataTable_u').outerWidth());}
Example of working table: http://www.design.atplogic.co.il/aman/philips/users.htm#
I found that the best way is to add an empty unresizable column in the end of the grid.
I'm just doing it manually, by extending the colModel right before the execution of jqgrid constructor. Only problem being - I wasn't able to make it not draggable so far.
Here's an example:
colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});
Hope this helps.
It is resizing fine for me as well, although you have to resize from the right on the "RTL Support" example, which seems to make sense.
Also be aware that if you are using Chrome, there is a jqGrid bug that causes horizontal scroll bars to appear - see jqgrid-does-not-render-correctly-in-chrome-chrome-frame. This issue has since been resolved, but the demo page has not been updated yet. And it certainly gives the appearance of the last column's resizing not working because you have to scroll all the way over to the right before you can resize the last column.
I have tried to resize the last column with resizeStop, i do some trick like the other guy said. hope it help.
resizeStop(width, index) { var amGrid = $("#jsonmap"), colModel =
$("#jsonmap").jqGrid('getGridParam','colModel'); var oW =
$oldWidths[index]; var cW = colModel[index+1].width+
downCalSize(oW,width); $oldWidths[index+1] = cW; $oldWidths[index] =
width;
$('.ui-jqgrid-labels > th:eq('+(index+1)+')').css('width',cW);
$('#jsonmap .jqgfirstrow > td:eq('+(index+1)+')').css('width',cW);
var w = amGrid.jqGrid('getGridParam', 'width');
$('.ui-jqgrid-htable').css("width",w);
$('.ui-jqgrid-btable').css("width",w); }
i still looking for a common way, can do on more tables in one page and don't affect to each other.
After 2 days of struggling...I finally found a way to work around.
It seems that jqGrid calculates the resizing object in the dragMove event, where it uses passed event object to get the position of mouse and calculates the new width of resizing column. However when dragging exceeds the grid's boundry, the dragMove event stop shooting...
So my work around is simply modifying jqGrid to calculates resizing object again in the dragEnd event. Here's the modified code
first find the dragEnd event.
...
dragEnd: function(e) { // add a new input parameter
this.hDiv.style.cursor = "default";
if(this.resizing) {
this.dragMove(e); // call dragMove event to calculate resize object
...
then find the mouseup event where dragEvent is triggerd...
...
$(document).mouseup(function (e) { // get the event object
if(grid.resizing) { grid.dragEnd(e); return false;}// pass event to dragEnv
return true;
});
...
Then columns should be able to resize to wherever mouse points.
Hope this would help.