Base solution for your next web application
Open Closed

How To Guide: Using Telerik Kendo UI in NetZero 8.1 Core 3.1 jQuery #8282


User avatar
0
OutdoorEd created

I have ported my NetZero 6.91 Net Core 2.2 jQuery app over to 8.1 Net Core 3.1 jQuery here are a few tips for getting Kendo UI to work. Hope this is helpful.

PROJECTNAME.Web.Mvc\Startup\Startup.cs

using Newtonsoft.Json.Serialization;

    public IServiceProvider ConfigureServices(IServiceCollection services)
    {
        // MVC
        services.AddControllersWithViews(options =>
        {
            options.Filters.Add(new AbpAutoValidateAntiforgeryTokenAttribute());
        })

#if DEBUG .AddRazorRuntimeCompilation() #endif

        //Added for Kendo Serialization
        .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver()); 

       //Further down in file
        services.AddKendo();

The Kendo JS files need to be loaded in the header - https://docs.telerik.com/kendo-ui/intro/installation/hosting-kendoui

Make changes to your _Layout.cshtml file Areas\Admin\Views\Layout__Layout.cshtml

HEADER - Add style sheets and javascript <link rel="stylesheet" type="text/css" href="~/lib/kendo-ui/styles/web/kendo.common-material.min.css" /> <link rel="stylesheet" type="text/css" href="~/lib/kendo-ui/styles/web/kendo.material.min.css" />

Take the entire NetZero Scripts section that is at the bottom of the page between the &lt;!--begin::Base Scripts --&gt; tags and move it up into the header

 &lt;!--begin::Base Scripts --&gt;
 ALL THE NETZERO SCRIPTS
 
&lt;!-- Add the Kendo JS at the end of the scripts section so it is called after jQuery has loaded --&gt;
     &lt;script src=&quot;~/lib/kendo-ui/js/kendo.all.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;~/lib/kendo-ui/js/kendo.aspnetmvc.min.js&quot;&gt;&lt;/script&gt;
     
 &lt;!--end::Base Scripts --&gt;
 

~~
EDITED: NOT NECESSARY Find the section for RenderSection("Scripts - it is right after <!--begin::Page Snippets --> Change to true

~~ <!--begin::Page Snippets --> @RenderSection("Scripts", true) <!-- Change to true to handle scripts being placed in the header -->~~~~


2 Answer(s)
  • User Avatar
    1
    musa.demir created

    Hi @outdoored

    Thanks for documentation.

    The second parameter of RenderSection is required. If you set it requeired all views uses that layout must add that section.

    Why did you need to make it required?

    Here is its summary

    /// <summary>
    /// In layout pages, renders the content of the section named <paramref name="name" />.
    /// </summary>
    /// <param name="name">The section to render.</param>
    /// <param name="required">Indicates if this section must be rendered.</param>
    /// <returns>An empty <see cref="T:Microsoft.AspNetCore.Html.IHtmlContent" />.</returns>
    /// <remarks>The method writes to the <see cref="P:Microsoft.AspNetCore.Mvc.Razor.RazorPageBase.Output" /> and the value returned is a token
    /// value that allows the Write (produced due to @RenderSection(..)) to succeed. However the
    /// value does not represent the rendered content.</remarks>
    public HtmlString RenderSection(string name, bool required);
    
  • User Avatar
    0
    OutdoorEd created

    Thanks for the reply. That had worked for me in 6.91. You are correct. It is not necessary to change the RenderSection. It should be

    @RenderSection("Scripts", false)