Gridpanel is appearing multiple times

[Mr.Techno]

Hi i am new to use Ext.NET. I downloaded Ext.NEt 1.0RC2 and followed the instructions provided in the site.
I am working on VS2008 and OS is XP sp3.

here is my code..

<asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceHolder" runat="Server">

<CustomWebControl:PageContent ID="pageContent" runat="server">

    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>

<ext:TabPanel ID="SkillGroupTabPanel" runat="server" Width="800" Height="400" EnableTabScroll="false">
            <Items>
                <%-- GRID panel to view and manage ToolAdmins --%>
                <ext:GridPanel ID="GridPanelToolAdmins" runat="server" EnableViewState="false" TrackMouseOver="true"
                    StripeRows="false" Title="Tool Administrators">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="btnRefreshToolAdmins" runat="server" Text="Refresh" IconCls="cls-ico-refresh">
                                    <Listeners>
                                        <Click Handler="#{GridPanelToolAdmins}.reload();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:ToolbarSeparator />
                                <ext:ToolbarTextItem Text="Select Options:">
                                </ext:ToolbarTextItem>
                                <ext:ToolbarSeparator />
                                <ext:Button runat="server" ID="btnOpenAddToolAdmin" Text="Add New ToolAdmin" IconCls="cls-ico-add">
                                    <Listeners>
                                        <Click Handler="#{StoreSearchUser}.removeAll();#{AddNewUser}.show();#{TxtSearchString}.setValue('');#{TxtSearchString}.focus(true,500); #{TxtAddUserType}.setValue(0);" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="btnRemoveToolAdmins" runat="server" Text="Delete Selected Users"
                                    IconCls="cls-ico-trash" Disabled="true">
                                    <DirectEvents>
                                        <Click OnEvent="RemoveUserFromRole">
                                            <ExtraParams>
                                                <ext:Parameter Name="SelectedUserEID" Mode="Raw" Value="deleteUsers(#{GridPanelToolAdmins}.getSelectionModel().getSelections())" />
                                                <ext:Parameter Name="UserType" Value="0" Mode="Raw" />
                                            </ExtraParams>
                                            <EventMask Msg="Deleteing User(s)" ShowMask="true" />
                                            <Confirmation ConfirmRequest="true" Title="Confirm Delete..." Message="Are you sure you want to remove the selected Tool Admin(s) ?" />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:ToolbarSeparator />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="StoreToolAdmins" runat="server" OnRefreshData="RefreshToolAdminUsers"
                            IgnoreExtraFields="False" PruneModifiedRecords="True">
                            <Reader>
                                <ext:JsonReader IDProperty="EID">
                                    <Fields>
                                        <ext:RecordField Name="EID" Type="String" />
                                        <ext:RecordField Name="FullName" Type="String" />
                                        <ext:RecordField Name="EmailAddress" Type="String" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <SortInfo Field="EID" Direction="ASC" />
                        </ext:Store>
                    </Store>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel ID="CheckboxSM" runat="server" CheckOnly="true">
                            <Listeners>
                                <RowSelect Handler="#{btnRemoveToolAdmins}.enable();" />
                                <RowDeselect Handler="if (!#{GridPanelToolAdmins}.hasSelection()) {#{btnRemoveToolAdmins}.disable();}" />
                            </Listeners>
                        </ext:CheckboxSelectionModel>
                    </SelectionModel>
                    <ColumnModel ID="ctl389">
                        <Columns>
                            <ext:Column DataIndex="EID" Header="EID" Width="100" Hideable="false">
                            </ext:Column>
                            <ext:Column DataIndex="FullName" Header="Employee Name" Width="200">
                            </ext:Column>
                            <ext:Column DataIndex="EmailAddress" Header="Email Address" Width="150">
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView1" runat="server" />
                    </View>
                    <LoadMask ShowMask="true" Msg="Processing..." />
                </ext:GridPanel>
            </Items>
        </ext:TabPanel>


</CustomWebControl:PageContent>

</asp:Content>

in my page i am using master page. In master page body content place holder i added a custom web control called "CustomWebControl:PageContent" (this web control is just a div.)
and added above ext.net code in "CustomWebControl:PageContent"(see above code)

this is my custom web control code...

[ParseChildren(false)]
    [ToolboxData("<{0}:PageContent runat=server></{0}:PageContent>")]
    public class PageContent : WebControl
    {
        
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write("<div align=\"center\" class=\"PageContents\" id=\"body\" >");
            base.RenderContents(output);
            output.Write("</div>");
            
        }
    }

When i run the code the result is appearing like this..



the tabpanel,gridpanel and topbar buttons are appearing twice...whats the problem? please help me..

Thank you.

[Vladimir]

Hi,

If you remove your custom control then is it solve the problem?
If no then please provide simple test sample which can be run locally

[Mr.Techno]

Hi Vladimir,
thank you for your reply.. by removing web control also its not working...

Here i am providing sample code which i created for you..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtTest.aspx.cs" Inherits="ExtTest" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="../../CSS/Common/Icons.css" rel="stylesheet" type="text/css" />

   </head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <div>
              
        <ext:TabPanel ID="SkillGroupTabPanel" runat="server" Width="800" Height="200" EnableTabScroll="false">
            <Items>
                <%-- GRID panel to view and manage ToolAdmins --%>
                <ext:GridPanel ID="GridPanelToolAdmins" runat="server" EnableViewState="false" TrackMouseOver="true"
                    StripeRows="false" Title="Tool Administrators">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="btnRefreshToolAdmins" runat="server" Text="Refresh" IconCls="cls-ico-refresh">
                                    
                                </ext:Button>
                                <ext:ToolbarSeparator />
                                <ext:ToolbarTextItem Text="Select Options:">
                                </ext:ToolbarTextItem>
                                <ext:ToolbarSeparator />
                                <ext:Button runat="server" ID="btnOpenAddToolAdmin" Text="Add New ToolAdmin" IconCls="cls-ico-add">
                                    
                                </ext:Button>
                                <ext:Button ID="btnRemoveToolAdmins" runat="server" Text="Delete Selected Users"
                                    IconCls="cls-ico-trash" Disabled="true">
                                    
                                </ext:Button>
                                <ext:ToolbarSeparator />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="StoreToolAdmins" runat="server" OnRefreshData="RefreshToolAdminUsers"
                            IgnoreExtraFields="False" PruneModifiedRecords="True">
                            <Reader>
                                <ext:JsonReader IDProperty="EID">
                                    <Fields>
                                        <ext:RecordField Name="EID" Type="String" />
                                        <ext:RecordField Name="FullName" Type="String" />
                                        <ext:RecordField Name="EmailAddress" Type="String" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <SortInfo Field="EID" Direction="ASC" />
                        </ext:Store>
                    </Store>
                    
                    <ColumnModel ID="ctl389">
                        <Columns>
                            <ext:Column DataIndex="EID" Header="EID" Width="100" Hideable="false">
                            </ext:Column>
                            <ext:Column DataIndex="FullName" Header="Employee Name" Width="200">
                            </ext:Column>
                            <ext:Column DataIndex="EmailAddress" Header="Email Address" Width="150">
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView1" runat="server" />
                    </View>
                    <LoadMask ShowMask="true" Msg="Processing..." />
                </ext:GridPanel>
            </Items>
        </ext:TabPanel>
        
    </div>
    </form>
</body>
</html>

please add some sample data to gridpanel store...

is there anything i am forgetting to add..

after doing also i am observing getting same problem... please help me..i am stuck with this weird problem...

Thank you

[Vladimir]

Hi,

Unfortunately, your sample doesn't reproduce the issue

[Mr.Techno]

Hi vladimir,
thanks for your reply. i solved the problem. the reason for the problem is i forgot to add DirectRequestModule in web.config. its working now...
but i have another problem in the same code.. seems like small problem but unable to figure out.

here is the code..

<ext:Button runat="server" ID="btnOpenAddToolAdmin" Text="Add New ToolAdmin">
                                    <Listeners>
                                        <Click Handler="#{AddNewAdmin}.show();" />
                                        
                                    </Listeners>
                                </ext:Button>

see the code in the last post for this button...

in the same page i have a window with gridpanel in it ..initially it wont appear in the page...
when the user clicks on the "Add New ToolAdmin " i want to show that window.. but click event working differently....

here is the window code... it wont appear on the page until user clicks on "Add New ToolAdmin" button...

i modified the code for you...

<ext:Window runat="server" ID="AddNewAdmin" Width="400" Height="400" Layout="fit"
        Title="Seach and add new user" Modal="true" Closable="true" CloseAction="Hide"
        InitCenter="true">
        <TopBar>
            <ext:Toolbar ID="Toolbar5" runat="server">
                <Items>
                    <ext:ToolbarTextItem Text="Enter EID :">
                    </ext:ToolbarTextItem>
                    <ext:TextField ID="TxtSearchString" IDMode="Explicit" Width="150" runat="server"
                        MaxLength="400" MaskRe="(^[a-zA-Z_0-9 ]+$)">
                        
                    </ext:TextField>
                    <ext:Button ID="btnSearchUser" Text="Search" IconCls="cls-ico-search" runat="server">
                        //some code for performing search action..the results will be shown in the gridpanel
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
            <ext:GridPanel ID="GridSearchUserforAdmin" runat="server" EnableViewState="false" TrackMouseOver="true">
                <Store>
                    <ext:Store ID="StoreSearchUserforAdmin" runat="server" IgnoreExtraFields="False" PruneModifiedRecords="True">
                        <Reader>
                            <ext:JsonReader IDProperty="UserEID">
                                <Fields>
                                    <ext:RecordField Name="UserEID" Type="String" />
                                    <ext:RecordField Name="FirstName" Type="String" />
                                    <ext:RecordField Name="LastName" Type="String" />
                                    <ext:RecordField Name="Email" Type="String" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                        <SortInfo Field="UserEID" Direction="ASC" />
                        <Listeners>
                            <Load Fn="function(){#{SearchUserSelectionModel}.selectFirstRow();}" />
                        </Listeners>
                    </ext:Store>
                </Store>
                <SelectionModel>
                    <ext:RowSelectionModel ID="SearchUserSelectionModel" SingleSelect="true">
                        <Listeners>
                            <RowSelect Handler="#{btnAddSelectedUser}.enable();" />
                            <RowDeselect Handler="if (!#{GridSearchUserforAdmin}.hasSelection()) {#{btnAddSelectedUser}.disable();}" />
                        </Listeners>
                    </ext:RowSelectionModel>
                </SelectionModel>
                <ColumnModel ID="ColumnModel4">
                    <Columns>
                        <ext:Column DataIndex="UserEID" Header="EID" Width="100" Hideable="false">
                        </ext:Column>
                        <ext:Column DataIndex="FirstName" Header="FirstName" Width="100">
                        </ext:Column>
                        <ext:Column DataIndex="LastName" Header="LastName" Width="100">
                        </ext:Column>
                        <ext:Column DataIndex="Email" Header="Email" Width="150">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView5" runat="server" />
                </View>
                <LoadMask ShowMask="true" Msg="Processing..." />
            </ext:GridPanel>
        </Items>
        <Buttons>
            <ext:Button ID="btnAddSelectedUser" runat="server" Text="Add Selected" IconCls="cls-ico-add"
                Disabled="true">
                <DirectEvents>
                    <Click OnEvent="AddSelectedUserEvent">
                        <ExtraParams>
                            <ext:Parameter Name="SelectedUserEID" Value="getSelectedEID()" Mode="Raw" />
                            <ext:Parameter Name="UserType" Value="#{TxtAddUserType}.getValue()" Mode="Raw" />
                        </ExtraParams>
                        <EventMask Msg="Adding User..." ShowMask="true" />
                    </Click>
                </DirectEvents>
            </ext:Button>
            <ext:Button ID="btnAddWindowClose" runat="server" Text="Close">
                <Listeners>
                    <Click Handler="#{AddNewAdmin}.hide();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>

if i comment the gridpanel part in the above code... the window is appearing when the user clicks on "Add New ToolAdmin" button..
i am unable to understand the problem.. cant we use gridpanel in the window?
please help me...

Thank you