Grid Column Menu not working in IE 11

4 posts, 0 answers
  1. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 21 Nov Link to this post

    I'm using 2017.3.1026, and when I add a column menu to  my grid, in IE 11 (version 11.0.9600.18762CO) the menu showing the sort, filter and column options appears on a click, but the fly-out menus don't appear.

    However, loading the page in Chrome, the menus work as they should, showing the filter options, and the columns to show / hide.

    Is this a bug, or do I need to do anything to fix this in IE?

  2. Stefan
    Admin
    Stefan avatar
    1389 posts

    Posted 23 Nov Link to this post

    Hello, Andrew,

    I tested the scenario using the version 11.0.9600.18817(the closest one we have) and the additional menus are opened as expected.

    Please confirm if the fly-out menus are the filter and columns menus:





    Also, please check if the issue is reproducible in our demo: 

    http://demos.telerik.com/kendo-ui/grid/column-menu

    If the issue is reproducible in our demo, please advise the used theme, and device?

    If the issue is not reproducible in the demo, please provide an example where it can be observed.



    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 23 Nov in reply to Stefan Link to this post

    Strange. The demo works fine, however I've started two new projects and been able to reproduce the issue in both.

    I'm wondering if I need to include any other scripts into the project. Have I missed anything? Everything else works fine, and the menu works in Chrome.

    The BundleConfig.cs is

    public static void RegisterBundles(BundleCollection bundles)
          {
              bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                          "~/Scripts/jquery-{version}.js"));
     
              bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                          "~/Scripts/jquery.validate*"));
     
              // Use the development version of Modernizr to develop with and learn from. Then, when you're
              // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
              bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                          "~/Scripts/modernizr-*"));
     
              bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/respond.js"));
     
              bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/site.css"));
     
              bundles.Add(new StyleBundle("~/Content/Kendo/css")
       .Include("~/Content/Kendo/kendo.common-bootstrap.min.css")
          .Include("~/Content/Kendo/kendo.bootstrap.min.css")
       .Include("~/Content/Kendo/kendo.dataviz.min.css")
       );
     
              bundles.Add(new ScriptBundle("~/bundles/Kendo")
                .Include("~/Scripts/Kendo/kendo.all.min.js")
                .Include("~/Scripts/Kendo/kendo.aspnetmvc.min.js")
                .Include("~/Scripts/Kendo/cultures/kendo.culture.en-GB.min.js")
                );
          }

     

    The _Layout.cshtml is:-

    <!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/Kendo/css")
        @Scripts.Render("~/bundles/modernizr")
     
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/Kendo")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Daily Sit Rep Data", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                      
                    </ul>
                    <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>© @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
     
      
        @RenderSection("scripts", required: false)
     
     
        <script type="text/javascript">
                //set current to the "en-GB" culture script
                kendo.culture("en-GB");
        </script>
    </body>
    </html>
  4. Stefan
    Admin
    Stefan avatar
    1389 posts

    Posted 24 Nov Link to this post

    Hello, Andrew,

    The loaded scripts look good and none is missing from the provided code.

    I made a new MVC example and it is still working as expected.

    I attached it for reference.

    If possible, please attach one of the projects reproducing the issue, so we can locally observe the example, as there is probably a small detail which we are overlooking at this moment.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top