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

4 posts, 0 answers
  1. Emilio
    Emilio avatar
    2 posts
    Member since:
    Jan 2018

    Posted 04 Sep 2018 Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2025 posts

    Posted 06 Sep 2018 Link to this post

    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.
  3. Emilio
    Emilio avatar
    2 posts
    Member since:
    Jan 2018

    Posted 17 Sep 2018 in reply to Ivan Danchev Link to this post

    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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2025 posts

    Posted 18 Sep 2018 Link to this post

    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.
Back to Top