This is a migrated thread and some comments may be shown as answers.

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

5 Answers 61 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 06 May 2014, 01:51 AM
(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

5 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 06 May 2014, 01:51 AM
Screen capture - see attached.
0
Matt
Top achievements
Rank 1
answered on 06 May 2014, 02:03 AM
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>

0
Matt
Top achievements
Rank 1
answered on 06 May 2014, 02:04 AM

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();

    }

}

0
Matt
Top achievements
Rank 1
answered on 06 May 2014, 02:05 AM

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;

}

0
Marin Bratanov
Telerik team
answered on 07 May 2014, 01:18 PM

Hi Matt,

Could you see whether the sample I attached works for you? The change I added was to "hide" the chart behind a transparent div so that it does not consume mouse events and work with them. The original problem is that a dragged tile needs to be moved out of the TileList and when dragging ends it is moved again in the DOM to the proper place. The chart, however, works with JavaScript and it seems some race condition occurs that leaves some HTML behind (hence the placeholder you observe). I am also attaching a second option - using the CSS pointer-events property to disable the events, which also seemed to work fine for me, but it is not very cross-browser compatible (IE9+ for svg).


Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TileList
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or