Hi,

I am trying to build a dashboard with the tile layout and beside standard kendo ui charts and grids, I would like to have a couple of tiles with pre-built angularjs directive components. 

How can I inject the angularjs component and make it bound to data in tilelayout controller?

Html renders from the template, but it is not reachable from the controller, as (I presume it is not bound directly).

Any help would be appreciated.

Thanks,

Vedad

I have a Kendo Panel that contains a Tile Layout.  I have 2 hard-coded HTML kendo templates that display and 1 that I am using a Kendo Window which loads a view passing in a model.  The 2 hard-coded ones are displayed fine, but the Kendo Window one is an empty rectangle (see PanelWithTileLayout.jpg).  If I enter a URL of the Kendo Windows content source, it displays fine (see KendoWindowContentWithDirectURL.jpg).  The LoadContentFrom URL is being hit on a breakpoint in the controller.  I was thinking I have to open the Kendo Window in javascript somewhere, but it is not recognized in the document.ready routine, probably because it is in a child template and hasn't been created yet.  

<script id="dues-remit" type="text/x-kendo-template">
    @(Html.Kendo().Window()
        .Name("DuesRemission")
        .Width(310)
        .Draggable(false)
        .LoadContentFrom("_DuesRemission", "Dashboard", new { TplNum = ViewBag.TempleNumber })
        .Events(events => events.Close("close"))
        .Visible(true)
        .ToClientTemplate()
    )
</script>

<script id="members" type="text/x-kendo-template">
    <div id="members-border" class="health-border">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <h3 class="temple-health-title">Membership Change</h3>
            <div class="info-holder">
                <div class="item-values">Percent change since last year: -0.5%</div>
                <div class="item-values">Percentile against all temples: 63</div>
            </div>
        </div>
    </div>
</script>

<script id="unapplied-payments" type="text/x-kendo-template">
    <div id="unapplied-payments-border" class="health-border">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <h3 class="temple-health-title">Unapplied Payments</h3>
            <div class="info-holder">
                <div class="item-values">Current number of unapplied payments: 5</div>
                <div class="item-values">Percentile against all temples: 47</div>
            </div>
        </div>
    </div>
</script>

<div class="demo-section k-content container-fluid">
    @(Html.Kendo().TileLayout()
        .Name("temple-health")
        .Columns(3)
        .RowsHeight("150px")
        .ColumnsWidth("510px")
        .Containers(c => {
            c.Add().BodyTemplateId("dues-remit").ColSpan(1).RowSpan(1);
            c.Add().BodyTemplateId("members").ColSpan(1).RowSpan(1);
            c.Add().BodyTemplateId("unapplied-payments").ColSpan(1).RowSpan(1);
        })
        .Reorderable(true)
        .Resizable(true)
    )
</div>

_DuesRemission.cshtml:

<div id="dues-remit-border" class="health-border">
    <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
    <div class="info-container">
        <h3 class="temple-health-title">Dues Remission</h3>
        <div class="info-holder">
            <div class="col-lg-6 col-sm-6">Dues Year @Model.CurrentDuesYear</div><div class="item-values col-lg-6 col-sm-6">Percent paid as of today: @Model.PercentPaidCurrentYear</div>
            <div class="col-lg-6 col-sm-6">Dues Year @Model.LastDuesYear</div><div class="item-values col-lg-6 col-sm-6">Percent paid last year: @Model.PercentPaidLastYear</div> 
        </div>
    </div>
</div>

There are no errors in the F12 console display.

Hello,

In the TileLayout DEMO (https://demos.telerik.com/kendo-ui/tilelayout/index, script tags are used in the html code.
We want to create the script tag with the javascript code.

For example in the demo page is written:
<script id="views-chart-template" type="text/x-kendo-template"> <div id="views-chart" style="height:100%; width:100%"></div> </script>

When replacing this html code by the JS code :
<script>
     var s = document.createElement('script');
      s.id = "visitors-chart-template";
      s.setAttribute('type', "text/x-kendo-template");
  
      var d = document.createElement('div');
      d.id = "visitors-chart";
      d.style = "height:100%; width:100%";
      s.appendChild(d);
        
      document.getElementById("example").appendChild(s);
</script>

Then this works in Chrome and Microsoft Edge, but not in Firefox.

The HTML page is added in the appendix. When opening this in Firefox, you will see that the "Visitors" dashboard card content is not filled in. When opening this HTML page with Chrome, then the "Visitors" dashboard is okay.

Thanks in advance.

Hi,

As the title suggests is it possible to create a Tile Layout where each row has a different height property?

Hi Telerik,

I'm using Kendo TileLayout in Jquery.

The requirement is to have RTL support inside Tilelayout component and fixing bug issue about RTL resizing and reordering in jquery.

You have solution in angular but we need in kendo UI jquery.

Is there a way to apply it?

Please help me do it

Thanks !

Hi Telerik,

The requirement is to have a vertical or horizontal separator inside tilelayout.

Is there a way to apply it?

Hi !

I'm using Kendo TileLayout in Jquery. When I create Tilelayout.

I want add or remove item dynamic at runtime, but I don't find way to do it.

Please help me do it

Many thanks !

Hi there,

Is there any provision for hiding the header but yet still being able to reorder by dragging the content around?

Many thanks

Paul

Hi Telerik,

As per title, is there a way to apply it?