This is a migrated thread and some comments may be shown as answers.

Grid Icons Changed

6 Answers 186 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 28 Feb 2017, 06:14 PM

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.

6 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 28 Feb 2017, 08:47 PM

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?

 

0
Joe
Top achievements
Rank 1
answered on 28 Feb 2017, 09:23 PM
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!!
0
Alex Hajigeorgieva
Telerik team
answered on 02 Mar 2017, 03:27 PM
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
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 (charts) and form elements.
0
Joe
Top achievements
Rank 1
answered on 02 Mar 2017, 07:51 PM

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...

0
Joe
Top achievements
Rank 1
answered on 02 Mar 2017, 08:16 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 06 Mar 2017, 03:37 PM
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
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.
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or