Introduction To Kendo UI And Open Modal Popup Using Kenod UI MVC 5

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.     });  
  13.   
  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.


Similar Articles