When using the dc.js table chart, I need a hidden column for sorting purposes, but do not know how to hide it from the user's view.
solved using CSS and jquery
var columnindex = $('#dcTable th:contains("NameOfColumnToHide")').index();
if(columnindex != -1)
$('#dcTable tr > *:nth-child('+(++columnindex)+')').hide();
Related
I want to change a specific row visibility inside of a grid named "myGrid" given an index dynamically.
I thought first to get the specific row that I want use:
var row = Grid.GetRow(myGrid.Children[index]);
and then , to change the IsVisible attribute of 'row' like this:
row.IsVisible = false;
Unfortunately the second line of code Isn't legal...
I don't want to bind 'IsVisible' attribute of each row. It seem to me unnecessary work.
Any suggestion to solving this issue will be appreciate!!
I think your best bet is to bind the IsVisible property of each control in the row to a single property in your view model. Then all you have to do is change the value of your view model property to false and the whole row will be hidden.
Cause:
GetRow returns an int value.So you can't set the property like IsVisible
Solution:
You can set the rowHeight as 0 if you want to hide the specific row.
var row = myGrid.RowDefinitions[index];
row.Height = 0;
As others said, you are trying to change the visibility of an index (That is definitely wrong).
You cannot get the row of a Grid and set its visibility. Instead, you should set the visibility of the view inside the row.
But you should note that by doing so you may see an empty space inside the Grid if you have specified a fixed height or even star sizing for that row height.
It is better to set row height to Auto. By doing this, when the view inside that row is invisible, the height of the row decreases to 0.
I have a data table with thousands of data. i have a search functionality. if I search a term, the row which contains the term has to be highlighted and scroll position should be on the row. it is working fine. but it takes too much of time to position the scrollbar. this leads to performance issue. can anyone help to fix this.
currently i have set style class to the match row. searching for the style class and calculating the position and setting it with jQuery.
var trElement = $("tr.found").first();
var trParentElement = trElement.parent();
var childTop = trElement.offset().top;
var parentTop = trParentElement.offset().top;
var scrollPos = childTop - parentTop;
$('#table').scrollTop(scrollPos);
is there any other way?
thanks in advance.
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.
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 :/
I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, i.e. when i select, for example, a row on some table (that contains chart data) i would like to show the corresponding highstock tooltip.
Is that possible?
For StockChart this solution doesn't work:
In this example you have to replace this:
chart.tooltip.refresh(chart.series[0].data[i]);
to this:
chart.tooltip.refresh([chart.series[0].points[i]]);
The solution is available here.
If what you want is to trigger tooltip on the plot near ith data point, then probaly you can use this answer, which suggest to do something like
chart.series[0].data[i].setState('hover');
where chart is the result of your new Highcharts.Chart. (jsfiddle from the comments to that answer).
I guess that if you want to do it on <tr> click, than your js could finally look like this
var chart = new Highcharts.Chart({ <your options> });
$('#yourTableId tr').click(function(){
var i = $(this).index(); // `this` points to <tr>, get its index
chart.series[0].data[i].setState('hover');
});