I am trying to use the RadLiveTiles to display data from an oDataDataSource. If I create a different data source for each tile and set the OnClientDataLoading to a different function that sets the filter with the correct parameters for each tile everything works fine.
Since I will have many tiles I found this in your documentation
"Another option is to change the filter in the OnClientDataLoading event, because the event arguments expose the data source arguments. Essentially, the logic is the same, but you can apply filters per LiveTile (e.g., by using different OnClientDataLoading event handlers, see Example 8) and use the same ODataDataSource control."
However when I try this it is not working. The first tile works fine, but when the 2nd fires, it first calls the first over again, then the second, and the data returned is from the first. When the 3rd tile fires it again calls the 1st, then the 2nd then the 3rd and the data is the first when first initialized. When the first update interval occurs all tiles refresh at the same time, again with the data all being from the first tile
This is the code I am using
<script type="text/javascript">
function OnClientDataLoading(sender, args) {
alert("1")
args.get_value().filter.filters.push({
field: "MasterID",
operator: "eq",
value: 32
});
}
function OnClientDataLoading1(sender, args) {
alert("2")
args.get_value().filter.filters.push({
field: "MasterID",
operator: "eq",
value: 64
});
}
function OnClientDataLoading2(sender, args) {
alert("3")
args.get_value().filter.filters.push({
field: "MasterID",
operator: "eq",
value: 44
});
}
</script>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True" />
</div>
<div>
<telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
<Transport Read-DataType="JSONP">
<Read Url="http://xxxxxx.com/tService1/TileService.svc/" />
</Transport>
<Schema>
<telerik:DataModel ModelID="opItemLiveTileData" Set="opItemLiveTileDatas">
<telerik:DataModelField FieldName="MasterID" />
<telerik:DataModelField FieldName="nOrders" />
</telerik:DataModel>
</Schema>
</telerik:RadODataDataSource>
<telerik:RadTileList runat="server" ID="RadTileList2" TileRows="4" Width="1300px" SelectionMode="Single" EnableDragAndDrop="false" BackColor="teal" AutoPostBack="false" >
<Groups>
<telerik:TileGroup>
<telerik:RadLiveTile ID="RadLiveTile3" runat="server" ODataDataSourceID="RadODataDataSource1" DataModelID="opItemLiveTileData" UpdateInterval="6000" OnClientDataLoading="OnClientDataLoading" AutoPostBack="false">
<ClientTemplate>
<strong>Loaded from ODataDataSource: </strong><br />
#= MasterID # <br></br> #= nOrders # <br></br>
</ClientTemplate>
</telerik:RadLiveTile>
<telerik:RadLiveTile ID="RadLiveTile1" runat="server" ODataDataSourceID="RadODataDataSource1" DataModelID="opItemLiveTileData" UpdateInterval="9000" OnClientDataLoading="OnClientDataLoading1" AutoPostBack="false">
<ClientTemplate>
<strong>Loaded from ODataDataSource: </strong><br />
#= MasterID # <br></br> #= nOrders # <br></br>
</ClientTemplate>
</telerik:RadLiveTile>
<telerik:RadLiveTile ID="RadLiveTile2" runat="server" ODataDataSourceID="RadODataDataSource1" DataModelID="opItemLiveTileData" UpdateInterval="11000" OnClientDataLoading="OnClientDataLoading2" AutoPostBack="false">
<ClientTemplate>
<strong>Loaded from ODataDataSource: </strong><br />
#= MasterID # <br></br> #= nOrders # <br></br>
</ClientTemplate>
</telerik:RadLiveTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
<script type="text/javascript">
</script>
</div>
</form>
Any help would be greatly appreciated as my only alternative is to create a datasource for each tile.
TileEventArgs doesnt exist?
from the doco;
Event Data
sender Telerik.Web.UI.RadBaseTile
The RadBaseTile instance raised the event.
args Telerik.Web.UI.TileEventArgs
The arguments of the Clicked event.
But this class doesnt exist in Telerik.Web.UI (v 2015.2.623.45)
Hi
I have a TileList that consists of 3 groups (yesterday, today, tomorrow) displayed horizontally, each with a group header tile. 'Yesterday' is on the left, 'Today' is center, 'Tomorrow' is on the right. I want to scroll horizontally to the 'today' group on pageLoad. Anchors don't seem to work or only vertically. Any ideas how to accomplish this?
Thank you
Is there a way to have the control scale the image to fit the width of the tile? I would like to show images in the tiles that are much larger than the standard widths of the tiles and everything I try ends up with the image clipped to fit. Since I don't always control the image shown, I need the image to scale down and fit in the tile. Can you show me how to do this? I am databinding with a list(of T). Thanks.
<telerik:RadTileList runat="server" ID="RadTileList1" AppendDataBoundItems="true" TileRows="4">
<DataBindings>
<CommonTileBinding TileType="RadImageTile" Shape="Wide" DataTitleTextField="TileTexts" DataNavigateUrlField="tileNavUrls" />
<ImageAndTextTileBinding DataTextField="TileTexts" DataImageUrlField="TileImagePaths" />
</DataBindings>
<Groups>
<telerik:TileGroup Name="Featured Vehicles">
<telerik:RadContentTemplateTile runat="server" Shape="Square" CssClass="noHover">
<ContentTemplate>
<div class="groupHeadingTitle">
<div class="innerTitle">Featured<br />
Vehicles</div>
</div>
</ContentTemplate>
</telerik:RadContentTemplateTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
My implementation of the RadImageAndTextTile (standalone tiles) is in an IFrame and I need set the target of the navigation link to "_top" so that the containing page navigates to the url, not just the frame contents. Can you tell me how to set the target?
Thanks.
Charles
hi ,
I want tile list
1 2 3 4 5 6
7 8 9 10 11 12
13 14 15 16 17
format.
but now its in
1 2 7 8 13 14
3 4 9 10 15 16
5 6 11 12 17
and i want to remove space between 2 & 7.
So pls give me corrwct answer.
Thanks & Regards,
Radian
I use the recommended code for setting tile postbacks (below) and I found that it changes the inline height Css to 185px. The two screenshots show the affect, it changes the horizontal layout and the tilelist height. Project code below, screenshots attached.
<%@ Page Language="C#" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="/App_Themes/Edway/Edway.css" type="text/css" />
<link rel="stylesheet" href="mypage.css" type="text/css" />
<style>
.left {
align-items: center;
}
.wideContent {
width: 290px;
height: 130px;
font-family: Segoe UI;
padding: 10px;
}
.squareContent {
width: 100px;
height: 120px;
padding: 10px;
}
.shortContent {
height: 105px;
}
.font14 {
font-size: 14px;
}
.font16 {
font-size: 16px;
}
.peekTemplateClass {
width: 120px;
height: 120px;
padding: 10px;
font-size: 13px;
line-height: 20px;
}
.feedback {
width: 120px;
height: 120px;
font-size: 13px;
line-height: 20px;
}
/* group heading tile appearance */
.groupHeadingTitle {
height: 120px;
width: 120px;
position: relative;
}
.innerTitle {
width: 120px;
height: 40px;
top: 50%;
margin-top: -20px;
position: absolute;
font-size: 17px;
line-height: 20px;
padding-left: 10px;
}
div.noHover.RadTile {
border-color: transparent;
}
/* change tile texts to better fit long names and show over the images */
.RadTile div.rtileBottomContent {
font-weight: bold;
width: auto;
max-width: 120px;
color: Black;
/* semi-transparent background like this will work in CSS3 compatible browsers */
background-color: rgba(255,255,255,0.5);
height: 20px;
line-height: 20px;
padding: 0 10px;
bottom: 10px;
}
</style>
<!-- remove this function and the layout of the tiles changes
<script type="text/javascript">
function resetAutoPostBackTile(sender, args) {
var tiles = sender.get_allTiles();
for (var i = 0; i < tiles.length; i++) {
//a default condition would be if the tile has NavigateUrl set
//you can use a custom one - e.g., the presence of a CSS class
if (tiles[i].get_navigateUrl()) {
tiles[i].set_autoPostBack(false);
}
}
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadTileList ID="RadTileList1" runat="server" TileRows="1" Skin="Bootstrap" AutoPostBack="true" OnClientLoad="resetAutoPostBackTile" CssClass="left" >
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile1" runat="server" Width="120px" Height="120px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
<PeekTemplate>
<div class="squareContent font14">
See your complete gradebook
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile2" runat="server" Width="120px" Height="120px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
<PeekTemplate>
<div style="background-color: #f8b617" class="squareContent font14">
See help for your homepage
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="TextTileProfile" Name="TextTileProfile" runat="server" Width="120px" Height="120px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
<PeekTemplate>
<div style="background-color: #f37928" class="squareContent font14">
Update your password
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="tileLogout" runat="server" Width="120px" Height="120px" Text="Logout" BackColor="#03953f" AutoPostBack="true">
<PeekTemplate>
<div style="background-color: #03953f" class="squareContent font14">
Logout
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
<telerik:RadTileList ID="RadTileList2" runat="server" TileRows="1" Skin="Bootstrap" AutoPostBack="true" OnClientLoad="resetAutoPostBackTile" CssClass="left" >
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile3" runat="server" Width="120px" Height="120px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
<PeekTemplate>
<div class="squareContent font14">
See your complete gradebook
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile4" runat="server" Width="120px" Height="120px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
<PeekTemplate>
<div style="background-color: #f8b617" class="squareContent font14">
See help for your homepage
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile5" Name="TextTileProfile" runat="server" Width="120px" Height="120px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
<PeekTemplate>
<div style="background-color: #f37928" class="squareContent font14">
Update your password
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="RadImageAndTextTile6" runat="server" Width="120px" Height="120px" Text="Logout" BackColor="#03953f" AutoPostBack="true">
<PeekTemplate>
<div style="background-color: #03953f" class="squareContent font14">
Logout
</div>
</PeekTemplate>
<PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
ShowPeekTemplateOnMouseOver="true" />
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
</form>
</body>
</html>
The onclick to the code behind event handler only fires if autopostback='true' is set for the tilelist apparently, but this disables the navigateurl's on the other tiles, how do I use both in the same tilelist, I tried AutoPostBack="true" on the tile with the onclick but no joy.
<telerik:RadTileList ID="RadTileList1" runat="server" TileRows="1" Width="1000px" ScrollingMode="None" >
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile runat="server" ImageHeight="100px" ImageWidth="100px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile runat="server" ImageHeight="100px" ImageWidth="100px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="TextTileProfile" Name="TextTileProfile" runat="server" ImageHeight="100px" ImageWidth="100px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="tileLogout" runat="server" ImageHeight="100px" ImageWidth="100px" OnClick="btnLogout_Click" Text="Logout" BackColor="#03953f" AutoPostBack="true">
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>
Hi,
I'm using RadTileList and creating the tiles dynamically based on user inputs. If user clicks on add, we will capture the data and create a tile and will Render in the UI. User can delete a tile, create a new tile with some inputs. We require Drag and Drop functionality and need to store the position of each tile. I'm using the below method to capture the position. ProjectAssetsTileList.GetAllTiles() is giving always "0" on page load. Please suggest a way to persist the TileList Tiles and Order.
protected List<
DomainDAL.ProjectAsset
> CaptureAssetPosition(List<
DomainDAL.ProjectAsset
> workingProjectAssets)
{
if (ProjectAssetsTileList.GetAllTiles().Count > 0)
{
foreach (DomainDAL.ProjectAsset asset in workingProjectAssets.Where(x => x.State != (int)Constants.AssetStatus.Deleted))
{
int position = ProjectAssetsTileList.GetAllTiles().FindIndex(x => x.Name == asset.AssetId.ToString());
asset.SequenceNumber = position;
}
}
List<
DomainDAL.ProjectAsset
> sorted = workingProjectAssets.OrderBy(x => x.SequenceNumber).ToList();
return sorted;
}
Dear Team,
I'm creating a TileList Dynamically using the below code. The content template tile is having a anchor tag, when I click on it the associated method has to be called. Instead of calling the click event associated to anchor tag, the RadTileList onclickclick event is getting fired. Please help on this. Below is the code.
<asp:UpdatePanel ID="UpdatePanelTileList" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<telerik:RadTileList runat="server" AutoPostBack="false" OnClientTileClicking="OnClientTileClicking" ID="ProjectAssetsTileList"
Width="97%"
EnableDragAndDrop="true" OnTileDataBound="ProjectAssetsTileList_TileDataBound"
SelectionMode="Multiple">
</telerik:RadTileList>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function OnClientTileClicking(titleList, args) {
debugger;
alert('hi');
args.set_cancel(true);
$telerik.cancelRawEvent(args);
return false;
}
function MyFunctionEdit() {
alert('hi edit');
return false;
}
</script>
</telerik:RadScriptBlock>
</ContentTemplate>
</asp:UpdatePanel>
Tile creation Code:
private class ContentTemplate : ITemplate
{
private DomainDAL.ProjectAsset asset;
public ContentTemplate(DomainDAL.ProjectAsset asset)
{
this.asset = asset;
}
public void InstantiateIn(Control container)
{
string tileContent = string.Empty;
if (asset==null)
{
tileContent = @"<div class='card add'>
<div class='dotted-box'>
<h1>+</h1>
</div>
<div class='menu'>
<ul class='list-group'>
<a href='#' class='list-group-item' data-toggle='modal' data-target='#text-edit-lightbox'><span class='icon icon-text'></span>Add Text Frame</a>
<a href='#' class='list-group-item' data-toggle='modal' data-target='#image-library'><span class='icon icon-media'></span>Browse Media Library</a>
<a href='#' class='list-group-item' data-toggle='modal' data-target='#upload-library'><span class='icon icon-upload'></span>Upload images or videos</a>
</ul>
</div>
</div>";
}
else if (asset.ContentType==Constants.ContentType.Image )
{
tileContent = @"<div class='card' onclick='alert(hidiv);'><div class='card-wrapper'>
<div><img src='" + String.Format("{0}/{1}/{2}", BLOB_ROOT_URL, asset.Container, asset.ImageUrl) + @"' class='thumb-image'/>
<div class='pull-righ static-icon'>
<span class='close'><img src='../images/icons/icon-trash.png'/></span>
</div>
<div class='backdrop' >
<a href='javascript:MyFunctionEdit();' class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>
<span class='close'><img src='../images/icons/garbage.png'/></span>
</div>
</div>
<div>
<h4><img src='../images/icons/icon-photo.png' class='icon-margin'/>" + asset.Caption + @"</h4>
<p>Lorem ipsum dolor sit amet, conset adipiscing elit.</p>
</div>
</div>
</div>";
}
else
{
tileContent = @"<div class='card'><div class='card-wrapper'>
<div><div class='text-tile'><h2>" + asset.AssetName + @"</h2><h4>" + asset.Caption + @"</h4></div>
<div class='pull-righ static-icon'>
<span class='close'><img src='../images/icons/icon-trash.png'/></span>
</div>
<div class='backdrop'>
<a href='href='javascript:void(0)' onclick='event.preventDefault();alert(hi);' class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>
<span class='close'><img src='../images/icons/garbage.png'/></span>
</div>
</div>
<div>
<h4><img src='../images/icons/icon-photo.png' class='icon-margin'/>" + asset.Caption + @"</h4>
<p>Lorem ipsum dolor sit amet, conset adipiscing elit.</p>
</div>
</div>
</div>";
}
LiteralControl literal = new LiteralControl(tileContent);
container.Controls.Add(literal);
}
}
Bind Data to Tile List
protected void BindDataToTileList(List<DomainDAL.ProjectAsset> workingProjectAssets)
{
if (ProjectAssetsTileList.Groups.Count>0)
ProjectAssetsTileList.Groups.RemoveAt(0);
TileGroup group = new TileGroup();
foreach (DomainDAL.ProjectAsset asset in workingProjectAssets.Where(x => x.State != (int)Constants.AssetStatus.Deleted))
{
RadContentTemplateTile contTile = new RadContentTemplateTile();
contTile.ContentTemplate = new ContentTemplate(asset);
contTile.CssClass = "card";
group.Tiles.Add(contTile);
}
RadContentTemplateTile newAssetTile = new RadContentTemplateTile();
newAssetTile.ContentTemplate = new ContentTemplate(null);
newAssetTile.CssClass = "card add";
group.Tiles.Add(newAssetTile);
ProjectAssetsTileList.Groups.Add(group);
}