MVC CURD OPERATIONS WITH KENDO GRID

First Go to Master Page.

And add the following line of Code. Now when I click on Employee the Details should be displayed to me.

Now I need to create an Employee Controller. Before That I would like to

1 Create a Folder with View Models.

 2 create a class with name “EmployeeViewModel” to add gets and sets properties.

Go to EmployeeViewModel.cs and write the following lines of Code.

public class EmployeeViewModel

    {

public int Employeeno { get; set; }

       public string EmployeeName { get; set; }

       public string EmployeeAddress { get; set;}       

public List<EmployeeViewModel> lstEmployees { get; set; }

     }

Add the Reference of Kendo

And then go to Web.Config  and add namespace for Kendo ( in both the web.config files)

1 which is inside View Folder

2 which is outside

 <add namespace="Kendo.Mvc.UI" />

To Apply Styles

Go to Content Folder, all the styles related to Kendo need to be paste here.

All the scripts files related to Kendo need to be in Scripts Folder

Then go to master page (layout.cs.html) under View Folder and add the following styles and js files related to Kendo.

@Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

    <link href="@Url.Content("~/Content/Kendo/kendo.common.min.css")" rel="stylesheet"/>

    <link href="@Url.Content("~/Content/Kendo/kendo.default.min.css")" rel="stylesheet"/>

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/Kendo/jquery.min.js")" type="text/javascript"></script>

  

    <script src="@Url.Content("~/Scripts/Kendo/kendo.all.min.js")" type="text/javascript"></script>

    <scriptsrc="@Url.Content("~/Scripts/Kendo/kendo.aspnetmvc.min.js")" type="text/javascript"></script>

And comment the following lines of code below in master page.

    @*    @Scripts.Render("~/bundles/jquery")

        @RenderSection("scripts", required: false)*@

Then go to Model and Create a model with a name Employee.cs

Add-> new item

And write  the following line of code in Employee.cs as below

Then go to controller folder , and select

And Click On Add button.

Write the following Methods in Employee Controller as follows:

So go to Controller and Right click on Selected Method Name i.e. (EmployeeGrid)

And select Add view

And write  the following code in View

Run the application and see the output.

Now I want to display the Edit Details in Pop up.

So change the following line of code as

 And see the output

And click on Edit Button or Add New Record Button.

If you want to hide any column,  then go to EmployeeViewModel and write the property as

[HiddenInput(DisplayValue = false)]