This is a migrated thread and some comments may be shown as answers.

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

3 Answers 72 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kenneth Skillett
Top achievements
Rank 1
Kenneth Skillett asked on 10 Mar 2014, 07:40 PM
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.

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 13 Mar 2014, 09:29 AM
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.

0
Kenneth Skillett
Top achievements
Rank 1
answered on 13 Mar 2014, 08:22 PM
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
0
Marin Bratanov
Telerik team
answered on 14 Mar 2014, 12:46 PM

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.

 
Tags
General Discussions
Asked by
Kenneth Skillett
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Kenneth Skillett
Top achievements
Rank 1
Share this question
or