What's New?

Coolite components visibility problem

  1. #1
    Nov 12, 2009, 12:43 PM

    Coolite components visibility problem

    Hi all,
    I'm starting in these days using Coolite and I'm really impressed by the results.
    But I've got a problem with the drawing of the components...

    INTRODUCTION:
    The application is build with many .ascx controls that contain other .ascx controls.
    The parent, using session variables, decide which of the child controls to show by setting their visible properties.
    The parent control itself has its own visible property set by his parent control.

    The ScriptManager is in the only aspx page of the application: default.aspx.

    THE PROBLEM:
    When I show a Coolite component, I got many Javascript errors or problems.
    In a Portal with draggable Portlets, if I change the visible of the ascx file to false and then again to true, the Portlets become invisible.
    In an ascx file with a GridPanel, I can't resize columns without obtain: "htmlfile: unspecified error"; the columns i resized, but Visual Web Developer catch the error.
    In the same GridPanel, iconcommands are invisibles; using ScriptManager.RegisterIcon(icon) in the OnLoad event they appear but repeating many times.

    All these problems are solved by the refresh of the page (F5).

    Hope to have been clear and that my English was not a problem to understand.

    Thanks to anyone who know a possible solution or a tip.
  2. #2
    Nov 16, 2009, 9:56 AM

    RE: Coolite components visibility problem

    Maybe more details will help me to explain my problem.

    In the Home-Page of the application (an ascx control in default.aspx), I draw a Portal, like the one provided in the examples.
    When the user changes the page, the application simply sets "visible = false" of all the ascx control and then sets "visible = true" for the right one.

    When this happens, Coolite components give problems: invisible Portlets, GridPanel without icons and runtime errors of Objects not defined.
    With a simple refresh of the page (F5) the actual page works fine.

    Viewing the source page in the browser shows differences between "before the refresh" and "after the refresh".
    Before refreshing the page, there are pieces of the previous page, for example: if I go to any page from the Home-Page, I still find Portal and Portlets...

    I think this happens because of the Ajax refresh of the UpdatePanel in the default.aspx, so... is there any way to force the script manager to redraw and/or to update the visibles Coolite components?

    Thanks in advance.

  3. #3
    Nov 16, 2009, 4:25 PM

    RE: Coolite components visibility problem

    Hi 19lolito82,

    Welcome! Thanks for the feedback.


    Any chance you could put together a simplified .aspx sample demonstrating how to reproduce this scenario? That would help us focus our effort and time on solving the issue quickly.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Nov 19, 2009, 9:28 AM

    RE: Coolite components visibility problem

    Thanks Geoffrey,
    I'm working to reproduce the problems in a simplified example.
    I'll post it when ready.

    Thank you again for your attention.
  5. #5
    Nov 20, 2009, 6:06 AM

    RE: Coolite components visibility problem

    Ok,
    by now I can't reproduce the whole set of errors in a simplified example.

    Anyway, I was able to reproduce one of the errors, the less important but, I hope, symptomatic...

    Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<%@ Register src="Controls/desktop.ascx" tagname="desktop" tagprefix="uc1" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:ScriptManager ID="ScriptManager2" runat="server">
        </ext:ScriptManager>
        
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <div id="TopMenu" style="background-color: #66AAFF; height: 50px; text-align:center;">
                    <asp:Button ID="Button1" runat="server" Text="One" &#111;nclick="Button1_Click" />
                    <asp:Button ID="Button2" runat="server" Text="Two" &#111;nclick="Button2_Click" />
                

            </ContentTemplate>
        </asp:UpdatePanel>
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                
                <div id="MainContainer">
                    <uc1:desktop ID="desktop1" runat="server" />
                

                
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
    Default.aspx.cs
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Session["SelectedPage"] = "one";
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Session["SelectedPage"] = "two";
    }
}
    Desktop.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="desktop.ascx.cs" Inherits="Controls_desktop" %>

<%@ Register src="one/one.ascx" tagname="one" tagprefix="uc1" %>
<%@ Register src="two/two.ascx" tagname="two" tagprefix="uc2" %>

<uc1:one ID="one1" runat="server" />
<uc2:two ID="two1" runat="server" />

    Desktop.ascx.cs
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Controls_desktop : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        ShowRightControl();
    }

    protected void ShowRightControl()
    {
        HideAllControls();
        if (Session["SelectedPage"] != null)
        {
            switch (Session["SelectedPage"].ToString())
            {
                case "one":
                    one1.Visible = true;
                    break;
                case "two":
                case "three":
                    two1.Visible = true;
                    break;
            }
        }
    }

    protected void HideAllControls()
    {
        one1.Visible = false;
        two1.Visible = false;
    }
}

    To don't overload this post with code:
    - the User Control one1.ascx contains a portal with some portlets like the one in the Coolite Example.
    - the User Control two.ascx contains a simple gridPanel.

    Try switching from page one, two and then again to one. Now drag a portlet: in the IDE I got an unspecified error.
    After a full refresh of the page the problem disappears...
  6. #6
    Nov 20, 2009, 7:46 AM

    RE: Coolite components visibility problem

    Here's another big problem:

    this is the GridPanel in the page two:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="grid.ascx.cs" Inherits="Controls_two_grid" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<ext:Store ID="Store1" runat="server">
    <Reader>
        <ext:ArrayReader>
            <Fields>
                <ext:RecordField Name="company" />
                <ext:RecordField Name="price" Type="Float" />
                <ext:RecordField Name="change" Type="Float" />
                <ext:RecordField Name="pctChange" Type="Float" />
                <ext:RecordField Name="lastChange" Type="Date" />
            </Fields>
        </ext:ArrayReader>
    </Reader>
</ext:Store>

<ext:GridPanel 
    ID="GridPanel1"
    runat="server"
    StoreID="Store1"
    StripeRows="true"
    Title="Array Grid"
    TrackMouseOver="true"
    Width="600"
    Height="350"
    AutoExpandColumn="Company">
    <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
            <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
            <ext:Column Header="Price" Sortable="true" DataIndex="price">
            </ext:Column>
            <ext:Column Header="Change" Sortable="true" DataIndex="change">
            </ext:Column>
            <ext:Column Header="Change" Sortable="true" DataIndex="pctChange">
            </ext:Column>
            <ext:Column Header="Last Updated" Sortable="true" DataIndex="lastChange">
            </ext:Column>
            <ext:ImageCommandColumn>
                <Commands>
                    <ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="Edit">
                        <ToolTip Text="Edit" />
                    </ext:ImageCommand>
                    <ext:ImageCommand CommandName="Delete" Icon="Delete" Text="Delete">
                        <ToolTip Text="Delete" />
                    </ext:ImageCommand>
                </Commands>
            </ext:ImageCommandColumn>
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
    </SelectionModel>
</ext:GridPanel>      
<asp:Button ID="Button1" runat="server" Text="three" &#111;nclick="Button1_Click" />
    Icons of the ImageCommands are invisibles: it seems like a wrong style is loaded...
  7. #7
    Nov 20, 2009, 7:56 AM

    RE: Coolite components visibility problem

    Hi,

    I can't reproduce any issue with icon of the ImageCommand
    Does the following example work for you? (at least online example works fine)


    https://examples1.ext.net/#/GridPane...Image_Command/


  8. #8
    Nov 20, 2009, 9:11 AM

    RE: Coolite components visibility problem

    Hi,
    the example is fully working.
    Here's the full example I'm using. The problem seems to be the UpdatePanel: if the button that raise the postback is outside the updatepanel, the gridpanel's icons are drawn; if the button is inside the updatepanel (to redraw only that region), icons are invisibles.

    I think that other problems I got are depending on this thing...

Similar Threads

  1. GridPanel visibility
    By AlexMaslakov in forum 1.x Help
    Replies: 5
    Last Post: Aug 17, 2011, 12:56 PM
  2. [CLOSED] Problem with creating components by WebMethod
    By pil0t in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 10, 2010, 9:59 AM
  3. Problem with dinamic components in Firefox
    By joao.msdn in forum 1.x Help
    Replies: 0
    Last Post: Apr 16, 2010, 10:35 AM
  4. [FIXED] [V0.7] Visibility Bug
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Nov 05, 2008, 9:48 AM
  5. Extending Ext Components and Coolite
    By jchau in forum Open Discussions
    Replies: 1
    Last Post: Aug 14, 2008, 11:35 AM

Posting Permissions