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

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

3 Answers 194 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Emilio
Top achievements
Rank 1
Emilio asked on 04 Sep 2018, 07:57 AM

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

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 06 Sep 2018, 06:35 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Emilio
Top achievements
Rank 1
answered on 17 Sep 2018, 10:19 AM

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

0
Ivan Danchev
Telerik team
answered on 18 Sep 2018, 10:02 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Emilio
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Emilio
Top achievements
Rank 1
Share this question
or