Grid icons in AspNet Core 1.1 not rendered correctly

8 posts, 0 answers
  1. Adrian
    Adrian avatar
    8 posts
    Member since:
    Apr 2014

    Posted 28 Apr 2017 Link to this post

    Hi,

    The icons in the grid are not rendered correctly.

    The code used is as follows:

    @(Html.Kendo().Grid<ContosoUniversity.ViewModels.EmployeeViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.UUId).Width(140);
                columns.Bound(c => c.FullName).Width(190);
                columns.Bound(c => c.PrimaryTeamName);
                columns.Bound(c => c.AlertCount).Width(110);
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Filterable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(20)
              .Read(read => read.Action("GridEmployeeStatusRead", "KendoGrid"))
          )
    )

     

    The style used are

            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
            <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
            <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />

    As shown by the attached image the filter icons are not shown and the paging icons have a superimposed G.

    Anyone experienced a similar issue? Is there any workaround?

    The HTML is generated only by the razor without further manipulation.

    Any sugestion is welcome.

    Thank you.

  2. Adrian
    Adrian avatar
    8 posts
    Member since:
    Apr 2014

    Posted 28 Apr 2017 in reply to Adrian Link to this post

    UPDATE

    In the HTML rendered there is a text in the span, if removed the icon is shown corenctly.

    Is there a way to remove that text via razor?

    Thanks for any help.

     

    Please see attached image.

  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 01 May 2017 Link to this post

    Hi Adrian,

    Thank you for the provided information.

    The Kendo UI 2017 R1 version introduced a breaking change, as described in the following section of our documentation:

    http://docs.telerik.com/kendo-ui/backwards-compatibility/2017-backward-compatibility

    The described issue seems to be related to the following:

    "The font-size: 0; rule is no longer applied to elements using Kendo UI icons. In this way, if they have text, it will now show up and obscure the icon. You should move it to a title attribute."

    You can check out our online demos and the Sample Application, coming with your installation package to confirm that all icons are rendered as expected when the current Kendo UI version is used, and no custom or third-party styling is applied:

    http://demos.telerik.com/kendo-ui/grid/remote-data-binding

    http://docs.telerik.com/aspnet-core/introduction#the-sample-application

    The Grid Pager messages can be manipulated via the respective API options:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.messages

    The equivalent Razor syntax is as follows:

    // Grid configuration
    ...
    .Pageable(p => p.Messages(m => m.Last("")))  // removes the message for the "Go to last page" Grid pager button
    ...

    I hope this helps, but if the issue persists, please isolate it in a sample runnable project, stripped from custom or third-party logic and styling, and send it to us so we can inspect it further and determine what might be causing it. Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Adrian
    Adrian avatar
    8 posts
    Member since:
    Apr 2014

    Posted 02 May 2017 in reply to Dimiter Topalov Link to this post

    Dear Dimiter,

    Thanks a lot for your support and the link to Kendo documentation, the issue with the paging icons is solved.

    Unfortunately there is another problem, we couldn't find a way to mange using documentation, with the filter icons which are not shown and the reason is that the style applied and rendered by the razor is k-filter and not k-i-filter.

    In the attached image is shown that when the style k-i-filter is forced in the html editor then the filter icon is correctly shown.

    Question: is there a way using razor to render the correct style 'k-i-filter' rather then the wrong style 'k-filter'? or should we rename in the css the k-i-filter to k-filter?

    Thanks a lot again for any suggestion and cooperation.

  5. Adrian
    Adrian avatar
    8 posts
    Member since:
    Apr 2014

    Posted 02 May 2017 in reply to Adrian Link to this post

    UPDATE

    Sorry Dimiter please find attached the correct image.

  6. Adrian
    Adrian avatar
    8 posts
    Member since:
    Apr 2014

    Posted 02 May 2017 in reply to Adrian Link to this post

    Sorry, here is the image.
  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 04 May 2017 Link to this post

    Hello Adrian,

    The provided information suggests that an older version of the Kendo UI wrappers and/or the Kendo UI scripts are used along with newer versions of the CSS, leading to generation of wrong HTML markup (one with classes that are no longer applicable with the newer CSS).

    I have prepared a short video, demonstrating the expected generated markup and layout on my end, using one of the Grid demos, available in the Sample application:

    https://www.screencast.com/t/w7z2zRay3d

    Please upgrade all Kendo UI - related products in use to their latest versions (or make sure all scripts and styles target the same Kendo UI version, e.g. 2017.1.223).

    If the issue still persists after making the required adjustments, we will need an isolated runnable project that we can inspect and try to determine what is causing it.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Adrian
    Adrian avatar
    8 posts
    Member since:
    Apr 2014

    Posted 05 May 2017 in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    After updating the Kendo UI to the latest version, as you suggested, everything is working properly and the icons are shown correctly.

    Thanks a real lot for your professional support and copperation, best regards.

Back to Top