Grid icons in AspNet Core 1.1 not rendered correctly

[Adrian]

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.

[Adrian]

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.

[Dimiter Topalov]

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

[Adrian]

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.

[Adrian]

UPDATE

Sorry Dimiter please find attached the correct image.

[Adrian]

Sorry, here is the image.

[Dimiter Topalov]

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

[Adrian]

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.