Styling not working for Grid

2 posts, 0 answers
  1. Mike
    Mike avatar
    8 posts
    Member since:
    Jun 2018

    Posted 21 Jun 2018 Link to this post

    I'm porting an MVC application that uses Kendo UI to .NET Core.  The existing application has considerable styling created by another team and the ported application needs to look like the old one.  The new application is not picking up the old styles (I've double checked the css files and I'm sure they're all in the right location).  My source looks like this:

        <div class="col-md-10">
                @(Html.Kendo().Grid<FundViewModel>()
                                        .Name("grid")

                                            ....

    When I look at the HTML source on the old code, I see:

    <div class="k-widget k-grid" id="grid">

    Wrapping the kendoGrid object.  When I look at the HTML source for the new code, I see:

    <div id="grid" name="grid">

    Around the grid.  Is there a difference between the MVC and .NET Core products in the way the default styles are specified?  Is there any reference reading material that talks about styling in the .NET Core product?  Is there a way to explicitly state what styles are used?

  2. Dimitar
    Admin
    Dimitar avatar
    807 posts

    Posted 26 Jun 2018 Link to this post

    Hello Mike,

    In general, if you are using identical Kendo UI Theme for both projects and there are no custom styling rules applied on the Grid, the end result should look the same. Take a look at the following Grid demos from both suites (MVC and Core) and you will notice that they look the same:


    If the k-grid and k-widget classes are missing from the Grid wrapper, this usually means that the widget is not correctly initialized. To pin-down the exact cause for the issue, please refer to the points listed below:

    • Follow the Getting Started article for ASP.NET Core and make sure that the Telerik.UI.for.AspNet.Core package is successfully installed. 

    • Check the Layout file of the application to verify that the desired Kendo UI Theme is referenced.

    • After the application has loaded, check the browser console tab in the Developer Tools for any JavaScript errors that might indicate what the origin of the issue is.

    • Open the browser network tab and verify that the kendo stylesheets are loaded correctly.

    Concerning the Kendo UI Themes, there are currently two types:


    For a quick preview of each theme, please review to the Grid Demo for ASP.NET Core. You will notice that there is a dropdown arrow menu at the top-right corner above the Demo title, that could be used to switch between the themes.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top