|
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 </div>.
Iam sending the code.
ASPX
<script language="javascript" type="text/javascript">
function ShowHideDiv(divID,anchor)
{
var divOverview = document.getElementById('divOverview');
var divProductData = document.getElementById('divProductData');
var divReview = document.getElementById('divReview');
var lnkRequestOverview = document.getElementById('<%=lnkRequestOverview.ClientID %>');
var lnkProductData = document.getElementById('<%=lnkProductData.ClientID %>');
var lnkReviewAndSubmit = document.getElementById('<%=lnkReviewAndSubmit.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= document.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">
<div><img src="images/links-area-top-crv.gif" alt="" /></div>
<div class="linksareabg">
<ul>
<li><a id="lnkRequestOverview" class="active" runat="server" onclick="ShowHideDiv('divOverview','lnkRequestOverview');" >Overview</a></li>
<li><a id="lnkProductData" runat="server" onclick="ShowHideDiv('divProductData','lnkProductData');" >Product Data</a></li>
<li><a id="lnkReviewAndSubmit" runat="server" onclick="ShowHideDiv('divReview','lnkReviewAndSubmit');" >Review and Submit</a></li>
</ul>
</div>
<div><img src="images/links-area-btm-crv.gif" alt="" /></div>
</div>
<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>
<div id="divProductData" style="display:block;">
<%--<uc3:ucProductData ID="ucProductData1" runat="server" />--%>
DISPLAY A GIRD HERE ALSO....
</div>
<div id="divReview" style="display: none;">
<h2>
Review & Submit
</h2>
</div>
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
Kunal
|