PDA

View Full Version : [CLOSED] Grid command column icon does not showing when panel is hide



vzx
Nov 29, 2012, 9:15 AM
hi,
I have two panel is showing one of if has a criteria true and hiding the other. and this panels have two gridpanel. I m loading all gridpanel with data but hiding one of them. when I had load data, the gridpanel in showing panel before load data it has show the icon of command column but when I was show the other panel and hide current panel, icon of the other gridpanel does not showing ?



var setPanelVisibility = function () {
if (App.cboHasSubCoverage.getValue() == 'E') {
App.cntStatistics.hide();
App.fpStatistic.hide();
App.fpSubCoverage.show();
App.gpSubCoverage.show();
<%=btnShowStats.ClientID %>.doToggle(false);
<%=btnShowSubCoverage.ClientID %>.doToggle(true);

}
else {
App.cntStatistics.show();
App.fpStatistic.show();
App.fpSubCoverage.hide();
App.gpSubCoverage.hide();
<%=btnShowSubCoverage.ClientID %>.doToggle(false);
<%=btnShowStats.ClientID %>.doToggle(true);
}
}

Daniil
Nov 29, 2012, 9:42 AM
Hi @vzx,

Welcome to the Ext.NET forums!

I was unable to reproduce the problem. Here is my test case.

You can use it to create your sample.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Show" Handler="App.GridPanel1.show();" />

<ext:GridPanel ID="GridPanel1" runat="server" Hidden="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
<ext:CommandColumn runat="server">
<Commands>
<ext:GridCommand CommandName="test" Icon="Accept" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

vzx
Nov 29, 2012, 10:35 AM
52105211
hi again daniil,

I have attached two screen capture. in this example I have two toggle button and the buttons call setPanelVisibility function for switch the panels. the data at the grids loading before this visibility change event. each grid have a command column type delete. but which panel is visible before load data that panels command column icon showing not the other. if you want to see page aspx I can attach it.

Daniil
Nov 29, 2012, 6:54 PM
Yes, please provide a sample to reproduce.

vzx
Nov 30, 2012, 8:54 AM
in the example below you can see when change the visibility of the panels you cant seen command item icon. if you change combobox selected item before the load the item icon showing the visible panels gridpanel. not the other.

thank you for your help.




<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html>
<head>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
cboHasSubCoverage.Items.Clear();
cboHasSubCoverage.Items.Add(new Ext.Net.ListItem("Yes", "Y"));
cboHasSubCoverage.Items.Add(new Ext.Net.ListItem("No", "N"));
cboHasSubCoverage.Select("Y");

X.Call("setPanelVisibility");

StoreStatistic.DataSource = new object[]
{
new object[] { "code1", "Stat 1"},
new object[] { "code2", "Stat 2"},
new object[] { "code3", "Stat3"}
};
StoreStatistic.DataBind();

StoreSubCoverage.DataSource = new object[]
{
new object[] { "code1", "Coverage 1"},
new object[] { "code2", "Coverage 2"},
new object[] { "code3", "Coverage 3"}
};
StoreSubCoverage.DataBind();

}
}
</script>

<script type="text/javascript">
var setPanelVisibility = function () {
if (App.cboHasSubCoverage.getValue() == 'Y') {
App.pnlStat.hide();
App.pnlCoverages.show();
<%=btnShowStats.ClientID %>.doToggle(false);
<%=btnShowSubCoverage.ClientID %>.doToggle(true);

}
else {
App.pnlStat.show();
App.pnlCoverages.hide();
<%=btnShowSubCoverage.ClientID %>.doToggle(false);
<%=btnShowStats.ClientID %>.doToggle(true);
}
}

</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Store ID="StoreStatistic" runat="server">
<Model>
<ext:Model runat="server">
<IDGen>
<ext:SequentialIdGenerator />
</IDGen>
<Fields>
<ext:ModelField Name="StatCode" Type="String" />
<ext:ModelField Name="StatName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="StoreSubStatistic" runat="server">
<Model>
<ext:Model runat="server">
<IDGen>
<ext:SequentialIdGenerator />
</IDGen>
<Fields>
<ext:ModelField Name="StatCode" Type="String" />
<ext:ModelField Name="StatName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="StoreSubCoverage" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<IDGen>
<ext:SequentialIdGenerator />
</IDGen>
<Fields>
<ext:ModelField Name="HytTeminatId" Type="String" />
<ext:ModelField Name="TeminatKod" />
<ext:ModelField Name="UstTeminatKod" />
<ext:ModelField Name="UzunAd" />
<ext:ModelField Name="KisaAd" />
<ext:ModelField Name="BaslamaTarih" />
<ext:ModelField Name="BitisTarih" />
<ext:ModelField Name="AltTeminatVarmi" />
<ext:ModelField Name="ActionType" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:FormPanel runat="server" ID="fpCOntainer" IDMode="Static" Layout="VBoxLayout" Width="650">
<Items>
<ext:Container runat="server">
<Items>
<ext:ComboBox ID="cboHasSubCoverage" runat="server" LabelCls="field-text" AnchorHorizontal="95%"
Cls="input-item" meta:resourcekey="cboHasSubCoverage" IDMode="Static" FieldLabel="Has Sub Coverage ?">
<Listeners>
<Select Handler="setPanelVisibility();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Container>
<ext:Panel runat="server" ID="pnlStat" Layout="ColumnLayout" Title="Statistics" Width="650" IDMode="Static">
<Items>
<ext:Container runat="server" ID="cntStatistics" IDMode="Static" Layout="ColumnLayout"
Height="360" Width="650" MarginSpec="0 0 5 0">
<Items>
<ext:GridPanel ID="gpStatistic" runat="server" StoreID="StoreStatistic" StripeRows="true"
Margins="0 0 5 0" Flex="1" meta:resourcekey="gpStatistic" Width="320" Height="340"
Border="true" IDMode="Static">
<ColumnModel runat="server">
<Columns>
<ext:CommandColumn ID="gpStatistic_colDelete" runat="server" Width="30px" meta:resourcekey="gpStatistic_colDelete"
Text="Delete">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete" />
</Commands>
<Listeners>
<Command Handler="gpStatisticItemCommand(command, record);" />
</Listeners>
</ext:CommandColumn>
<ext:Column runat="server" ID="gpStatistic_colStatCode" DataIndex="StatCode" Width="80"
meta:resourcekey="gpStatistic_colStatCode" Text="Code" />
<ext:Column runat="server" ID="gpStatistic_colStatName" DataIndex="StatName" Flex="1"
meta:resourcekey="gpStatistic_colStatName" Text="Name" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="rsmStatistic" runat="server" Mode="Single" IDMode="Static">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
<ext:GridPanel ID="gpSubStatistic" runat="server" StoreID="StoreSubStatistic" StripeRows="true"
Margins="0 0 5 0" Flex="1" meta:resourcekey="gpSubStatistic" Width="330" Height="340"
Border="true" IDMode="Static">
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" ID="gpSubStatistic_colStatCode" DataIndex="StatCode" Width="50"
meta:resourcekey="gpSubStatistic_colStatCode" Text="Code" />
<ext:Column runat="server" ID="gpSubStatistic_colStatName" DataIndex="StatName" Flex="1"
meta:resourcekey="gpSubStatistic_colStatName" Text="Name" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="rsmSubStatistic" runat="server" Mode="Single" IDMode="Static" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Container>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="pnlCoverages" Layout="ColumnLayout" Title="Coverages"
Width="650" IDMode="Static">
<Items>
<ext:GridPanel ID="gpSubCoverage" runat="server" StoreID="StoreSubCoverage" StripeRows="true"
Margins="0 0 5 0" meta:resourcekey="gpSubCoverage" Width="650" Height="200" Border="true"
IDMode="Static">
<ColumnModel runat="server">
<Columns>
<ext:CommandColumn ID="gpSubCoverage_colDelete" Text="Delete" runat="server" Width="30px"
meta:resourcekey="gpSubCoverage_colDelete">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete" />
</Commands>
<Listeners>
<Command Handler="gpSubCoverageItemCommand(command, record);" />
</Listeners>
</ext:CommandColumn>
<ext:Column runat="server" ID="gpSubCoverage_colCoverageCode" DataIndex="TeminatKod"
Width="70" meta:resourcekey="gpSubCoverage_colCoverageCode" Text="Cov. Code" />
<ext:Column runat="server" ID="gpSubCoverage_colCoverageName" DataIndex="KisaAd"
Flex="1" meta:resourcekey="gpSubCoverage_colCoverageName" Text="COv. Name" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="rsmSubCoverage" runat="server" Mode="Single" IDMode="Static">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="btnShowStats" runat="server" EnableToggle="true" ToggleGroup="grpToggle"
Pressed="true" meta:resourcekey="btnShowStats" Text="Show Stats" Icon="ApplicationFormMagnify">
<Listeners>
<Click Handler="#{cboHasSubCoverage}.setValue('N');setPanelVisibil ity();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnShowSubCoverage" runat="server" EnableToggle="true" ToggleGroup="grpToggle"
Pressed="false" meta:resourcekey="btnShowSubCoverage" Text="Show Sub Coverages"
Icon="ApplicationLightning">
<Listeners>
<Click Handler="#{cboHasSubCoverage}.setValue('Y'); setPanelVisibility();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</body>
</html>

Daniil
Nov 30, 2012, 12:57 PM
Thank you for the sample.

I would not recommend to manage visibility of the controls before rendering and layouting as you actually do here:

X.Call("setPanelVisibility");

Please use a Hidden property to hide a control initially.

So, I can suggest you to replace:

cboHasSubCoverage.Select("N");
X.Call("setPanelVisibility");

with

this.cboHasSubCoverage.SelectedItem.Value = "N";
this.pnlCoverages.Hidden = true;

Also please take a look at CardLayout.
http://examples2.ext.net/#/Layout/CardLayout/Basic/

It might be helpful in your scenario.

vzx
Nov 30, 2012, 1:54 PM
thanks daniil. that worked. you can close thread.