GridPanel inside div having style display:none

[kunal_icreon]

Hi All,

I am using GridPanel for displaying data. It is working fine.
But I want to display gridpanel inside a div having style display:none.

I mean,
I have 3 div inside a page, first time div1 have display:block and div2 and div3 has display:none.

where inside the div2, which is currently display:none has a gridpanel and iam binding all the gridpanel first

time when page will load. I am showing a single div whenever i will click to show a particular div using javascript.

So again at the first time the gridpanel that are inside div2, which is currently display:none is not binding.
Moreover i have checked that if the girdpanel is inside a div with display:none then the data is not binding.

Again i put the STORE (the ext:Store gridpanel datasource ) outside the div and i bind the gridpanel that is inside

a div having dispaly:none, till the data is not dispaly.


Can you give me some solution that i will bind a gridpanel inside a div having style property of the container div

is none. I mean <div id="divOverview" style="display:none;"> GRIDPANEL HERE
.


Iam sending the code.

ASPX


<script language="javascript" type="text/javascript">
function ShowHideDiv(divID,anchor)
{
var divOverview = &#100;ocument.getElementById('divOverview');
var divProductData = &#100;ocument.getElementById('divProductData');
var divReview = &#100;ocument.getElementById('divReview');

var lnkRequestOverview = &#100;ocument.getElementById('<%=lnkRequestOvervie w.ClientID %>');
var lnkProductData = &#100;ocument.getElementById('<%=lnkProductData.Cl ientID %>');
var lnkReviewAndSubmit = &#100;ocument.getElementById('<%=lnkReviewAndSubmi t.ClientID %>');

if (divOverview !=null)
{
divOverview.style.display = 'none';
lnkRequestOverview.className = "inactive";
}
if (divProductData !=null)
{
divProductData.style.display = 'none';
lnkProductData.className = "inactive";
}
if (divReview !=null)
{
divReview.style.display = 'none';

lnkReviewAndSubmit.className = "inactive";
}


var cDiv= &#100;ocument.getElementById(divID);
if (cDiv !=null)
{
cDiv.style.display = 'block';
var currLnk=null;
if (anchor=='lnkRequestOverview')
{
lnkRequestOverview.className = "active";
}
else if (anchor=='lnkProductData')
{
lnkProductData.className = "active";
}
else if (anchor=='lnkReviewAndSubmit')
{
lnkReviewAndSubmit.className = "active";
}

}
}

</script>

<div class="linksarea">
<img src="images/links-area-top-crv.gif" alt="" />

<div class="linksareabg">
<ul>
<li><a id="lnkRequestOverview" class="active" runat="server" &#111;nclick="ShowHideDiv('divOverview','lnkReques tOverview');" >Overview</a></li>
<li><a id="lnkProductData" runat="server" &#111;nclick="ShowHideDiv('divProductData','lnkPro ductData');" >Product Data</a></li>
<li><a id="lnkReviewAndSubmit" runat="server" &#111;nclick="ShowHideDiv('divReview','lnkReviewAn dSubmit');" >Review and Submit</a></li>
</ul>


<img src="images/links-area-btm-crv.gif" alt="" />




<div id="divOverview" style="display:none;">
<table border="0" cellpadding="0px" cellspacing="0px" width="900px">
<tr>
<td>
<table width="900px" cellpadding="0px" cellspacing="0px" style="vertical-align: top !important;">
<tr width="900px">
<td>
<h4>
Product/Family List</h4>
</td>
</tr>
<tr width="900px" style="vertical-align: top !important;">
<td>
<ext:Store ID="storeProductData" runat="server">
<Reader>
<ext:JsonReader ReaderID="LastName">
<Fields>
<ext:RecordField Name="ID"> </ext:RecordField>
<ext:RecordField Name="CATNO">
</ext:RecordField>
<ext:RecordField Name="DESC">
</ext:RecordField>
<ext:RecordField Name="PRICE">
</ext:RecordField>
<ext:RecordField Name="VOLUME">
</ext:RecordField>

<ext:RecordField Name="ITEMS">
</ext:RecordField>

<ext:RecordField Name="NEEDBY">
</ext:RecordField>

<ext:RecordField Name="COMMENT">
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ux:LockingGridPanel runat="server" ID="grdProductData" StoreID="storeProductData"
Title="Grid" Icon="Application" Width="550px" Height="300">
<ColumnModel ID="ProductDataColumnModel" runat="server">
<Columns>

<%-- <ext:RowNumbererColumn> </ext:RowNumbererColumn>--%>


<ext:Column Header="ID" DataIndex="ID" Width="40px">
</ext:Column>


<ux:LockingColumn DataIndex="CATNO" Header="Cat No (Suggested)" >

<Editor>
<ext:TextField ID="txtCatNo" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>

<ux:LockingColumn DataIndex="DESC" Header="Description" >

<Editor>
<ext:TextField ID="TextField1" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>

<ux:LockingColumn DataIndex="PRICE" Header="Price Target" >

<Editor>
<ext:TextField ID="TextField2" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>

<ux:LockingColumn DataIndex="VOLUME" Header="Estimated Vol (yr)" >

<Editor>
<ext:TextField ID="TextField3" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>

<ux:LockingColumn DataIndex="ITEMS" Header="Items(est)" >

<Editor>
<ext:TextField ID="TextField4" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>

<ux:LockingColumn DataIndex="NEEDBY" Header="Need By" >

<Editor>
<ext:TextField ID="TextField5" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>


<ux:LockingColumn DataIndex="COMMENT" Header="Comments" >

<Editor>
<ext:TextField ID="TextField6" AllowBlank="true" runat="server"></ext:TextField>
</Editor>
</ux:LockingColumn>

</Columns>
</ColumnModel>
</ux:LockingGridPanel>
</td>
</tr>
</table>
</td>
</tr>
</table>



<div id="divProductData" style="display:block;">
<%--<uc3:ucProductData ID="ucProductData1" runat="server" />--%>
DISPLAY A GIRD HERE ALSO....


<div id="divReview" style="display: none;">
<h2>
Review &amp; Submit
</h2>





server side code


using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.Text.RegularExpressions;
using Coolite.Ext.Web;
using System.Xml;

namespace RequestManager
{
public partial class ProductData: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
BindStore();
//divProductData.Attributes.Add("display","none !important");
}
}
protected void BindStore()
{
List<object> list = new List<object>();

for (int i = 0; i <= 19; i++)
{
list.Add(new { ID = i.ToString(), CATNO = "", DESC = "", PRICE = "", VOLUME = "", ITEMS = "", NEEDBY = "", COMMENT = "" });
}

this.storeProductData.DataSource = list;
this.storeProductData.DataBind();
}

}
}


Thanks
Kunal Mehta
9971261098

[Vladimir]

Hi,

Try to replace

style="display:none;"

by

class="x-hide-offsets"

To show hidden div just remove that class

Ext.get("divOverview").removeClass("x-hide-offsets");

[kunal_icreon]

That great .. and thanks to you....

But there is a small problem...... as it is not rendering properly....... when i change the class of div.
I have a editable grid inside the div where i can enter my data too, which is not rendering properly..
The edit section will padding - left to 200-333px . And after i click on any of the hearder grid column then it will render to
the proper position and other controls too.



I mean it will not properly show the controls after remove class from the div..using
It may be some design issue may be ..... and i am using some asp.net webcontorls in my page. Ext.get("divOverview").removeClass("x-hide-offsets");I am sending you a attachment which will describe it.

pls see the attachment, and one more think i have 0.8 ver of coolite control.
when the ver 1.0 will be available.


Thanks
Kunal Mehta.