Can we hide/show datagrid columns by using JavaScript without layout disruption
0
Hi. I want to hide/show datagrid columns when user checks checkbox by using JavaScript. $(document).ready(function(){ var checkbox = $('.mx-name-checkBox_1 input[type=checkbox]'); checkbox.off = ('click.visibility'); checkbox.on('click.visibility',function(){ var targetCol1 = $('.mx-name-column1')[0]; var targetCol2 = $('.mx-name-column2')[0]; var targetCol3 = $('.mx-name-column3')[0]; var targetTable = $('.mx-name-grid1 table')[0]; for(var i=0; targetTable.rows[i]; i++){ targetTable.rows[i].cells[targetCol1.cellIndex].style.display='none'; targetTable.rows[i].cells[targetCol2.cellIndex].style.display='none'; targetTable.rows[i].cells[targetCol3.cellIndex].style.display='none'; }); }); With this code, the columns disappears when the checkbox is checked, but layout disruption happens. Here is an image of this layout disruption. I want to keep the width of columns when I hide/show datagrid columns. Question: Is there a way to keep the width of columns when I hide/show datagrid columns by JavaScript?
asked
Megumi Koshiba
1 answers
0
You are not the first one that would like to implement this, but is it not recommened to play around with the DOM (different per Mendix version) and in the new react-based widgets it is even no longer possible.