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

Grid Column Menu not working in IE 11

5 Answers 169 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 21 Nov 2017, 03:43 PM

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?

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 23 Nov 2017, 09:36 AM
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.
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 Nov 2017, 09:47 AM

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>
0
Stefan
Telerik team
answered on 24 Nov 2017, 09:28 AM
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.
0
Accepted
Greg
Top achievements
Rank 1
answered on 15 Dec 2017, 08:29 PM

If you are still having this issue try updating your jquery version. I had this same problem using jquery version 1.10 I updated jquery to 1.12.4 and that solved the problem for me.

Hope this helps.

0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 18 Dec 2017, 08:12 AM
Thanks, That worked.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Stefan
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Greg
Top achievements
Rank 1
Share this question
or