Is there any way i can hide HOT columns from javascript?
The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.
The HOT has rowHeaders and colHeaders and the data with 20 columns.
Please advise.
OUTDATED SOLUTION
Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.
You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:
var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
}
What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.
Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.
http://jsfiddle.net/zekedroid/LkLkd405/2/
Better Solution: handsontable: hide some columns without changing data array/object
Related
I'm very new to writing script for Google Sheets, and I'm attempting to create a spreadsheet that will only display a dropdown in a column ("Provisional Notes") if the value in a column ("Certified or Provisional" is "Provisional." If it is "Certified," the user is be able to enter data freely. I'm also wanting to remove the validation if the value changes from "Provisional". I also need the solution to run on the Google Sheets App, as this spreadsheet will be run on an iPad and/or a smartphone.
I've done quite a bit of searching, and only seem to find dropdowns that depend on other dropdowns, rather than leaving a cell blank if the initial dropdown is a certain value.
What I have come up with so far only runs once (even though I've attempted to have it occur on every edit?) Also, if the value changes from Provisional to Certified, the validation does not get removed.
For my practice, I've applied it to only 2 specific cells, rather than the entire 2 columns.
function onEdit2(e){
var dropdownCell = SpreadsheetApp.getActive().getRange('P2');
var certCell = SpreadsheetApp.getActive().getRange('J2');
var rule = SpreadsheetApp.newDataValidation().requireValueInList(['Test 1', 'Test 2'], true).build();
function insertDropdown(){
if(e.certCell.getValue() === "P"){
dropdownCell.setDataValidation(rule);
}
}
}
I greatly appreciate all suggestions!
To delete a data validation you just need to use the method setDataValidation() and set its value to null to delete the data validation present on that cell.
In the following code example, depending on the value inserted I am adding or deleting the data validation. This code example has self explanatory comments:
function onEdit(e) {
// get sheet
var sheet = SpreadsheetApp.getActive().getSheetByName('Sheet1');
// if modifications happen in A
if(e.range.getColumn()==1){
// check inserted value
if(e.range.getValue()=='Provisional'){
// create rule from a list range and set it to the same row in column B
var rule = SpreadsheetApp.newDataValidation().requireValueInList(['A','B']).setAllowInvalid(false).build();
sheet.getRange(e.range.getRow(),2).setDataValidation(rule);
}
// if it is set to certified
if(e.range.getValue()=='Certified'){
// delete any data validation that may have been in its adjacent cell
sheet.getRange(e.range.getRow(),2).setDataValidation(null);
}
}
}
I need a help on applying common drop down values to multiple selected rows in a Webix datatable. Let's say I want to select all the rows of my datatable (by Ctrl+click) for which the 'Name' column has value as 'Mark' and then want to apply a common color for them (for example : green) by clicking so that it gets applied on all the rows at one go.
The snippet is here : https://webix.com/snippet/1162ccd1
Any help on how can this be achieved would be appreciated.
Thanks in advance.
Further to this post, I am including a re-phrased and a half-way solution below for the experts to dispel any confusion about the requirement :
It does not necessarily have to be those rows which have 'Name' as 'Mark'. I put it that way to give an example. Basically, it could be any randomly selected row either consecutive or haphazard and selecting a common value for them from the drop down of the 'color' column (it could be any color in that drop down ) so that its value gets assigned to those cells of those selected rows. Note, selecting a color should not change the color of the row, so there is no css effect I want here.
I have so far written the code like below, which is able to fetch the selected rows.
rows = $$("mytable").getSelectedId(true);
for (i in rows) {
id = rows[i];
item = $$("mytable").getItem(id);
/* below effect has to happen from the drop down of data table gui */
item.id2 = "green"; //for example, it could be any value
}
Can anybody please help me in:
i) how can I apply the value selected from the drop down of data table to all the selected rows ?
ii) Secondly, how can I trigger this code ( through which event ?) once they are selected in the data table and the value is chosen from the drop down ?
Thanks.
You can do something like this by adding the onBeforeFilter event, and track only color filter ("id2" in your snippet):
onBeforeFilter: function(id, value, config) {
if (id === "id2") {
const selected = this.getSelectedId(true);
const color = this.getFilter("id2").value;
for (let row in selected) {
const item = this.getItem(selected[row]);
item["id2"] = color;
this.updateItem(item.id, item);
}
}
}
Sample is here https://webix.com/snippet/538e1ca0
But I think this is not the best way.
You can also create a context menu that is displayed by right-clicking on the table and making a choice of values in it.
So what I'm trying to accomplish is when the grid is fully loaded, I loop over a certain column that contains checkboxes. Depending on the value of the checkbox I should be able to disable it.
Problem is that I can't access the html element that's there. Am i doing something wrong or overlooking something?
What i've tried:
loadComplete: function() {
// Fetch all the ID's of the rows
var rows = $("#table").getDataIDs();
// Loop over the rows
if(rows.length != 0){
for(i=0; i < rows.length; i++) {
// Get the data so we test on a certain condition
var row = $("#table").jqGrid("getRowData", rows[i]);
if (row.gridCheckbox == 1) {
//disable the element
row.prop("disabled", "disabled");
}
}
}
}
It's important to understand that changing one element on the page follow in the most cases to web browser reflow: validation whether some property (position for example) need be changed in all other elements on the page. If you do changes in the loop then your JavaScript code can be really slow.
Thus it's strictly recommended to reduce the number of changes of the DOM. Especially to reduce the number of changes jqGrid provides rowattr, cellattr and custom formatters. If you need for example to set disabled attribute on some rows then you should now do this in loadComplete, but to use rowattr instead to inform jqGrid that some additional attributes (disabled="disabled") should be set on some rows. jqGrid collect first the string representation of the whole table body and it use one assignment of innerHTML to fill the whole body of the grid in one DOM operation. It improves essentially the performance. See code example in the old answer.
I have a grid with several columns, most of which have values selectable from a given set. (i.e. they are shown as dropdown boxes when inserting/updating.) I want to enable filtering, but not necessarily on all columns at once. So I tried adding an empty option for each column, but this means it also shows up in the dropdown for insert/update, which is not what I want.
So how should I solve this? Do I need to override one or more of the row renderer functions?
You can redefine filterTemplate of the column like the following:
filterTemplate: function() {
var $select = jsGrid.fields.select.prototype.filterTemplate.call(this);
$select.prepend($("<option>").prop("value", "0").text("(All)"));
return $select;
}
Here is the working fiddle http://jsfiddle.net/tabalinas/g68ofLs1/
Ok, let me explain my scenario more clearly:
When a cell is edited, it becomes 'dirty' and I style it a certain way by adding a CSS class to the cell via javascript.
Then, if the user Sorts the grid, the styling is lost (I believe because all the rows are recreated) and I need a way to restore the styling to the appropriate cell/row after a Sort.
What I attempted to do is add an entry into data[] called 'status' and onCellChange I loop through data[] and match the args.item.Id to appropriate entry in data[].
grid.onCellChange.subscribe(function (e, args) {
var done = false;
for (var i = 0; i < data.length && !done; i++) {
if (data[i].id == args.item.id) {
data[i].status = "dirty";
done = true;
}
}
}
However, onSort I'm not sure how to match the sorted rows to the data array. (Since I have no args.item) I've attempted to do selector statements:
$(".slick-row")
to restyle the correct cells, but I have no way to associate the rows with their entry in data[].
1) There is no need to search for the item in your onCellChange handler - it is available at "args.item".
2) Sorting the "data" array will not wipe out your change to the item in #1.
3) You mention dynamically styling cells. I see no code for that. If your custom formatter is the piece of code that looks at "item.status" and renders it differently if it is dirty, then you don't have to do anything extra. Sorting the data and telling the grid to re-render will preserve the "dirty" cell styles.