IE and Edge have caused a bug with the grid filter popup

5 posts, 1 answers
  1. Grahame
    Grahame avatar
    10 posts
    Member since:
    Feb 2013

    Posted 05 Jun 2017 Link to this post

     

    From what I understand a change in how IE and Edge works is causing new and unwanted behavior with the gid filters in Kendo UI. The filter control text fields now have drop-down suggestion text like 1.00, 2.00, 45.00 (even if it is a date filter).

     

    Replication

    1. Open Edge (or IE if it is later version).
    2. Go to the Demo site: http://demos.telerik.com/kendo-ui/grid/remote-data-binding
    3. Click on the grid filter button/icon. (use: Order Date or Ship/City Name)
    4. Click into the text value field.
    5. Before you type anything note that an unwanted dropdown shows up.

    Cause

    From what I can understand IE and Edge now assume all <input ...>'s are autocompleate="on" even when they have no autocomplete attribute. This does not happen in Chrome. Using the debugger to manually add the autocomplete ="off" in Edge fixes it. However (code side) there is no easy way to add attributes using only CSS.

    I have attached a screenshot showing what is happening on the Telerik Demo site.

     

  2. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 07 Jun 2017 Link to this post

    Hello Grahame,

    I was able to reproduce it on Edge, but not on Internet Explorer 11 with the latest version.

    Also, this is a known issue which is directly related to Edge and the Kendo UI team has no control over it.

    Please check the following topics demonstrating how this can be prevented:

    https://support.microsoft.com/en-us/instantanswers/c150cc25-ba25-4a61-b2bb-ff7820c4a975/autocomplete-web-forms-with-microsoft-edge

    https://answers.microsoft.com/en-us/windows/forum/apps_windows_10-msedge/microsot-edge-how-to-stop-autocomplete-when-going/51c1c4c7-edce-47a2-905d-eb88208a598e

    Regards,
    Stefan
    Progress Telerik
    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.
  3. Grahame
    Grahame avatar
    10 posts
    Member since:
    Feb 2013

    Posted 07 Jun 2017 Link to this post

    Hi Stefan,

     

    Thank you for the quick reply, both solutions involve asking the client to change settings in there browser. This may be valid for a limited number of users but for web applications that hit a wide and ever changing audience it is not a viable solution.

    An example would be Facebook asking everyone to change their browser settings, so there web site would work correctly.

     

    As you said this is a Microsoft thing, we have no control over it. However it can most definitely be overridden (with some help from Telerik).

     

    The Kendo Grid-Filter code creates an <input ... > control, if autocomplete ="off" was added to the generated control it would not act the way it does. Moreover if we had an easy way to add attributes on control generation that could potentially solve future issues.

    Perhaps there is a way of doing this already that I am unaware of?

     

    Thank you again,

    Grahame

  4. Answer
    Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 08 Jun 2017 Link to this post

    Hello Grahame,

    In this scenario, I can suggest programmatically adding the autocomplete attribute to all input elements in the Grid, when the filter menu is initialized:

    http://dojo.telerik.com/aHUKE

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit

    Currently, this approach can be used in this scenario, as for now, we do not plan to change the Grid rendering due to an Edge specific, which is well known and occurs with other inputs as well.

    I hope the suggestion to be helpful.

    Regards,
    Stefan
    Progress Telerik
    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.
  5. Grahame
    Grahame avatar
    10 posts
    Member since:
    Feb 2013

    Posted 12 Jun 2017 Link to this post

    Thank you for introducing me to the "filterMenuInit Event", because of this and your working code we have a solution.

    I am using Razor so the syntax looks a bit different (but this is nearly the exact code you posted).

    Table (in cshtml Razor):

    @(Html.Kendo()
            .Grid(Model.PersonnelList)
            .Name("Personnel")
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.PersonnelID))
                    .Read(read => read.Action("PersonnelGrid_Read", "Personnel")))
            .Columns(columns => {
                columns.Bound(p => p.PersonnelID).ClientTemplate("<div style='white-space:nowrap'>" + removed + "</div>").Width(canDelete ? 80 : 40).Title("").Sortable(false).Filterable(false);
                columns.Bound(p => p.EmployeeCode).Width(150).Title("Code");
                columns.Bound(p => p.DisplayName).Title("Name");
                columns.Bound(p => p.Employer).Width(200).Title("Employer");
                columns.Bound(p => p.IsUser).Title("User").ClientTemplate("<input id = 'IsUserCb' type='checkbox' name='IsUserCb'  class='k-checkbox ' #= IsUser? 'checked' : '' # disabled /><label class='k-checkbox-label' for='IsUserCb'></label>").HtmlAttributes(new { style = "text-align:center" }).Width(80).MinScreenWidth(900);
                columns.Bound(p => p.IsSalary).Title("Salary").ClientTemplate("<input id = 'IsSalaryCb' type='checkbox' name='IsSalaryCb'  class='k-checkbox ' #= IsSalary? 'checked' : '' # disabled /><label class='k-checkbox-label' for='IsSalaryCb'></label>").HtmlAttributes(new { style = "text-align:center" }).Width(90).MinScreenWidth(1000);
                columns.Bound(p => p.TerminatedDate).Title("Terminated").Width(120).Format("{0:MM/dd/yyyy}").MinScreenWidth(1500);
                columns.Bound(p => p.CreatedDate).Title("Created").Width(100).Format("{0:MM/dd/yyyy}").MinScreenWidth(1600);
                columns.Bound(p => p.CreatorName).Title("Created By").MinScreenWidth(1700);
            })
            .Filterable(filterable => filterable
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                    .Contains(ErrorResources.FilterContains)
                    .StartsWith(ErrorResources.FilterStartsWith)
                    .EndsWith(ErrorResources.FilterEndsWith)
                    .IsEqualTo(ErrorResources.FilterEqual)
                    .IsNotEqualTo(ErrorResources.FilterNotEqual))))
            .Sortable()
            .Events(e => e.FilterMenuInit("removeAutoCompleate"))
            .Pageable(config => {
                config.PageSizes(true);
            })
    )

     

    Function (in javascript):

    <script type="text/javascript">
    function removeAutoCompleate(e) {
        $("input").each(function (index) {
            $(this).attr('autocomplete', "off")
        });
    }
    </script>

     

    A global solution would have been nice as we use grids all over the place, however I am happy that we do have a viable solution anyways.

    Thanks again Stefan!

    Gram

Back to Top