ColResizable Row Display:none; And The Custom Anchors Relating To The Row To Have A Display:none;

I am a bit stuck and was wondering if anyone could please help me? I am developing a website that has colResizable JQuery plugin incorporated into it. The plugin is all good and br

Solution 1:

Cells are not inline displayed. You must to change to table-cell:

  document.getElementById("get_cells4").style.display = "table-cell";

There are this values for display in tables:

table > applied to <table> tag

table-row > applied to <tr> tag

table-cell > applied to <td> tag

Learn more:

http://www.w3schools.com/cssref/pr_class_display.asp

Good luck!

Solution 2:

I think I figured it out - I needed to find the child [1] of the JCLRgrip. Then change it via the JavaScript to have a display of none, as illustrated below:

 <script type="text/javascript">
	function hide_cells(){

		document.getElementById("get_cells").style.display = "none";
		document.getElementById("get_cells2").style.display = "none";
		document.getElementById("get_cells3").style.display = "none";
		document.getElementById("get_cells4").style.display = "none";
		document.getElementById("change_to_show").innerHTML = "<button onClick='show_cells()' >Show</button >";
		document.getElementsByClassName("JCLRgrip")[1].style.display = "none";
		document.getElementsByClassName("JCLRgrip")[2].style.display = "none";
	
	}
	
	function show_cells(){
	
		document.getElementById("get_cells").style.display = "table-cell";
		document.getElementById("get_cells2").style.display = "table-cell";
		document.getElementById("get_cells3").style.display = "table-cell";
		document.getElementById("get_cells4").style.display = "table-cell";
		document.getElementById("change_to_show").innerHTML = "<button onClick='hide_cells()' >Hide</button >";
	
	}
  
  </script>

Solution 3:

before any DOM manipulation you have to call colresizable with the param "disable" set to true.

disable: [type: boolean] [default: false] [version: 1.0] When set to true it aims to remove all previously added enhancements such as events and additional DOM elements assigned by this plugin to a single or collection of tables. It is required to disable a previously colResized table prior its removal from the document object tree using JavaScript, and also before any DOM manipulations to an already colResized table such as adding columns, rows, etc.

so your code will be something like this

var onHideColumn = function(){

     $("#updatePanelSample").colResizable({disable:true}); //disable colresizable
     hide_cells();  //remove columns, or whatever
     $("#updatePanelSample").colResizable();  //enable it again

}

There is a sample included in the version released for colResizable 1.6, you can download it from github or from the official website