Setting width of tilelist through JavaScript.

6 posts, 0 answers
  1. Duane Roelands
    Duane Roelands avatar
    8 posts
    Member since:
    Apr 2007

    Posted 25 Oct 2013 Link to this post

    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...

    <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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Oct 2013 Link to this post

    Hi Duane Roelands,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Duane Roelands
    Duane Roelands avatar
    8 posts
    Member since:
    Apr 2007

    Posted 28 Oct 2013 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2013 Link to this post

    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.
  6. Duane Roelands
    Duane Roelands avatar
    8 posts
    Member since:
    Apr 2007

    Posted 28 Oct 2013 Link to this post

    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.

  7. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 29 Oct 2013 Link to this post

    Hi Duane,

    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">
    <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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017