I have seen the developers struggling to work with the KendoUI Web in an ASP.NET MVC application. In this post I will show you three steps required to get working with the KendoUI Web in the ASP.NET MVC application. At the end of the post we will take a look on working with the autocomplete widget.

Let us follow the steps as given below:

Step 1: Add Reference

Add the reference of KendoUI Web the project using Package Manager Console. After successful addition, you should find reference added in the Content folder and the Scripts folder.

image

Step 2: Bundle the required files

Open BundleConfig.cs file. In this file add two entries, one for the KendoUI Web scripts and other for Kendo UI Web CSS.

Add the script entry as follows:


bundles.Add(new ScriptBundle("~/bundles/kendoui").Include(
                 "~/Scripts/kendo/2014.1.318/kendo.web.min.js"
                ));


Next add the CSS files for KendoUI widgets. CSS for all the widgets can be bundled as follows:


    bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
            "~/Content/kendo/2014.1.318/kendo.common-bootstrap.min.css",
            "~/Content/kendo/2014.1.318/kendo.bootstrap.min.css"));


Step 3: Refer the Bundles

Once bundle for the Kendo UI Web has been created, you need to add them on the layout file. That can be added as follows:


    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/kendoui")


By default you will find the jQuery bundle at the end of the layout file. To work with Keno UI widgets, you should move the jQuery bundle at the top of the file and as well include the bundles of KendoUI CSS and Scripts.

These are the three steps you should follow to work with KendoUI in an ASP.NET MVC 5 application.

Use KendoUI Web Widgets

Now let us see the autocomplete widget in the action. I have created controller returning JSON data as follows:


        public ActionResult Index()
        {
          
           return View();
        }

        public ActionResult GetMP()
        {
            var result = from r in _db.GetMPDetails()                      
                         select r;            
            return Json(result, JsonRequestBehavior.AllowGet);
        }


We will bind returned JSON from the GetMP() action to the autocomplete widget. On the razor view you can create autocomplete as follows:

<input id="mp" />

<script type="text/javascript">
    $(document).ready(function () {
       
        //create AutoComplete UI component
        $("#mp").kendoAutoComplete({
            dataTextField: "Name",
            filter: "startswith",
            minLength: 3,
            dataSource: {
                
                transport: {
                    read: "/Mpsearch/GetMP",
                    type:"json"
                }
            }
        });

    })
</script>

Make sure the View is using the layout file in which you added reference of the bundles.

Summary

As we seen in this post that working with Kendo UI Web widgets are as simple as following above three steps:

  1. Add reference of Kendo UI Web
  2. Create the bundles
  3. Add bundles reference in layout page

I hope this post is useful. Happy coding.

Advertisements

4 thoughts on “Three simple steps to use Kendo UI Web in ASP.NET MVC 5

  1. We started our current app with Telerik MVC and switched to Kendo day 1 after it came out. My advice is to NOT use the MVC wrappers. They inject a bunch of javascript into your page and you will have less control over things. It’s best just to do everything in straight javascript and pretend like the MVC wrapper classes do not exist. Trust me.

  2. i did the same step…then
    i got one error in css file of kenoUI……removing extra ‘#’ reslove it….

    thnx dear….
    nice article,,,,thnx so much

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s