Grid Icons Changed

[Joe]

My app has progressed amazingly well, so I figured I'd create some chaos and update my Telerik MVC components.  I went from 2016.3.1118 to 2017.1.223 and the resulting chaos was actually pretty minimal.  Except for one thing, and I cannot quite seem to figure it out.  My grid column header icons, for selecting columns and setting filters has changed from a black icon depicting 3 horizontal lines to what appears to be a blue arrow point upwards towards a dot.  I've attached a screenshot.

My question is, how do I get my regular icons back because I certainly do not like these new ones at all, and neither do my users.

[Joe]

I don't know how, but now in my dev environment, the icons appear to be what I want.  But when I publish it to our porduction system, I'm still getting weird icons... See the screen capture...  Plus in the production environment I get errors on the glyphs and font things that I do not get when I run it locally...  Any ideas?

 

[Joe]

For anybody else experiencing wonkiness with the icons, it turns out Bundling is an issue... When bundling the CSS, the urls contained within that CSS are not properly transformed to reflect the correct path.  I had to manually open kendo.common-material.min.css and change the paths for the different fonts and glyphs to a full absolute path.  And now it works as expected.  Really kinda sucked editing that file since it's minified, but my icons are showing up correctly now.  What a PITA!!

[Alex Hajigeorgieva]

Hi Joe,

I am really sorry to hear that you have had to go through the files this way. 

I can see that the icons in the production screenshot are missing. I am wondering if this has something to do with our recent update to use web font icons which are delivered as font files. This recent change of our requires a file folder on the server named /fonts.

Here is the documentation reference for it:

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#theme-related-folders

Also, we have changed some classes so it might be worth checking that any custom logic did not get affected by the recent change. The changes are listed at:

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

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Joe]

Thank you... That fixes my icon issue, but I'm having an issue with my popup editor not working now after the update.  I have a new template for it, and am using a DropDownList in the popup editor which was bound to the ViewData... But now the drop down isn't working any more. Instead of showing a dropdown with my foreign key values, it's displaying as a text field.

@using System.Collections
@model Vensure.Dashboard.DataEntity.EIWOResult

<style>
    .k-edit-form-container {
        padding: 5px;
    }

    th, td {
        padding: 0;
    }
</style>

<h3>  EIWO Document</h3>
<br />
@Html.HiddenFor(m => m.PseudoPrimaryKey)

<div style="padding:5px">
    <table style="width: 100%">
        <tr>
            <td>@Html.Label("EIWO Disposition: ")</td>
        </tr>

        <tr>
            <td>
                @(Html.Kendo().DropDownList()
                    .Name("EIWOAction")
                    .DataValueField("CodeID")
                    .DataTextField("CodeDesc")
                    .BindTo((IEnumerable)ViewData["GarnishmentCodes"])
                    .Events(e => e.Change("showDocket"))
                    .HtmlAttributes(new { style = "width: 100%" }))
            </td>
        </tr>
        <tr id="docketNumber1" style="display: none;">
            <td>
                @Html.Label("Docket Number: ")
            </td>
        </tr>

        <tr id="docketNumber2" style="display: none;">
            <!-- I know the 10% looks odd, but if I set it to 100%, it doesn't work... I tried multiple times.  I could only get it to expand
            to 100% by using 10% in the <td></td> ... -->
            <td style="width: 10%;">
                <input id="docketNumber" type="text" class="k-textbox" data-bind="value:DocketNumber" style="width: 100%" />
            </td>
        </tr>

    </table>
</div>

<script type="text/javascript">
    function showDocket(e) {
        var ddList = $("#EIWOAction").data("kendoDropDownList").text();

        if (ddList === "Accepted") {
            document.getElementById("docketNumber1").style.display = "block";
            document.getElementById("docketNumber2").style.display = "block";
            document.getElementById("docketNumber").required = true;
            document.getElementById("docketNumber").style.width = "100%";
        } else {
            document.getElementById("docketNumber1").style.display = "none";
            document.getElementById("docketNumber2").style.display = "none";
            document.getElementById("docketNumber").required = false;
        }
    }
</script>

 

It worked fine before the update...

[Joe]

Looks like I solved my own problem once more... In the future, I should pretend I posted a message here,since the answer always reveals itself after I post.

So I don't know if something fundamental changed with the update, but in my popup editor, I had a javascript function defined for when a value was selected in the drop down.  Before the update, this worked fine.  After the update I was getting a javascript error saying it couldn't find my function.  I moved it from the cshtml page for my popup editor into the main view where the grid is and now it works. Go figure...  Of course I'll never be able to re-use that editor template unless I specifically add that function to the grid page.  Seems a little counter-intuitive... the script should be able to be defined in the popup template, but I guess not.

[Alex Hajigeorgieva]

Hi Joe,

I am glad to hear that you have managed to sort the issue by yourself.

I am not certain what may have caused the previous editor template to stop working, however the change handler in the EditorTemplate, there are two options to keep them in their own partial cshtml.

1) Move the function in the script tag prior to the drop-down initialization (i.e script tag first)

OR

2) Move the function in the grid .cshtml leaving the Editor template as it is

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress