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
<
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
>
Code Behind:
publicpartial
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();
}
}
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
;
}
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,
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.