Dear All,
I have a Handsontable that has different columns. When the page loads column 6 and 7 are not displayed because I have this
hiddenColumns: {
columns: [6,7],
indicators: false
},
I want to show and hide these columns based on a value so i want some thing like this
hiddenColumns: {
if(myvalue ==1)
{
columns: [6,7],
}
indicators: false
},
so the columns should only hide if myvalue =1, otherwise it should always display
Any help would be greatly appreciated.
It doesn’t seem impossible.
You can use an external method to check if a cell’s value is 1 and update the
hiddenColumns: {
columns: cols,
indicators: true
}
cols array via updateSettings method.
Thank you for your reply. Actually its not the cell value. I have a checkbox control outside the handsontable . Based on checkbox control value the columns will be shown or hidden. Also I have no idea of how updateSettings method work. Can you please provide a sample code. Thank you very much for your help in advance
updateSettings is one of the easiest methods to use, you just pick an option
colHeaders: true
and to change it type new setting via object that you pas into updateSettings
instance.updateSettings({ colHeaders: false })
You can also add some options that weren’t added before like
instance.updateSettings({
colHeaders: false,
rowHeaders: true,
columnSorting: true
})
Here is an example http://jsfiddle.net/jb4azoa9/
Ok so in my updatesettings method i need something like this. The dropdown is outside the handsontable not part of it
if(mydropdown.value==1)
hide columns 6 and 7
else
show columns 6 and 7
How do we achieve that
Yes. That is precisely what you need to do.
And this is how you code it Handsontable example - JSFiddle - Code Playground
Sorry its not working. Its giving me an error msg
Cannot read property ‘updateSettings’ of undefined
at HTMLInputElement.
It should check the value of checkbox when the handsontable is loaded . The value can be checked or unchecked. Please help
This is my complete code
var $container = $("#myhandsontable");
$(document).ready(function () {
loadData();
});
function loadData() {
var sendInfo = { pkId: ipkid };
var dataJsonString = JSON.stringify(sendInfo);
$.ajax({
type: "POST",
url: "Info.aspx/getData",
data: dataJsonString,
//parameters: JSONstring,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var data = eval(response.d);
if (data[0].userTypes.length > 0) {
$container.handsontable({
data: data[0].userTypes,
rows: data[0].totalRows,
startCols: data[0].totalColumns,
minRows: data[0].totalRows,
minCols: data[0].totalColumns,
maxRows: data[0].totalRows,
maxCols: data[0].totalColumns,
colHeaders: data[0].Headers,
//rowHeaders: true,
stretchH: 'all',
fillHandle: {
autoInsertRow: false,
},
});
}
else {
}
}
}
);
var hide = document.querySelector('.inputCheckBox');
var handsontable = $container.data('handsontable');
hide.addEventListener('change', function () {
if (hide.checked) {
handsontable.updateSettings({
hiddenColumns: {
columns: [6, 7],
indicators: true
}
})
} else {
handsontable.updateSettings({
hiddenColumns: {
columns: [0],
indicators: true
}
})
}
});
}ok so I was able to run this code and it works
Handsontable.dom.addEvent(autosave, 'change', function () {
var hot = $container.data('handsontable');
if (autosave.checked) {
hot.updateSettings({
hiddenColumns: {
columns: [0],
indicators: true
}
})
}
else {
hot.updateSettings({
hiddenColumns: {
columns: [0,6,7],
indicators: true
}
})
}
});
But the issue is that it only runs when we check and uncheck the checkbox. How can I run this code on the page load or when the handsontable loads. When the page loads the checkbox can be checked or unchecked so the above code should also work that time, but it only works when we click check or un check
what determines if the checkbox is checked or unchecked when table is being loaded? You have some internal logic for that, or user has its own settings?
Does this issue https://github.com/handsontable/handsontable/issues/4541 has been made by you?
Thanks for your reply. The checkbox is checked or unchecked is determined by the value from the database.
Please help me as this is very urgent and needs to resolved
If the information comes from the database you just can put it in a separate function and call it after you fetch the data.
function checkIfShown(){
if (hide.checked) {
hot.updateSettings({
hiddenColumns: {
columns: [2, 3],
indicators: true
}
})
} else {
hot.updateSettings({
hiddenColumns: {
columns: [],
indicators: true
}
})
}
}ok I think I got it working. Thank you very much for your help. One last question. Once a checkbox is unchecked I want all values in the columns [0,6,7] to be updated as 1. All the values in the cells of columns [0,6,7] should be shown as 1.
you can use the setDataAtCell method but it will have an impact on the overall loading performance. Here is a demo http://jsfiddle.net/jhdqonbb/
However, in this example, the value stays 1 even if you check it again. I am not sure if that’s in your intension.
Thanks for your reply. Is it possible that un-checking brings back the old value
If the columns aren’t editable you can use a renderer that will fake that the value is 1. However, if the data is editable you would need to clone the other values and load them again.
this is what I want , can you show me an example of this happening when a checkbox is clicked
Sure @naeemusman37
here’s an example http://jsfiddle.net/d0f3h9q8/
Actually what I need is that when the columns are hidden the values should always be 1.And when they are visible again it should show their previous values. The previous value comes from the database table and is permanent.They only change when a “save” button is pressed