More than one kendo mvc control into kendo template, not render correctly

[Emilio]

Hi.

I´m trying to build a SPA MVC ASP NET web Project which uses partsviews as a view templates kendo.  Like this:

File: Views/Home/Dashboard.cshtml.

<script id="dashboardview" type="text/x-kendo-template">

    <div class="container-fluid">
        <div class="row">
            <div class="col">

                <p>
                 @(Html.Kendo()
                .Button()
                .Name("PrimaryButton")
                .Content("Boton 1 dashboard")
                .HtmlAttributes(new { @class = "textButton k-primary" }))
  </p>
                <p>
                    @(Html.Kendo()
                .Button()
                .Name("PrimaryButton2")
                .Content("Boton 2 dashboard")
                .HtmlAttributes(new { @class = "textButton k-primary" }))

                </p>

            </div>
        </div>
    </div>

</script>

All is right when javascript router object is running, the views are created and destroyed correctly but when one of these view (kendo templates) has two or more kendo mvc controls, the render is no correctly, and de control is not render into <div id=”main”></div> how to explain your documentatio about SPA mvc Apps (Music Stored Dash Board Tutorial), like following (pay attention at <\/sctript> tag ):

<script id="dashboardview" type="text/x-kendo-template">

    <div class="container-fluid">
        <div class="row">
            <div class="col">

                <p>
                    <button class="textButton k-primary" id="PrimaryButton"> 1 dashboard</button>
                    <script>
                        kendo.syncReady(function(){jQuery("#PrimaryButton").kendoButton({});});
                    </script>
                </p>
                <p>
                    <button class="textButton k-primary" id="PrimaryButton2"> 2 dashboard</button>
                    <script>
                        kendo.syncReady(function(){jQuery("\#PrimaryButton2").kendoButton({});});
                        <\/script>

                                        </p>

                                    </div>
                                </div>
                            </div>

                    </script>

I´d tried use the ToClientTemplate() method but it doesn´t work. And the result of view is the first control, render correctly into “body app” and the second one render outside.

Please, Is there some best practice guide to Spa MVC Apps with Kendo controls? What error is it?,

Thanks in advance. I´d attached a screenshot browser

[Ivan Danchev]

Hello Emilio,

With regard to guides and tutorials on using Kendo UI in an SPA in MVC environment we have the Music Store Dashboard tutorial, which you mentioned. More general not MVC-specific information on Kendo UI SPA is available in this documentation section.

As for the issue with the rendering of helpers nested in Kendo UI templates, in order to do that you need to call each helper's ToClientTemplate() method, as shown below:

<script id="dashboardview" type="text/x-kendo-template">
    <div class="container-fluid">
        <div class="row">
            <div class="col">

                <p>
                @(Html.Kendo()
                    .Button()
                    .Name("PrimaryButton")
                    .Content("Boton 1 dashboard")
                    .HtmlAttributes(new { @class = "textButton k-primary" })
                    .ToClientTemplate()
                )
                </p>
                <p>
                @(Html.Kendo()
                    .Button()
                    .Name("PrimaryButton2")
                    .Content("Boton 2 dashboard")
                    .HtmlAttributes(new { @class = "textButton k-primary" })
                    .ToClientTemplate()
                )
                </p>

            </div>
        </div>
    </div>
</script>

Regards,
Ivan Danchev
Progress Telerik

[Emilio]

Hello again,

If I use .ToClientTemplate() in all view components, after the first one is rendered, the console browser shows the following message:
VM872:3 Uncaught SyntaxError: Unexpected token <
            kendo.syncReady(function(){jQuery("\#PrimaryButton").kendoButton({});});
<\/script>
Take note again the "\" character before the component ID

 

Thank you again

[Ivan Danchev]

Hello Emilio,

It is not clear what other helpers you have in the view and how they are related to the Buttons, but if the scenario involves nesting helpers in templates you can see the following post in the forums, which demonstrates the syntax for nesting helpers.

Regards,
Ivan Danchev
Progress Telerik