how to hide a datagrid [SOLVED]

[svsnead]

I see there is a lot about hiding a column or row. But I don't see any about hiding the datagrid. I have a button that will toggle it find but I have to have it load when the page loads. Is there a way to load it and not have it show on start up of the page?

I tried the following:

Code:

       <div id="c4" class="c3">
	<table id="ci" title="Chapters/Contacts" class="easyui-datagrid" style="width:400px;height:450px"
                     toolbar="#tb" pagination="true" idField="id"
			rownumbers="true" fitColumns="false" singleSelect="true">
		<thead>
			<tr>
				<th data-options="field:'name',width:80">Chapter</th>
				<th field="type" width="60" >Type</th>
				<th field="state" width="70">state</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="height:50px;padding:5px;">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Chapter</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Chapter</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove Chapter</a>
       </div>
       </div>

      // this works with a button but it has to load before it works.
		function doChapters(){
		     $('#c4').toggle();
                     $("#c4").css('zIndex', 9999);
                     $('#ci').datagrid('reload');
   		}



        //this does not work at all.

         // change the http request parameters before load data from server
         $('#ci').datagrid({
           onLoadSuccess: function(){
          	$('#ci').hide();

          }
        });

[svsnead]

I found a way that works for hiding on load of the page. Hopefully this helps someone else.

Code:

		$(document).ready(function(){
			$('#c4').hide();
		 });