DATA BINDING THROUGH KENDO GRID USING MVC JQuery

• This post will teach us about the extremely powerful Kendo Grid from Telerik, which offers a wealth of built-in functionality with minimal code. jQuery is used to incorporate the kendo grid. we will learn today  Kendo grid bind using ASP.NET MVC  and JQuery.
• Prerequisites
  Using any text editor, a web service, or a web API
  I used Telerik’s web service, which is both generated and hosted, for this demonstration. This web service’s source code is available for public scrutiny on GitHub.
• Note
  The version Kendo Grid is authorised.
• Let’s Bind data.At first Create new MVC project.
• At first open visual studio
• Click on File menu Select New project.
• Select ASP.NET Web Application and click OK.
• Select MVC and click OK.
• Right-click on Controllers folder  and  Add the Controller.
• Give name of controller as HomeController.
• Create UserModel from Models folder
  Right-click on Models folder, click Add-> Class.
  paste the below code in it.

public class UserModel 
{  public string name{ get; set; }

   public string email { get; set; }

   public string phone{ get; set; }
  
}

• Add the following code in HomeController.

  using System;
  using System.Collections.Generic;
  using System.Globalization;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using WebApplication2.Models;
  
  namespace WebApplication2.Controllers
  {
      public class HomeController : Controller
      {
          // GET: Home  
          public ActionResult Index()
          {
              return View();
          }      
          [HttpPost]
          public ActionResult Index(UserModel users)
          {
             
              Datalayer dl = new Datalayer();
              string sql = "";
              
              if (users.userid > 0)
              {
                  sql = "UPDATE UserTable SET \"name\"='" + users.name + "',\"email\"='" + users.email + "', \"phone\" ='" + users.phone 
                      + "' WHERE ID=" + users.userid + "";
              }
              else
              {
                  sql = "Insert into UserTable(\"name\",\"email\",\"phone\") values('" + users.name + "','" + users.email + "','" + users.phone + "')";
  
              }
  
  
              dl.query(sql);
              return RedirectToAction("Index");
          }
          [HttpPost]
          public JsonResult Getalluser()
          {
              Datalayer dl = new Datalayer();
              List<UserModel> userlist = dl.getusers();
              return Json(userlist);
          }
          [HttpPost]
          public JsonResult Getalluser_Sp(int pageNo,int pageSize,string sortcolumn,string sortdirection)
          {
              int recTotal=0;
              string sval=""; 
              Datalayer dl = new Datalayer();
              List<UserModel> userlist = dl.getusers_Sp(pageNo, pageSize, sortcolumn, sortdirection, sval, ref recTotal);
              return Json(new {recordsTotal = recTotal, data = userlist });
          }
          [HttpPost]
          public ActionResult delete(int userid)
          {
              Datalayer dl = new Datalayer();
  
              string sql = "delete from UserTable where ID=" + userid + "";
              dl.query(sql);
              return null;
          }

Here you may download the kendo CSS and JS files. Select the link for “Download a free trial.”

https://www.telerik.com/download/kendoui.for.jquery.2023.1.117.trial

After finished downloading, Extract the downloaded file

following folder is displayed.

kendoui.for.jquery.2023.1.117.trial

Open Above folder and find folder styles

Open style folder ,Copy all files and folder.

In solution explorer find the content folder open it and create folder and Give name kendo.

after that open kendo folder and paste all file of style folder.

open script folder and  create folder and Give name kendo.

open kendoui.for.jquery.2023.1.117.trial and find the js folder open it and copy all file and paste in  Script>>kendo

using System.Web;  
using System.Web.Optimization;  
  
namespace webApplication2  
{  
    public class BundleConfig  
    {  
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862  
        public static void RegisterBundles(BundleCollection bundles)  
        {  
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
                        "~/Scripts/jquery-{version}.js"));  
  
  
  
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(  
                      "~/Scripts/bootstrap.js",  
                      "~/Scripts/respond.js"));  
  
            bundles.Add(new StyleBundle("~/Content/css").Include(  
                      "~/Content/bootstrap.css",  
                      "~/Content/site.css"));  
  
            bundles.Add(new StyleBundle("~/kendo/css").Include(  
                "~/Content/kendo/kendo.common.min.css",  
                "~/Content/kendo/kendo.common-bootstrap.min.css",  
                "~/Content/kendo/kendo.bootstrap.min.css"  
                ));  
            bundles.Add(new ScriptBundle("~/kendo/js").Include(  
                    "~/Scripts/kendo/kendo.all.min.js"  
                ));  
        }  
    }  
}

Right-click on View/Shared -> click Add -> select New item.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Globalization;

    namespace WebApplication2.Models
    {
        public class Datalayer
        {
           SqlConnection con = new SqlConnection();
            public Datalayer()
            {
                con.ConnectionString = ConfigurationManager.ConnectionStrings["DBcon"].ConnectionString;
            }
            public void query(string sql)
            {
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = sql;
                cmd.CommandType = CommandType.Text;
                con.Open();
                cmd.Connection = con;
                cmd.ExecuteNonQuery();
                cmd.Dispose();
                con.Close();
            }
            public List<UserModel> getusers()
            {
                DataTable dt = new DataTable();
                DataSet ds = new DataSet();
                List<UserModel> userlist = new List<UserModel>();
                string sql = "select * from UserTable";
                SqlDataAdapter da = new SqlDataAdapter(sql, con);
                ds.Reset();
                da.Fill(ds);
                dt = ds.Tables[0];
                foreach (DataRow row in dt.Rows)
                {
                    UserModel user = new UserModel();                    
                    user.name = row["name"].ToString();
                    user.email = row["email"].ToString();                  
                    user.phone = row["phone"].ToString();                    
                    userlist.Add(user);
                }
                return userlist;
            }
        public List<UserModel> getusers_Sp(int pageNo,int pageSize,string sortColumn,string sortColumnDirection,string sValue,ref int recordsTotal)
        {
            DataTable dt = new DataTable();
            DataSet ds = new DataSet();
            List<UserModel> userlist = new List<UserModel>();
          
            var cmd = new SqlCommand("USP_Get_UserwithSearch", con);
            var da = new SqlDataAdapter(cmd);
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Searchval", sValue);
            cmd.Parameters.AddWithValue("@PageNo", pageNo);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            cmd.Parameters.AddWithValue("@SortColumn", sortColumn);
            cmd.Parameters.AddWithValue("@SortOrder", sortColumnDirection);
            cmd.Parameters.Add("@TotalRecord", SqlDbType.Int);
            cmd.Parameters["@TotalRecord"].Direction = ParameterDirection.Output;
            da.Fill(dt);
            recordsTotal = Convert.ToInt16(cmd.Parameters["@TotalRecord"].Value);


            foreach (DataRow row in dt.Rows)
            {
                UserModel obj = new UserModel();                
                obj.name = row["name"].ToString();
                obj.email = row["email"].ToString();
                obj.phone = row["phone"].ToString();                
                userlist.Add(obj);
            }
            return  userlist;
        }
    }
    }

Select MVC 5 layout page (Razor) and click on “Add” button.

and paste following code

Create a new Layout Page, give a name as “_layout.chtml” and write the following code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

After that you run this code you will get Following result.

Thus, we can Bind KendoGrid using MVC and JQuery.