I need a way to only allow the user to select a row or a column (or multiple selection of entire rows, and entire columns) using handsontable.
After a bit of research and experimentation, I was able to achieve single-row highlighting without the cell and row handles.
Handsontable options:
var x = new Handsontable(element, {
...
multiSelect: false,
disableVisualSelection: ['current', 'area'],
currentRowClassName: 'currentRow'
}
CSS:
.currentRow, .highlight {
background-color: lightblue;
}
There is an way to select multiple cells, range cells and even single cell by setting: selectionMode='multiple' checkout this link: https://docs.handsontable.com/pro/3.0.0/Options.html#selectionMode
I ended up with this solution:
beforeOnCellMouseDown: function restrictSelectionToWholeRowColumn(event, coords) {
if(coords.row >= 0 && coords.col >= 0) event.stopImmediatePropagation();
}
works like charm!
Related
I an using Ag-Grid.
I want to select column horizontal and vertical like under picture.
How to solution??
I think you would have to do this manually. You could watch for cell selection yourself, and then keep track of the selected column. Then you could use cellStyle in the column definition params to set the background color when the column is selected. You have to redraw the rows, since the cellStyle function only gets run when the rows are drawn. For example:
onCellFocused: function(params) {
if (params.column) {
selectedColumn = params.column.colDef;
params.api.redrawRows();
}
},
defaultColDef: {
cellStyle: function(params) {
if (params.colDef === selectedColumn) {
return {'background-color': '#b7e4ff'};
}
}
}
Unfortunately, it looks like redrawing the rows clears the selection, so you either have to reselect the row manually, or use a row style.
Check it out here: https://stackblitz.com/edit/ag-grid-select-column?embed=1&file=index.js
I have a tooltip in Kendo UI which I'm trying to filter cells based on their column name, because the standard td:nthchild won't work (users can move columns around). I want to engage the tooltip based on if someone hovers over MY COLUMN NAME'S CELLS. How do I accomplish that in the filter field? Or should I do it in the show function?
this.$el.kendoTooltip({
filter: "th:contains('MY COLUMN NAME')",
show: function (e) {
if (this.content.text().length > 0) {
this.content.parent().css("visibility", "visible");
}
},
hide: function(e) {
this.content.parent().css("visibility", "hidden");
},
content: function (e) {
var target = e.target;
return $(target).siblings().first().text();
}
});
Like this ?
this.$el.kendoTooltip({
filter: "thead th:contains('ColumnA')"
});
Demo
UPDATE
As you want to show the tooltip on the row cell based on the column's title, you can't use filter parameter for that, it is meant to be used to filter only the target element, which is not your case. You will need some programming there, e.g:
show: function(e) {
let index = this.target().index(), // Get hovered element's column index
columns = grid.getOptions().columns, // Get grid's columns
column = columns[index]; // Get current column
// If target TD is not under 'ColumnA', prevent tooltip from being showed
if (column.title != "ColumnA") {
this.hide();
}
}
Demo
Thanks to kendo, you can't prevent their own events, so using hide() works but the tooltips still opens blinking before it is hidden again, it's possible to catch it opening. Tried using e.preventDefault() and return false that would a reasonable way to say "cancel the widget showing" but with no luck. This was the best I could do.
I d like to be able to hide/display the filters while using tablesorter.
Using table sorter just went fine but when i added a button to execute :
function display_hide_filter() {
var filters = document.getElementsByClassName('tablesorter-filter-row');
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.style.display == 'none') {
filter.style.display='inline';
} else {
filter.style.display='none';
}
}
}
I then get a weird answer. Hiding the filter is fine but re displaying turn into having all filter cells under the first header cell.
Since i got poor english and css/js skills, I just hope I didnt miss something about it in the documentation but i tried to get trough it a thousant times with no success.
Thanks for any help
There is a filter_hideFilters option that minimizes the filter row until the user hovers over it. It is also accessible friendly in that the user can use the tab key gain access the filter inputs (demo).
If you just want to hide/show the filter row, then this basic code would work (demo):
HTML
<button type="button">Toggle Filter Row</button>
Script
$(function () {
$('table').tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'filter']
});
$('button').click(function(){
$('.tablesorter-filter-row').toggle();
});
});
As Andreas pointed out, I used 'inline' where i should have used ''
I'm using Bootstrap and have a striped table that can be filtered by selecting some options on a form. Javascript interprets the form inputs, and hides rows from the table that don't match the selected criteria.
However, this breaks the table striping on the table depending on which rows are hidden (gray rows next to gray rows, white rows next white rows).
I'd like to reapply the striping based on what rows are visible after filtering the results. How can I do this?
Using .remove() on the table rows is not an option, because I may need to show them again if the filter criteria changes and I'm trying to avoid using AJAX to update the table dynamically based on the filter inputs (I'd like to stick to hiding DOM elements).
Any help is appreciated! I can clarify the question if needed :)
Seems like Bootstrap 4 have a different implementation. Following #Anthony's answer, this is how it would work:
$("tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1)? "rgba(0,0,0,.05)" : "rgba(0,0,0,0)");
});
Tables are now striped by pure CSS and not by adding the "stripe" class name.
Yes, this is definitely one of the annoying parts of table striping. The better part of valor here is probably just to reapply the striping with jQuery after each update:
$("tr:not(.hidden)").each(function (index) {
$(this).toggleClass("stripe", !!(index & 1));
});
Anthony's answer did not work for me. First, it does not hide the Bootstrap table class table-striped, and second, there is not (or at least does not appear to be) a built-in class stripe for table rows.
Here's my approach, where I've filtered rows in a table with an id of "reports".
Here's a version to use if you define the class "stripe" for <tr> elements:
// un-stripe table, since bootstrap striping doesn't work for filtered rows
$("table#reports").removeClass("table-striped");
// now add stripes to alternating rows
$rows.each(function (index) {
// but first remove class that may have been added by previous changes
$(this).removeClass("stripe");
if ( index % 2 == 0) {
$(this).addClass("stripe");
}
});
If you're too lazy to define the CSS class "stripe" then here's a quick & dirty version:
// un-stripe table, since bootstrap striping doesn't work for filtered rows
$("table#reports").removeClass("table-striped");
// now add stripes to alternating rows
$rows.each(function (index) {
// but first remove color that may have been added by previous changes:
$(this).css("background-color", "inherit");
if ( index % 2 == 0) {
$(this).css("background-color", "#f9f9f9");
}
});
This is the same answer as #Jacobski's answer but will keep the hover effect of a bootstrap table-hover.
$("tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1) ? "rgba(0,0,0,.05)": "rgba(0,0,0,0)");
if (!(index & 1)) {
$(this).hover(
function () { //On hover over
$(this).css("background-color", "rgba(0,0,0,.07)");
},
function () { //On hover out
$(this).css("background-color", "rgba(0,0,0,0)");
}
)
}
});
My answer build upon what #Jacob and #yehuda suggested.
This works with bootstrap4, for a table that needs both the behavior of ".table-striped" and ".table-hover".
The hover part is handled by CSS, which makes it more efficient (I noticed a small delay due to javascript handler, when testing #yehuda's snippet).
// CSS
<style>
.table-striped tbody tr.visible-odd {
background-color: rgba(0, 0, 0, 0.05);
}
.table-striped tbody tr.visible-even {
background-color: rgba(0, 0, 0, 0.00);
}
.table-hover tbody tr.visible-even:hover {
background-color: rgba(0, 0, 0, 0.075);
}
</style>
// JS
$("tr:visible").each( function(index, obj) {
if (index % 2) {
$(this).addClass('visible-odd').removeClass('visible-even');
} else {
$(this).addClass('visible-even').removeClass('visible-odd');
}
});
For me this works fine with hidden rows and reapplies the striping as expected:
$("table#ProductTable").removeClass("table-striped");
$("table#ProductTable").addClass("table-striped");
#Jacobski's answer was great, but I had some pages with multiple tables and the header row's background would get changed on separate tables. Also my table rows that were always visible had the class "accordion-toggle" not sure if that's a bootstrap 5 thing, but that is how I targeted it! (also I don't know JavaScript so there's probably cleaner syntax to do what I did)
$("tr:visible").each(function (index) {
if ($(this).hasClass("tb-header")) {
rowIndex = 0; // need to reset the rowIndex since we are now on a new table!
} else {
if ($(this).hasClass("accordion-toggle")) {
$(this).css("background-color", !!(rowIndex & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,.05)");
rowIndex++;
}
}
});
I needed the combobox with checkboxes in front of each option, to select multiple options. I tried using CheckedMultiSelect using "dropdown:true",
It shows the value in the combobox like, 2 item(s) selected, 1 item(s) selected,etc when I select items.
How to show the values selected in the text area of combobox separated by delimiter??
Should css or HTML or someotherthing has to be changed for checkedMultiSelect??
Thanks in advance.
As for your second question, you have to extend dojox.form.CheckedMultiSelect class and override _updateSelection and startup methods:
var MyCheckedMultiSelect = declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_updateSelection: function() {
this.inherited(arguments);
if(this.dropDown && this.dropDownButton) {
var label = "";
array.forEach(this.options, function(option) {
if(option.selected) {
label += (label.length ? ", " : "") + option.label;
}
});
this.dropDownButton.set("label", label.length ? label : this.label);
}
}
});
Use MyCheckedMultiSelect instead of dojox.form.CheckedMultiSelect:
var checkedMultiSelect = new MyCheckedMultiSelect ({
dropDown: true,
multiple: true,
label: "Select something...",
store: dataStore
}, "placeholder");
checkedMultiSelect.startup();
Again, I added this to the jsFiddle: http://jsfiddle.net/phusick/894af/
In addition to #Craig's solution there is also a way to add only a look&feel of checkboxes via CSS. If you inspect generated HTML, you can see that each row is represented as a table row <tr> with several table cells <td>. The table row of the selected item gets CSS class .dojoxCheckedMultiSelectMenuItemChecked, so I suggest to change styling of the first cell which always has class .dijitMenuItemIconCell:
td.dijitMenuItemIconCell {
width: 16px;
background-position: center center;
background-repeat: no-repeat;
background-image: url('some-unchecked-image-here.png');
}
tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
background-image: url('some-checked-image-here.png');
}
So you will get:
I added this to the jsFiddle I was helping you with before: http://jsfiddle.net/phusick/894af/
The CheckedMultiSelect does not provide checkboxes when the dropDown is set to true. It simply allows the user to click to click multiple items to select.
To implement what you want, take a look at my answer here:
Custom dojo Dropdown widget by inheriting _HasDropdown and _AutoCompleterMixin
In MyCustomDropDown, you will need to build the list of checkboxes and items as a custom widget. I would recommend looking at dojox.form._CheckedMultiSelectMenu and dojox.form._CheckedMultiSelectMenuItem and mimic the functionality there and just give a different ui (with checkboxes).
dojox.form.CheckedMultiSelect should have been showing the checkboxes, this ticket fixes the problem. https://bugs.dojotoolkit.org/ticket/17103