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

When add Menu Scrollable package, drop down list isn't

12 Answers 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Iron
Iron
Mike asked on 07 Apr 2021, 07:52 PM

Hi All,

 

When I want to add Scrollable menu, I meet this issue, Please Help me!

The item need to add: ASP.NET MVC Menu Scrollable Demo | Telerik UI for ASP.NET MVC

I just create an new project (Kendo UI MVC5 Application) and I want to a scrollable navigation menu.

After I copy and paste the code from menu demo, the menu is show up but it isn't scrollable.

I screenshot the issue(when mouse move to "Men", nothing show up)

I put these code in index.cshtml which is under Home folder

    <div class="k-content">
    <h4>Horizontal</h4>

    @(Html.Kendo().Menu()
            .Name("horizontalMenu")
            .Scrollable(true)
            .Items(items =>
            {
                items.Add()
                    .Text("Mens")
                    .Items(children =>
                    {
                        children.Add().Text("Jackets and Coats");
                        children.Add().Text("Jeans");
                        children.Add().Text("Knitwear");
                        children.Add().Text("Shirts");
                        children.Add().Text("Belts");
                        children.Add().Text("Socks");
                        children.Add().Text("Fan Zone");
                    });

                items.Add()
                    .Text("Ladies")
                    .Items(children =>
                    {
                        children.Add().Text("Jackets and Coats");
                        children.Add().Text("Jeans");
                        children.Add().Text("Knitwear");
                        children.Add().Text("Shirts");
                        children.Add().Text("Belts");
                        children.Add().Text("Socks");
                        children.Add().Text("Fan Zone");
                    });

                items.Add()
                    .Text("Kids")
                    .Items(children =>
                    {
                        children.Add().Text("Jackets and Coats");
                        children.Add().Text("Jeans");
                        children.Add().Text("Knitwear");
                        children.Add().Text("Shirts");
                        children.Add().Text("Belts");
                        children.Add().Text("Socks");
                        children.Add().Text("Fan Zone");
                    });

                items.Add()
                    .Text("Sports");
                items.Add()
                    .Text("Brands");
                items.Add()
                    .Text("Accessories");
                items.Add()
                    .Text("Promotions");
                items.Add()
                    .Text("Contacts");
                items.Add()
                    .Text("About us");
            })
          )

</div>
<style>
    .k-menu-scroll-wrapper.horizontal li.k-item.k-last {
        border-right-width: 0;
    }
</style>

 

And I didn't change anything in HomeController.cs:

   using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Work_Time_Record.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }
    }
}

Is there any issue about controller? I'm new in ASP.Net MVC, Please let me know if need more information!

 

Thanks a lot,

Mike

12 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 12 Apr 2021, 11:26 AM

Hi Mike,

Attached to my reply, you will find a runnable example that uses the code you shared. What I changed in the code is to add width to the container that holds the menu, so that the Menu scrolls will automatically appear. You will see that everything is working correctly in the example. Check it and let me know if you can replicate the reported issue in the attached project. 

If the provided example doesn't help you resolve the issue in your application, please edit it in a way the issue that you have can be replicated. Send me the edited project back. I will test the issue locally and try to identify what is triggerign the issue on your end.

Looking forward to your reply.  

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 12 Apr 2021, 11:56 PM
Hi Petar,

Thank you for the reply,
I add the width to the menu container, but the issue is still there.
The differ is in the _Layout.cshtml. The way we import Kendo content is different.
My code:
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - Work Time Record System</title>
    <link href="@Url.Content("~/Content/kendo/2021.1.224/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2021.1.224/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2021.1.224/angular.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2021.1.224/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2021.1.224/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>

I cannot attach the project, because I have imported Kendo.MVC5 Nuget package into it. After I zipped the folder, it still too big.
The way I create this project is Open VS2019 >>> choose "Kendo UI ASP.NET MVC5 Application" >>> choose "Grid and menu"
I attach my _Layout.cshtml (path: my_project\Views\Shared) and index.cshtml (path: my_project\Views\Home) below

Regards,
Mike
0
Petar
Telerik team
answered on 15 Apr 2021, 02:43 PM

Hi Mike,

Based on the provided _Layout and Index page, I can't say why the Menu is not working as expected on your end. 

What you can do is send me your project without the NuGet packages. I will restore them on my end and test your example. Once I can locally replicate the issue, I will investigate what is happening and will be able to provide more relevant feedback. 

Another option is to upload your project to a cloud and send us a link.

If you don't want to publicly share your project, you can also submit a support ticket and send your project inside it. With the support ticket, you will also get a 24 hours response time.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 19 Apr 2021, 07:51 PM

Hi Petar,

 

I decide to recreate an new Kendo UI MVC project with Grid and Menu. And I meet another issue, the @Html.Kendo().<control> cannot be recognised

I have add "<pages> <namespaces> <add namespace="Kendo.Mvc.UI" /> </namespaces> </pages>" into web.config

And also add "<add namespace="Kendo.Mvc.UI" />" into the other web.config under Views folder.

 

My project is in this link:

https://drive.google.com/drive/folders/1a2VUn6ue_ehiEEjyyOEWPqcGrXU8BNX6?usp=sharing

 

Thanks,

Mike

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 19 Apr 2021, 07:53 PM

And I also attach my original project in this link

https://drive.google.com/drive/folders/1Daetvwa_ilNRFBjqo9W5oVWwm7YGgkFy?usp=sharing

0
Petar
Telerik team
answered on 20 Apr 2021, 10:03 AM

Hi Mike,

Thank you for the provided project. I've checked it and two things were missing in your example:

  • The Kendo.Mvc.dll file was missing and not referenced in your project. 
  • THe kendo.aspnetmvc.min.js file was not referenced in the _Layout file. 

Attached to my reply, you will find the version of your project that has a Trial Kendo.Mvc.dll file in it and the _Layout file has the following definition:

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.aspnetmvc.min.js"></script>

Check the attached project and let me know if you have any questions about it. 

Regards,
Petar
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 21 Apr 2021, 04:52 PM

Hi Petar,

 

Thanks for the reply,

I download the attachment and the issue is still there.

I Attached the screenshot which shows 4 error message and 1 warning

 

Regards,

Mike

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 21 Apr 2021, 04:54 PM
Also the Kendo.Mvc under the reference looks like that
0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 21 Apr 2021, 05:48 PM

I check the previous project which @Html.Kendo is working. The reference of Kendo.Mvc is point to Project Work_Time_Record. 

 

But the new project the reference of Kendo.Mvc is point to " C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2\Kendo.Mvc.dll"

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 21 Apr 2021, 11:42 PM

Hi Petar,

 

I solve the issue. I will write down the steps for future review or anyone with same issue can find help.

1) After create Kendo UI MVC project,

add "<pages> <namespaces> <add namespace="Kendo.Mvc.UI" /> </namespaces> </pages>" into web.config
And also add "<add namespace="Kendo.Mvc.UI" />" into the other web.config under Views folder.

2) In _Layout.cshtml(Views\Shared)

put "kendo.all.min.js" and "kendo.aspnetmvc.min.js" script above "bootstrap.min.js"

3) After doing these two steps, if @Html.Kendo Still cannot be found in HtmlHelper, Check "Kendo.Mvc" in References

If there is an exclamation mark , there is two place you need to check

* Under Folder (C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2) Do you have Kendo.Mvc.dll

* in VS2019, Tools --> Nuget Package Manager --> Manager Nuget Package for Solution,

Is Telerik MVC package be installed.

 

Thanks for all the help, Petar, you really help me a lot!

Mike

 

0
Petar
Telerik team
answered on 22 Apr 2021, 05:44 AM

Hi Mike,

I am happy to hear that you've managed to resolve the issue! Thank you for sharing the steps that you did.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Mike
Top achievements
Rank 1
Iron
Iron
answered on 28 Apr 2021, 04:48 PM

Hi Petar,

 

I want to add a grid into my project.

Link: ASP.NET MVC Grid Batch editing Demo | Telerik UI for ASP.NET MVC

But I check my reference which is missing Kendo.Mvc.Examples.

In the demo project (location: C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC R1 2021\wrappers\aspnetmvc\Examples\MVC5\Kendo.Mvc.Examples), Kendo.Mvc.Examples is in the reference (under Kendo.Mvc).

Could you tell me how to add this reference into my project? Or is there any other document can help me develop the Grid.

 

Thanks,

Mike

Aleksandar
Telerik team
commented on 03 May 2021, 11:31 AM

Hello Mike,

Kendo.Mvc.Examples is the name of the sample application distributed with the Telerik UI for ASP.NET MVC, that contains the demos available here. You can find further details on the sample application here:

https://docs.telerik.com/aspnet-mvc/getting-started/installation/overview#sample-application 

For example, the Grid from the above link is referencing to a Model defined in the Kendo.Mvc.Examples application:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()    
    .Name("Grid")    
     ....
 )

 

I also noticed you have the same question posted in this thread: https://www.telerik.com/forums/question-about-import-kendo-mvc-examples-into-my-project I ensure you that we monitor all threads and channels of communication, so there is no need to post the same question multiple times.

Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Iron
Iron
Answers by
Petar
Telerik team
Mike
Top achievements
Rank 1
Iron
Iron
Share this question
or