What is Kendo UI?
Kendo UI
It is a JavaScript framework for building modern interactive Web Applications. Kendo is used to develop an interactive website; i.e., look and feel of the Application and the content, various types like HTML, CSS , script and jQuery, so that the developer can achieve the development in minimum time. Usually, it is used for the client side technologies.

Step 1: First, we have to download the Telerik Control setup from here.

Step 2: Now, create a simple project from your Visual Studio 2013, as given below:

create

Now, our solution which will contain Kendo CSS, scripts etc. files as:

solution

_Layout.cshtml contains Kendo CSS and the script files, given below:

  1. <link href="@Url.Content(" ~/Content/kendo/2016.2.504/kendo.common-material.min.css ")" rel="stylesheet" type="text/css" />
  2. <link href="@Url.Content(" ~/Content/kendo/2016.2.504/kendo.mobile.all.min.css ")" rel="stylesheet" type="text/css" />
  3. <link href="@Url.Content(" ~/Content/kendo/2016.2.504/kendo.dataviz.min.css ")" rel="stylesheet" type="text/css" />
  4. <link href="@Url.Content(" ~/Content/kendo/2016.2.504/kendo.material.min.css ")" rel="stylesheet" type="text/css" />
  5. <link href="@Url.Content(" ~/Content/kendo/2016.2.504/kendo.dataviz.material.min.css ")" rel="stylesheet" type="text/css" />
  6. <script src="@Url.Content(" ~/Scripts/kendo/2016.2.504/jquery.min.js ")"></script>
  7. <script src="@Url.Content(" ~/Scripts/kendo/2016.2.504/angular.min.js ")"></script>
  8. <script src="@Url.Content(" ~/Scripts/kendo/2016.2.504/jszip.min.js ")"></script>
  9. <script src="@Url.Content(" ~/Scripts/kendo/2016.2.504/kendo.all.min.js ")"></script>
Step 2: Now, create a controller with the simple Action method as:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. namespace KendoUIApp2.Controllers
  7. {
  8. public class HomeController: Controller {
  9. public ActionResult Test() {
  10. return View();
  11. }
  12. }
  13. }
Step 3: Now, create a view for the action, given above. In our view, I am going to declare one div, one button and JavaScript code, which will open Modal pop with some dummy text as:
  1. @ {
  2. ViewBag.Title = "Test";
  3. Layout = "~/Views/Shared/_Layout.cshtml";
  4. } < div id = "myPopUp"
  5. style = "background-color:lightblue;" > < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. < br / > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. < /p> < /div> < button onclick = "myFunction()"
  6. style = "margin-left:20%" > Click Here To Open Pop Up < /button> < script > function myFunction() {
  7. var objWin = $("#myPopUp"),
  8. undo = $("#undo");
  9. undo.click(function() {
  10. objWin.data("kendoWindow").open();
  11. undo.fadeOut();
  12. });
  14. function onClose() {
  15. undo.fadeIn();
  16. }
  17. objWin.kendoWindow({
  18. width: "600px",
  19. height: "300px",
  20. visible: false,
  21. close: onClose
  22. }).data("kendoWindow").center().open();
  23. } < /script>
Step 4: Now, run the Application. After clicking the button, our view will be:

application
After clicking the button, it will show modal pop up as:

button
Summary: This article helps the freshers to understand the basics of Kendo UI and its use.