Asp.net Mvc Kendo Grid Read on Button Click
Introduction
To present tabular data in our Web applications, developers generally utilise HTML tables or other UI libraries. Kendo UI Grid is an piece of cake, more maintainable, and powerful control for displaying information in a tabular format. Kendo provides many options, such as paging, sorting, filtering, grouping, and editing. These features decide the fashion data is presented and manipulated. Telerik Kendo UI® Core is the open source framework and version of Kendo UI. It'southward a comprehensive framework for building modern Spider web and mobile apps with HTML5 and JavaScript. In this commodity, I will demonstrate the basic usage of the Kendo UI Grid control, which is used to piece of work with tabular data.
Sample ASP.Cyberspace MVC Awarding
Create a new empty ASP.NET MVC Application, as demonstrated in Figure 1.
To create a new application, Open up Visual Studio ->File menu ->New project ->ASP.NET Web Application.
Figure 1: New ASP.Internet MVC Application
Select the MVC template and click 'OK'. Refer to Figure ii.
Figure 2: Select MVC Template
Next, download the Kendo UI for ASP.Internet MVC version. Install the Telerik UI for ASP.NET MVC Setup 2016. Subsequently completing the installation, copy the CSS and JS files from the installed location and paste them into the project created in the previous step.
Now, open App_Start-> BundleConfig.cs to add the bundles for the Telerik UI for ASP.NET MVC.
bundles.Add(new ScriptBundle("~/Kendo").Include ("~/Kendo/js/kendo.all.min.js", "~/Kendo/js/kendo.aspnetmvc.min.js")); Next, add together a script bundle for the Telerik UI for ASP.NET MVC.
bundles.Add(new StyleBundle("~/Kendo/styles").Include ("~/Kendo/styles/kendo.common.min.css", "~/Kendo/styles/kendo.default.min.css")); To allow minified files in Debug mode, add the following code.
bundles.IgnoreList.Clear();
The following code snippet demonstrates the bundle class.
using System.Spider web; using System.Web.Optimization; namespace PrjKendoSample { public form BundleConfig { // For more than 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/jqueryval") .Include("~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr") .Include("~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap") .Include("~/Scripts/bootstrap.js", "~/Scripts/reply.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); bundles.Add(new ScriptBundle("~/Kendo") .Include("~/Kendo/js/kendo.all.min.js", "~/Kendo/js/kendo.aspnetmvc.min.js")); bundles.Add(new StyleBundle("~/Kendo/styles") .Include("~/Kendo/styles/kendo.common.min.css", "~/Kendo/styles/kendo.default.min.css")); bundles.IgnoreList.Articulate(); } } } Next, open the layout Application. By default, information technology is Views/Shared/_Layout.cshtml, and add the following lines of code.
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/Kendo") @Styles.Render("~/Kendo/styles")
The following code snippet demonstrates the _Layout.cshtml file.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-calibration=1.0"> <title>@ViewBag.Title - My ASP.Internet Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/Kendo") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/Kendo") </head> <body> <div grade="navbar navbar-inverse navbar-stock-still-acme"> <div grade="container"> <div class="navbar-header"> <button type="push button" class="navbar-toggle" information-toggle="collapse" data-target=".navbar-plummet"> <span form="icon-bar"></bridge> <span class="icon-bar"></span> <bridge class="icon-bar"></span> </push button> @Html.ActionLink("Application name", "Index", "Dwelling", new { area = "" }, new { @class = "navbar-make" }) </div> <div class="navbar-plummet plummet"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Alphabetize", "Home")</li> <li>@Html.ActionLink("About", "Most", "Habitation")</li> <li>@Html.ActionLink("Contact", "Contact", "Dwelling")</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </div> <div class="container torso-content"> @RenderBody() <60 minutes /> <footer> <p>© @DateTime.Now.Year - My ASP.Net Application</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: imitation) @Styles.Return("~/Kendo/styles") </torso> </html>
Next, to add the kendo.Mvc.dll reference, right-click References in Solution Explorer. Click Add Reference by selecting the Scan tab of the Add together Reference dialog. You have to navigate to the install location of the Telerik UI for ASP.Net MVC. Navigate to wrappers/aspnetmvc/Binaries/MVC5. This folder contains the ASP.Internet MVC 5 version of the Telerik UI for ASP.Net MVC. Select Kendo.Mvc.dll. Click OK.
Next, open the spider web.config file and add the Kendo UI namespace. Refer to the post-obit code snippet of the namespace section of the Web.config file.
<namespaces> <add namespace="Organisation.Web.Mvc" /> <add together namespace="Organisation.Web.Mvc.Ajax" /> <add namespace="System.Spider web.Mvc.Html" /> <add namespace="System.Spider web.Optimization"/> <add together namespace="System.Web.Routing" /> <add namespace="PrjKendoSample" /> <add namespace="Kendo.Mvc.UI" /> </namespaces>
Next, I take created a new model grade named Student.cs. Refer to the following code snippet of the Student class.
using System; using System.Collections.Generic; using System.Linq; using System.Spider web; namespace PrjKendoSample.Models { public class Student { public Student(int StudentID, cord StudentFirstName, cord StudentLastName, string StudentClass, int RollNumber) { this.StudentID = StudentID; this.StudentFirstName = StudentFirstName; this.StudentLastName = StudentLastName; this.StudentClass = StudentClass; this.RollNumber = RollNumber; } public int StudentID { go; set up; } public cord StudentFirstName { go; set; } public string StudentLastName { get; ready; } public string StudentClass { get; set; } public int RollNumber { get; set; } } } I've added a Student controller and added the following Activeness Method in information technology.
using Arrangement; using System.Collections.Generic; using System.Linq; using System.Spider web; using System.Spider web.Mvc; namespace PrjKendoSample.Controllers { public course StudentController : Controller { public ActionResult Alphabetize() { render View(); } public ActionResult StudentList([DataSourceRequest] DataSourceRequest asking) { endeavour { Listing<Educatee> _stu = new List<Pupil>(); _stu.Add(new Student(1, "Ram", "Kumar","Five", 1)); _stu.Add together(new Student(2, "Sham", "Kumar", "Five", two)); _stu.Add(new Student(three, "Jadu", "Kumar", "Five", 3)); DataSourceResult result = _stu.ToDataSourceResult(asking); return Json(issue, JsonRequestBehavior.AllowGet); } catch (Exception ex) { return Json(ex.Bulletin, JsonRequestBehavior.AllowGet); } } } } Finally, I accept created a New empty index view with the default layout under the educatee folder and added the post-obit code in information technology.
<div course="container"> <div class="row"> @(Html.Kendo().Grid<KendoStart.Models.Student>() .Proper name("StuGrid") .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Activeness("StudentList", "Pupil")) ) ) </div> </div> Now, browse the Application to see the grid with data.
Conclusion
That was all about Kendo with ASP.NET MVC application. I hope this article was helpful!! That's all for today; happy reading!
Source: https://www.codeguru.com/dotnet/working-with-the-kendo-ui-grid-with-asp-net-mvc/
0 Response to "Asp.net Mvc Kendo Grid Read on Button Click"
Post a Comment