Set partial view as containers body template

[Afandi]

Hi Telerik,

 

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

[Nikolay]

Hello Afand,

A partial view or a ViewComponent can be loaded within the template of the TileLayout. Here is an example:

<div id="tilelayout"></div>

<!-- container templates -->
<script id="chart" type="text/x-kendo-template">
            @Html.Partial("MyPartialView")
</script>

<script>
    $("#tilelayout").kendoTileLayout({
        containers: [{
            colSpan: 2,
            rowSpan: 1,
            header: {
                text: "Chart"
            },
            bodyTemplate: kendo.template($("#chart").html())
        }],
        columns: 2,
        columnsWidth: 285,
        rowsHeight: 350,
        reorderable: true
    });
</script>

The same can be applied for rendering a ViewComponent. For your convenience, I am attaching a sample project demonstrating the same.

Regards,
Nikolay
Progress Telerik

[Afandi]

Hi Nikolay,

 

Thanks for the reply. This what I wanted.

Will partial view reloaded after add or remove the bodyTemplate? Am using the code from this feature request.

[Afandi]

* resend hyperlink

[Preslav]

Hello Afandi,

My name is Preslav, and I am stepping in for my colleague Nikolay who is currently out of the office.

Using the code from the feature request should be okay with the partial view logic.

Please, give it a try, and let me know if you encounter any problems.

 

Regards,
Preslav
Progress Telerik

[Afandi]

The code work just fine.

How I can prevent tile layout from refresh the partial view after add o remove the bodyTemplate?

[Nikolay]

Hello Afandi,

Using the setOptions() method automatically destroys and recreates the TileLayout so the new options are placed and the approach is based on this method.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Afandi]

The requirement is only load targeted container without reload the others. The setOptions() do not meet the requirement.

Is there any other way to that?

[Nikolay]

Hello Afandi,

I am afraid reloading only the new tile is not possible. Adding a new tile requires the whole TileLyaout widget to be destroyed and recreated with the new settings (the new tiles).

As another alternative to the Add/Remove, I can suggest Show/Hide of tiles. This has been demonstrated already in the following forum post:

• https://www.telerik.com/forums/how-add-remove-item-dynamic-in-tilelayout#SbZvKHdUa0CoMXxujohdoA

I hope this helps.

Regards,
Nikolay
Progress Telerik

[John]

The razor @HTML helper seems to work, however I don't seem able to load ViewComponents.  See attached for the viewcomponent source and the resulting error upon runtime.

[Nikolay]

Hello John,

From the error, I can see that there is something wrong with the template. For example, if your template includes a literal # character, which is not part of a binding expression and is not a script code marker, then you must escape that character or it causes a template compilation error. More information can be obtained at the following link:

• https://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals

For your reference, I am attaching a sample project rendering a ViewComponent in a TileLayout. 

Let me know if this helps. If not please assemble a small runnable page that clearly replicates and isolates the problem. This will help me fully understand the case and allow me to advise further.

Regards,
Nikolay
Progress Telerik

[John]

Thanks, unfortunately even after removing all instances of # in the ViewComponent it still presents errors.  Trying to figure out what's wrong with a kendo templates is ... difficult.  

As a workaround I instead just decided to put a placeholder in the tile and then use ajax to $.load it afterwards (no modifications needed to the ViewComponent that way).  Effectively replicating the "LoadFromUrl" feature you have in many of your other wrapper controls.  This works perfectly, I'd highly advise you to add such a feature to your tile control so I don't have to roll my own version of it.

 

Thanks

[Nikolay]

Hi John,

Thank you for the feedback. It is highly appreciated.

This will be discussed with the team in an attempt to improve this as much as possible.

Regards,

Nikolay
Progress Telerik