Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
114 views

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.

 

Ianko
Telerik team
 answered on 28 Aug 2015
1 answer
61 views

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)

Vessy
Telerik team
 answered on 27 Aug 2015
2 answers
88 views

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

rugydp
Top achievements
Rank 1
 answered on 19 Aug 2015
6 answers
353 views

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>

Vessy
Telerik team
 answered on 30 Jul 2015
1 answer
79 views

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

 

 

Ianko
Telerik team
 answered on 30 Jul 2015
1 answer
75 views

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

 

Danail Vasilev
Telerik team
 answered on 23 Jul 2015
2 answers
127 views

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>

david
Top achievements
Rank 1
 answered on 10 Jul 2015
1 answer
157 views

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>

Marin Bratanov
Telerik team
 answered on 30 Jun 2015
4 answers
131 views

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;
   }

 

 

Marin Bratanov
Telerik team
 answered on 29 Jun 2015
1 answer
162 views

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

}

 

 

 

 

 

 

 

 

 

 

 

Marin Bratanov
Telerik team
 answered on 19 May 2015
Narrow your results
Selected tags
Tags
+123 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?