[How] to nest other telerik controls listview, chart, inside LiveTile control and databind them.

4 posts, 0 answers
  1. Kenneth Skillett
    Kenneth Skillett avatar
    4 posts
    Member since:
    Dec 2004

    Posted 10 Mar 2014 Link to this post

    The topic says it all essentially.  I need to have my live tiles display various types of data, such as lists, charts, etc, and have them auto update by pulling data from web service.  I need to know how can I host listview or a chart control inside live tile control.
    My current setup is a RadTileList that I add dynamically to in code behind my custom class that inherits from LiveTile, I specify my webservice that for example can get back a list object with a couple of fields.  
    I know I can display them directly in my LiveTile's ClientTemplate referencing them with #= data.FieldName #, but I need to have this done on the list level and also all from code behind since I'm using my own classes and not doing it from aspx design portion.

    Any suggestions would be appreciated.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 13 Mar 2014 Link to this post

    Hello Kenneth,

    LIve Tiles take only simple HTML in their ClientTemplate, so server controls cannot be used there.
    Perhaps you can consider creating the needed HTML by using the data from the service call and setting it in the OnClientTemplateDataBound event: http://www.telerik.com/help/aspnet-ajax/tilelist-tiles-client-side-events-livetile-onclienttemplatedatabound.html.
    Here is a simple example:
    <telerik:RadLiveTile runat="server" ID="RadLiveTile1" OnClientTemplateDataBound="OnClientTemplateDataBound">
        <WebServiceSettings Path="Default.aspx" Method="GetMyData" />
    </telerik:RadLiveTile>
    <script type="text/javascript">
        function OnClientTemplateDataBound(sender, args)
        {
            //the sample I use returns three strings separated by a | symbol
            var data = args.get_dataItem().split("|");
            var result = "<ul>";
            for (var i = 0; i < data.length; i++)
            {
                result += "<li>" + data[i] + "</li>";
            }
            result += "</ul>";
            args.set_html(result);
        }
    </script>

    [WebMethod]
    public static string GetMyData()
    {
        //for the sake of simplicity, actual data could be (better) structured
        return "one|two|three";
    }


    Regards,
    Marin Bratanov
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. Kenneth Skillett
    Kenneth Skillett avatar
    4 posts
    Member since:
    Dec 2004

    Posted 13 Mar 2014 in reply to Marin Bratanov Link to this post

    Hi Marin.  Thanks for your reply.  This scenario does not really help me so much as I am trying to have each of my tiles to be of certain Type so I can re-use them and easily add them to my TileList for easy management.
    That's why I wanted to use inheritance and add the tiles to the tilelist in code behind.

    Another question would be, I know I can obviously populate a ListView control from either database or a web service or an object that returns an array or a List of some sort.  I also know that I can create ListView's programatically as per your website examples by defining the templates for Layout, Item, Edit, etc..., but once that is done, and my ListView is databound, is there anyway output its HTML result/structure into ClientTemplate of the LiveTile?

    I went through all the properties and methods and did not see any that do this out right.  Maybe you know of a better solution that I can use to avoid a lot of javascript manipulation or creating my own html rendering of lists, etc...
    I was actually able to stuff my ListView bound to a webservice returning List object, and I added in code-behind to LiveTile using Controls.Add method, but obviously it does not put it in exact section where the ContentTemplate is located.

    Thanks
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 14 Mar 2014 Link to this post

    Hi Kenneth,

     Even if you render the HTML from a listview in the ClientTemplate, it will not function as a ListView control - it will not have any client-side functionality, skins or scripts, because these are all parts of the IScriptControl based on MS AJAX. If the control is not rendered via the standard mechanism, the needed steps that provide all of that functionality will not be executed, so you will end up with HTML that you will, once again, need to populate manually when new data arrives.

    The ClientTemplate of a LiveTile is a pure HTML string that gets evaluated only after a successful request for data returns, which is why you would not see it otherwise, even if you add controls there.

    What I can suggest is using a RadContentTemplateTile: http://www.telerik.com/help/aspnet-ajax/tilelist-tiles-contenttemplatetile.html. You can add controls to its ContentTemplate progammatically and they should function: http://www.telerik.com/help/aspnet-ajax/tilelist-server-side-tile-object.html. You can add custom logic to rebind the listview via the setInterval JavaScript method. Each control can be encapsulated in a user control and by following this approiach you can generate unique JS functions for each: http://www.telerik.com/support/kb/aspnet-ajax/details/using-dynamic-unique-names-for-javascript-functions.


    Regards,

    Marin Bratanov
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top