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:
<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();
}
});