Duane Roelands
Top achievements
Rank 1
Rank 1
Duane Roelands
asked on 25 Oct 2013, 03:02 PM
The documentation claims that this can be done with the set_width() method on the client side.
However, in order to call this method, you need a reference to the TileList. According to the documentation, this is done via $telerik.findTileList(id, parent) where id is a string representation of the id and parent is the element containg the tilelist.
So, assuming the following document structure...
... what is the correct javascript to set the width of the TileList to 900px? I can't make this work, because no matter what I pass to findTileList I always get null back.
However, in order to call this method, you need a reference to the TileList. According to the documentation, this is done via $telerik.findTileList(id, parent) where id is a string representation of the id and parent is the element containg the tilelist.
So, assuming the following document structure...
<body> <form id="form"> <div id="tiles"> <div id="centering"> <telerirk RadTileList ID="NavTiles"></telerik:RadTileList> </div> </div> </form></body>... what is the correct javascript to set the width of the TileList to 900px? I can't make this work, because no matter what I pass to findTileList I always get null back.
5 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 28 Oct 2013, 03:44 AM
Hi Duane Roelands,
Please have a look into the following code snippet to set the width of RadTileList through JavaScript.
ASPX:
JavaScript:
CSS:
Thanks,
Princy.
Please have a look into the following code snippet to set the width of RadTileList through JavaScript.
ASPX:
<telerik:RadTileList ID="RadTileList1" runat="server" OnClientLoad="OnClientLoad1"> <Groups> <telerik:TileGroup> <telerik:RadTextTile ID="RadTextTile1" runat="server" Text="Tile1"> </telerik:RadTextTile> </telerik:TileGroup> </Groups></telerik:RadTileList>JavaScript:
<script type="text/javascript"> function OnClientLoad1(sender, args) { var tile = $find("<%=RadTextTile1.ClientID %>"); tile.addCssClass("setwidth"); }</script>CSS:
<style type="text/css"> .setwidth { width: 900px !important; }</style>Thanks,
Princy.
0
Duane Roelands
Top achievements
Rank 1
Rank 1
answered on 28 Oct 2013, 03:02 PM
The <% clientid %> solution is not tenable, because it inevitably produces the error message relating to the <% %> tags.
Please answer the original question as to accuracy of the online documentation regarding the JavaScript API. Specifically, code samples that demonstrate how to use $telerik.findTileList(id, parent) and set_width().
Thank you.
Please answer the original question as to accuracy of the online documentation regarding the JavaScript API. Specifically, code samples that demonstrate how to use $telerik.findTileList(id, parent) and set_width().
Thank you.
0
Princy
Top achievements
Rank 2
Rank 2
answered on 29 Oct 2013, 03:13 AM
Hi
Duane Roelands,
The custom dimensions for the tiles are not supported in RadTileList. One suggestion is that you can override the CSS classes for the width of the element that holds the RadTiles. Please have a look into this forum thread.
Thanks,
Princy.
The custom dimensions for the tiles are not supported in RadTileList. One suggestion is that you can override the CSS classes for the width of the element that holds the RadTiles. Please have a look into this forum thread.
Thanks,
Princy.
0
Duane Roelands
Top achievements
Rank 1
Rank 1
answered on 29 Oct 2013, 03:24 AM
Okay, I'm going to try asking my question again, because I feel like you're not answering the question I am asking...
1. Your product documentation says that the width of the TileList control can be modified through client side code.
2. The documentation is here: http://www.telerik.com/help/aspnet-ajax/tilelist-client-side-tilelist-api.html
3. Please note at the bottom of the page, there is a method called set_width().
4. The documentation says that this method can be used to adjust the width of the TileList control.
5. The <% client Id %> solution is not sufficient for my needs.
6. Your documentation says it can be done through JavaScript.
Please provide a piece of sample code that uses the documentation page I have linked above the demonstrates using the set_width() method to change the size of the TileList control through Javscript.
Thank you.
1. Your product documentation says that the width of the TileList control can be modified through client side code.
2. The documentation is here: http://www.telerik.com/help/aspnet-ajax/tilelist-client-side-tilelist-api.html
3. Please note at the bottom of the page, there is a method called set_width().
4. The documentation says that this method can be used to adjust the width of the TileList control.
5. The <% client Id %> solution is not sufficient for my needs.
6. Your documentation says it can be done through JavaScript.
Please provide a piece of sample code that uses the documentation page I have linked above the demonstrates using the set_width() method to change the size of the TileList control through Javscript.
Thank you.
0
Hi Duane,
Check the following page sample:
Review the comments in the javascript section. I hope they answer your question.
Regards,
Stanimir
Telerik
Check the following page sample:
<%@ Page Language="C#" AutoEventWireup="true" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager> <asp:Panel runat="server" ID="Pannel1"> <telerik:RadTileList ID="RadTileList1" runat="server" OnClientLoad="OnClientLoad1" BackColor="Red"> <Groups> <telerik:TileGroup> <telerik:RadTextTile ID="RadTextTile2" runat="server" Text="Tile1"></telerik:RadTextTile> <telerik:RadTextTile ID="RadTextTile3" runat="server" Text="Tile1"></telerik:RadTextTile> <telerik:RadTextTile ID="RadTextTile4" runat="server" Text="Tile1"></telerik:RadTextTile> <telerik:RadTextTile ID="RadTextTile5" runat="server" Text="Tile1"></telerik:RadTextTile> <telerik:RadTextTile ID="RadTextTile6" runat="server" Text="Tile1"></telerik:RadTextTile> <telerik:RadTextTile ID="RadTextTile7" runat="server" Text="Tile1"></telerik:RadTextTile> <telerik:RadTextTile ID="RadTextTile1" runat="server" Text="Tile1"></telerik:RadTextTile> </telerik:TileGroup> </Groups> </telerik:RadTileList> </asp:Panel> <script type="text/javascript"> //Global variable which will store the RadTileList's client id. It is initialized in the OnClientLoad1 event handler. var tileListIdGlobal; function OnClientLoad1(sender, args) { //Get reference to the TileList by the first argument passed to the function. sender.set_width("700px"); //initialize the global variable storing the id for later usage (in case using server code RadTileList1.ClientID does not work for you.) tileListIdGlobal = sender.get_id(); } Sys.Application.add_load(function () { window.setTimeout(function () { //Get reference to RadTileList by $telerik.findTileList var tileList = $telerik.findTileList("<%= RadTileList1.ClientID%>"); tileList.set_width("350px"); }, 2000); window.setTimeout(function () { //Get reference to RadTileList by $find. var tileList = $find("<%= RadTileList1.ClientID%>"); tileList.set_width("700px"); }, 4000); window.setTimeout(function () { //Get reference to the TileList by $find and the globally stored id value. This code should be executed after OnClientLoad1! var tileList = $find(tileListIdGlobal); tileList.set_width("300px"); }, 6000); }); </script> </form></body></html>Review the comments in the javascript section. I hope they answer your question.
Regards,
Stanimir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.