Weird tile reorder, tile list resize behavior when Tile contains HTMLChart

5 posts, 0 answers
  1. Matt
    Matt avatar
    21 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 Link to this post

    (forum page has timed out twice now when I've submitted this... going to post in pieces)

    In a TileList I have a Tile with a radHTMLChart in the PeekTemplate.
    When I click on the tile to reposition it, it reorders the other tiles in strange ways.
    The Tilelist area expands causing scroll bars to display and blank "phantom" tiles seem to take up space.
    I've tried disabling the chart's tooltips, limiting size of the chart content, adding empty onClientClick handlers... no luck.

    Please see screen capture and partial example page code snippets below in thread replies

    Thanks!
    -Matt

  2. Matt
    Matt avatar
    21 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 in reply to Matt Link to this post

    Screen capture - see attached.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    21 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 Link to this post

    ASPX:

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

         

    <%--CSS workaround to hide the Tile List new Group separator to prevent creating new tile groups when dragging tiles.

    details: http://www.telerik.com/forums/disable-create-new-group --%>

    <style>

         div.RadTileList .rtlistGroupSeparatorVisible,

         div.RadTileList .rtlistGroupSeparator

         {

             display: none;

         }

    </style>

     

        <div style="padding-left:50px;">

             

            <%--Tile list (movable tiles) ----------------------------------------------------------------------------------------------------%>

     

            <telerik:RadTileList runat="server" ID="RadTileList1" Width="710px" Height="500px" TileRows="3"

                        SelectionMode="None" EnableDragAndDrop="true" >

                <Groups>

                    <telerik:TileGroup>

                                     

                        <%--Other Tiles  ----------------------------------------------------------------------------------------------------------------------%>

                                     

                        <telerik:RadContentTemplateTile Name="WelcomeTile" BackColor="#00457E" Shape="Wide">

                            <ContentTemplate>

                                <asp:Panel ID="WelcomeTitlePanel" CssClass="WideTileContent TileBigger"runat="server">

                                    Hello!

                                </asp:Panel>

                            </ContentTemplate>

                            <PeekTemplate>

                                <asp:Panel class="WideTileContent TileRegular" runat="server"

                                    ID="WelcomeMessagePanel"

                                    BackColor="#20659E">

                                    Just another tile.

                                </asp:Panel>

                            </PeekTemplate>

                            <PeekTemplateSettings CloseDelay="0" ShowInterval="0"ShowPeekTemplateOnMouseOver="True" HidePeekTemplateOnMouseOut="True"

                                Animation="Slide" />

                        </telerik:RadContentTemplateTile>

     

                        <%--Other Tiles  ----------------------------------------------------------------------------------------------------------------------%>

                                     

                        <telerik:RadContentTemplateTile Name="WelcomeTile2" BackColor="#00457E" Shape="Wide">

                            <ContentTemplate>

                                <asp:Panel ID="Panel1" CssClass="WideTileContent TileBigger" runat="server">

                                    Hello!

                                </asp:Panel>

                            </ContentTemplate>

                            <PeekTemplate>

                                <asp:Panel class="WideTileContent TileRegular" runat="server"

                                    ID="Panel2"

                                    BackColor="#20659E">

                                    Just another tile.

                                </asp:Panel>

                            </PeekTemplate>

                            <PeekTemplateSettings CloseDelay="0" ShowInterval="0"ShowPeekTemplateOnMouseOver="True" HidePeekTemplateOnMouseOut="True"

                                Animation="Slide" />

                        </telerik:RadContentTemplateTile>

                                     

                        <%--Savings Summary Tile ----------------------------------------------------------------------------------------------------------------------%>

                                     

                        <telerik:RadContentTemplateTile Name="SavingsSummaryTile" BackColor="#a1c0d4"Shape="Wide" NavigateUrl="">

                            <ContentTemplate>

                                <asp:Panel ID="SavingsSummaryPanel" CssClass="WideTileContent" runat="server">

                                    <div class="TileBigger" style="padding-bottom:10px;">Problem<br/>Child</div>

                                </asp:Panel>

                            </ContentTemplate>

                            <PeekTemplate>

                                <div class="WideTileContent">

                                    <telerik:RadHtmlChart runat="server" ID="SavingsSummaryChart" Width="270"Height="130">

                                        <ChartTitle><Appearance Visible="false" /></ChartTitle>

                                        <Legend><Appearance Visible="false" /></Legend>

                                        <PlotArea>

                                            <Series>

                                                <telerik:ColumnSeries DataFieldY="Total"ColorField="Color">

                                                    <LabelsAppearance Visible="true"Position="OutsideEnd" TextStyle-FontSize="10px">

                                                        <ClientTemplate>#=dataItem.ChartLabel#</ClientTemplate>

                                                    </LabelsAppearance>

                                                    <TooltipsAppearance Visible="false" />

                                                </telerik:ColumnSeries>

                                            </Series>

                                            <XAxis Visible="true" DataLabelsField="AxisLabel"MajorTickSize="0px" MinorTickSize="0px">

                                                <LabelsAppearance TextStyle-FontSize="10px" />

                                                <MajorGridLines Visible="false"></MajorGridLines>

                                                <MinorGridLines Visible="false"></MinorGridLines>

                                            </XAxis>

                                            <YAxis Visible="false">

                                                <MajorGridLines Visible="false"></MajorGridLines>

                                                <MinorGridLines Visible="false"></MinorGridLines>

                                            </YAxis>

                                        </PlotArea>

                                    </telerik:RadHtmlChart>

                                </div>

                            </PeekTemplate>

                            <PeekTemplateSettings CloseDelay="0" ShowInterval="0"ShowPeekTemplateOnMouseOver="True" HidePeekTemplateOnMouseOut="False"

                                Animation="Slide" />

                        </telerik:RadContentTemplateTile>

     

                                     

                        <%--Other Tiles  ----------------------------------------------------------------------------------------------------------------------%>

                                     

                        <telerik:RadContentTemplateTile Name="WelcomeTile3" BackColor="#00457E" Shape="Wide">

                            <ContentTemplate>

                                <asp:Panel ID="Panel3" CssClass="WideTileContent TileBigger" runat="server">

                                    Hello!

                                </asp:Panel>

                            </ContentTemplate>

                            <PeekTemplate>

                                <asp:Panel class="WideTileContent TileRegular" runat="server"

                                    ID="Panel4"

                                    BackColor="#20659E">

                                    Just another tile.

                                </asp:Panel>

                            </PeekTemplate>

                            <PeekTemplateSettings CloseDelay="0" ShowInterval="0"ShowPeekTemplateOnMouseOver="True" HidePeekTemplateOnMouseOut="True"

                                Animation="Slide" />

                        </telerik:RadContentTemplateTile>

     

                         

                    </telerik:TileGroup>

                </Groups>

            </telerik:RadTileList>   

     

        </div>

     

    </asp:Content>

  5. Matt
    Matt avatar
    21 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 Link to this post

    Code Behind:


    public
     partial class Sandbox1 : App_Code.BasePage2

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            DataSet savingsSummary = new DataSet();

            savingsSummary.Tables.Add(new DataTable());

            savingsSummary.Tables[0].Columns.Add(new DataColumn("Total", typeof(Decimal)));

            savingsSummary.Tables[0].Columns.Add(new DataColumn("Color"));

            savingsSummary.Tables[0].Columns.Add(new DataColumn("ChartLabel"));

            savingsSummary.Tables[0].Columns.Add(new DataColumn("AxisLabel"));

     

            DataRow newRow = savingsSummary.Tables[0].NewRow();

            newRow["Total"] = 30;

            newRow["Color"] = "#FFFFFF";

            newRow["ChartLabel"] = "Thirty";

            newRow["AxisLabel"] = "Dog";

            savingsSummary.Tables[0].Rows.Add(newRow);

     

            newRow = savingsSummary.Tables[0].NewRow();

            newRow["Total"] = 7;

            newRow["Color"] = "#FFFFFF";

            newRow["ChartLabel"] = "Seven";

            newRow["AxisLabel"] = "Cat";

            savingsSummary.Tables[0].Rows.Add(newRow);

     

            newRow = savingsSummary.Tables[0].NewRow();

            newRow["Total"] = 42;

            newRow["Color"] = "#FFFFFF";

            newRow["ChartLabel"] = "Four-T-Two";

            newRow["AxisLabel"] = "Banana";

            savingsSummary.Tables[0].Rows.Add(newRow);

     

            SavingsSummaryChart.DataSource = savingsSummary;

            SavingsSummaryChart.DataBind();

        }

    }

  6. Matt
    Matt avatar
    21 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 Link to this post

    CSS:

    /* Dashboard tile styles ---------------------------------------------------------------------------------------------- */

    .WideTileContent,

    .DoubleTileContent {

        padding: 10px;

        width: 290px;

        overflow: hidden;

    }

    .WideTileContent {

        height: 130px;

    }

    .DoubleTileContent {

        height: 310px;

    }

    .TileBigger, .TileRegular {

        color: #ffffff;

    }

    .TileBigger,

    .TileBigger * {

        font-size: 18px;

        font-weight: bold;

    }

    .TileRegular,

    .TileRegular * {

        font-size: 14px;

    }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017