Kendo UI in ASP.NET MVC – Part 1

What is Kendo UI?

It is an open source UI framework and application development tool that can be integrated with Visual Studio and is a better and enhanced way of developing web application.

How To Set Up the Environment and Requirements?

To get started, follow the instruction here.
Note: Visual Studio Express editions are not supported.

Let's Create a New Application

After installing the Telerik Kendo UI extension successfully, open Visual Studio and follow the given steps:

Create a new project

Select the hi-lighted project template and press ok.

This will add a new project.

We are done with the set up and we have created a new Telerik ASP.NET MVC project. Let's have a demo by adding some Kendo UI widget to ensure it works fine.

Open the Index.cshtml and clear the default added code. Add:

@{
    ViewBag.Title = "Home Page";
}

<div>
    Date:
    @(Html.Kendo().DatePicker().Name("date")
          .Format("yyyy/MM/dd")
          .Min(DateTime.Now)
          .Max(new DateTime(2015, 12, 31))
    )
</div>
<br />
<div>
    Player:
    @(Html.Kendo().ComboBox().Name("combo")
    .Filter("contains")
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(new List<SelectListItem>()
    {
        new SelectListItem()
        {
            Text = "Leo Messi", Value = "101"
        },
        new SelectListItem()
        {
            Text = "Xavi", Value = "102"
        },
        new SelectListItem()
        {
            Text = "Sachin Tendulkar", Value = "101"
        },
        new SelectListItem()
        {
            Text = "M S Dhoni", Value = "101"
        }
    })
    .SelectedIndex(0)
    )
</div>

By running the application, we will get the output:

Note: While adding a widget, always define the .Name property of widget. Else, we will end up getting the following error:

In my next post, I will describe use of individual widgets with customized properties and how we can add widgets from both Client side and Server side.

CodeProject