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

Set partial view as containers body template

12 Answers 710 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Afandi
Top achievements
Rank 1
Veteran
Afandi asked on 29 Dec 2020, 08:10 AM

Hi Telerik,

 

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

12 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay
Telerik team
answered on 30 Dec 2020, 10:09 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Afandi
Top achievements
Rank 1
Veteran
answered on 31 Dec 2020, 01:06 AM

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.

0
Afandi
Top achievements
Rank 1
Veteran
answered on 31 Dec 2020, 01:11 AM

* resend hyperlink

0
Preslav
Telerik team
answered on 01 Jan 2021, 10:25 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Afandi
Top achievements
Rank 1
Veteran
answered on 04 Jan 2021, 06:26 AM

The code work just fine.

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

0
Nikolay
Telerik team
answered on 05 Jan 2021, 02:00 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Afandi
Top achievements
Rank 1
Veteran
answered on 11 Jan 2021, 08:45 AM

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?

0
Nikolay
Telerik team
answered on 13 Jan 2021, 08:02 AM

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:

I hope this helps.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
John
Top achievements
Rank 1
answered on 09 Mar 2021, 09:01 PM
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.
0
Nikolay
Telerik team
answered on 11 Mar 2021, 05:23 PM

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:

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
John
Top achievements
Rank 1
answered on 16 Mar 2021, 06:44 PM

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

0
Nikolay
Telerik team
answered on 18 Mar 2021, 05:24 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TileLayout
Asked by
Afandi
Top achievements
Rank 1
Veteran
Answers by
Nikolay
Telerik team
Afandi
Top achievements
Rank 1
Veteran
Preslav
Telerik team
John
Top achievements
Rank 1
Share this question
or