کار با Telerik Grid در MVC

Telerik یک شرکت بلغارستانی است که نرم افزارهایی برای وب ، موبایل و دسکتاپ را توسعه می دهد . در این مقاله ، نحوه کار با Telerik Grid را خواهید آموخت .

کار با Telerik Grid در MVC

برای استفاده از Telerik UI ، یک پروژه جدید MVC ایجاد میکنیم . به Solution نگاه کنید . 


ما یک entity data model برای اتصال به پایگاه داده ، همانند زیر اضافه کردیم :

در اینجا Connection String و Context را می بینید . 



جدول پایگاه داده را در پنجره ORM می بینید . 




به ساختار و داده های جدول احتیاج دارید ، که در زیر آن را می بینید . 

USE [CodeX]  
GO  
/****** Object:  Table [dbo].[tbl_employee]    Script Date: 23/07/2016 1:29:43 AM ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
CREATE TABLE [dbo].[tbl_employee](  
    [id] [int] NOT NULL,  
    [firstName] [nvarchar](50) NULL,  
    [LastName] [nvarchar](50) NULL,  
    [EmployeeId] [int] NULL,  
    [Email] [nvarchar](50) NULL,  
    [MobileNo] [nvarchar](10) NULL,  
    [State] [nvarchar](30) NULL,  
    [Country] [nvarchar](50) NULL,  
 CONSTRAINT [PK_tbl_employee] PRIMARY KEY CLUSTERED   
(  
    [id] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY]  
  
GO  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (1, N'Debendra', N'Dash', 10090, N'debendra@gmail.com', N'8123371257', N'Odisha', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (2, N'Sridhar', N'Dash', 10090, N'sridhar1991@gmail.com', N'808900099', N'karnataka', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (11, N'Manas', N'sing', 56, N'manas@gmail.com', N'8090705545', N'UP', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (40, N'Tushar', N'Jena', 78, N'Tusar@gmail.com', N'676789990', N'MP', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (67, N'Rubi', N'singh', 90, N'Rubi32@gmail.com', N'8018070999', N'Ap', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (99, N'Sujit', N'Tiwari', 80, N'sujit@gmail.com', N'7894290976', N'UP', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (120, N'Kabita', N'Kumari', 129, N'kabita@yahoo.com', N'7894290765', N'MP', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (123, N'Dinesh', N'Kumar', 234, N'Dinesh123@gmail.com', N'8012345678', N'Bihar', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (150, N'Sachin', N'Tendulkar', 2345, N'sachin@gmail.com', N'8909900008', N'Assam', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (190, N'Sourav', N'Ganguli', 234, N'sourav@gmail.com', N'7894270987', N'WB', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (191, N'Pankaj', N'sahu', 188, N'pankaj.sahu@gmail.com', N'7894270987', N'WB', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (192, N'Kisan', N'agrawal', 177, N'contact@gmail.com', N'7894270989', N'AP', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (193, N'Ravi', N'kumar', 199, N'Ravi@gmail.com', N'7894270989', N'ODISHA', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (194, N'Kumar', N'dora', 100, N'doea@gmail.com', N'3494270987', N'JHARKHAND', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (195, N'Prakash', N'jha', 30, N'jha12345@yahoo.com', N'7894270987', N'BIHAR', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (196, N'Jeetu', N'nayak', 34, N'jeetu@yahoo.com', N'7894270987', N'PUNJAB', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (197, N'Rani', N'sahu', 35, N'Rani@gmail.com', N'7894270987', N'GOA', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (198, N'Bharat', N'das', 67, N'bharat234@gmail.com', N'7894279900', N'GOA', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (199, N'OM', N'prakash', 68, N'OM@gmail.com', N'8090907090', N'AP', N'India')  
INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (200, N'Sujata', N'sahu', 29, N'sahu23@gmail.com', N'709087690', N'KARNATAKA', N'India')  
Now, after connecting with the database, I will go to NuGet Package Manager and download the following "TelerikMvcExtensions" dll in my project.

 

It will add the following dll and scripts into my project, as follow.



Now, I will add an Employee model, as shown below.
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
  
namespace Tellerik_grid.Models  
{  
    public class employee  
    {  
        public int Id { get; set; }  
        public string FirstName { get; set; }  
        public string LastName { get; set; }  
        public string Email { get; set; }  
        public int EmployeeId { get; set; }  
        public string MobileNo { get; set; }  
  
        public string State { get; set; }  
        public string Country { get; set; }  
         
         
    }  
}   
Now, I will go to Home Controller and add an action method in it.
public class HomeController : Controller  
{  
    public ActionResult Index()  
    {  
        return View();  
    }  
    public ActionResult GetData()  
    {  
        List<employee> li = new List<employee>();  
        CodeXEntities CX = new CodeXEntities();  
        var det = CX.tbl_employee;  
        foreach(var x in det)  
        {  
            employee emp = new employee();  
            emp.Id = x.id;  
            emp.FirstName = x.firstName;  
            emp.LastName = x.LastName;  
            emp.MobileNo = x.MobileNo;  
            emp.State = x.State;  
            emp.Country = x.Country;  
            emp.Email = x.Email;  
            emp.EmployeeId =Convert.ToInt32(x.EmployeeId);  
            li.Add(emp);  
  
        }  
              
        return View(li);  
  
    }  
This action method simply retrieves the data from my table and returns to the View. Now, this is how I will add a GetData View here.

 
 
Now, here is my View where I have bound the controller data in Telerik Grid.
@model IEnumerable<Tellerik_grid.Models.employee>  
@using Telerik.Web.Mvc.UI;  
  
@{  
    ViewBag.Title = "GetData";  
}  
  
</br>  
<div>  
    @{  
  
        Html.Telerik().Grid(Model)  
            .Name("Grid")  
             .DataKeys(keys => keys.Add(c => c.Id))  
            .Footer(true)  
            .Sortable()  
            .Filterable()  
  
            .Scrollable(scr => scr.Height(330))  
              
            .Columns(x =>  
            {  
                x.Bound(m => m.Id).Width(120).HeaderTemplate("UserId").Title("User ID").Groupable(false);  
                x.Bound(m => m.FirstName).Width(120).Groupable(false).Filterable(true).Groupable(true);  
                x.Bound(m => m.LastName).Width(120).Groupable(true).Filterable(true).Groupable(true);  
                x.Bound(m => m.MobileNo).Width(120).HeaderTemplate("UserId").Filterable(true);  
                x.Bound(m => m.Email).Width(120).Groupable(false).Filterable(true);  
                x.Bound(m => m.State).Width(120).Groupable(true).Filterable(true);  
                x.Bound(m => m.Country).Width(120).Groupable(false).Filterable(true);  
            })  
  
          .Pageable(x => x.PageSize(10))  
  
            .Render();  
  
    @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true)))  
    @(Html.Telerik().ScriptRegistrar())  
    }  
  
</div>  
Now, save the project and run it.This will give the following output.



As we have defined filterable, it will filter the data, as shown below:


Now, if you want to filter, it will filter it.


NOTE: The Telerik Grid contains various properties, like - 
HeaderTemplate: This is the string which will appear in the header of the Grid.
Name: We can say it's the Id of the Telerik Grid.
Footer: This is a boolean property. True indicates that we need a footer.
Filterable: By using this property, the filter option in the Grid is enabled.
Pageable: Used for enabling the paging where you have to give the page size.
Defining CSS for the Telerik Grid
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true)))
@(Html.Telerik().ScriptRegistrar()) 
We have various CSS files included in our project. You can attach any CSS file of your choice to the Telerik Grid. This will give a different look and feel to the View. Hope you liked this article. If you have any doubt, you can comment, and I will try to help you.
AngularJS JumpStart with Dan Wahlin MVC Products Telerik Grid
Debendra Dash
Debendra Dash
http://www.c-sharpcorner.com/members/debendra-dash
Follow
Facebook
LinkedIn
message
126
Rank
418.6k
Read
Platinum
Member
2
Times
COMMENTS (5) 

Contact Us
Privacy Policy
Terms & Conditions
About Us
©2016 C# Corner. All contents are copyright of their authors.


حال ، بعد از ایجاد ارتباط با پایگاه داده ، به NuGet Package Manager خواهم رفت و TelerikMvcExtensions" ، dll" را دانلود و به پروژه خود اضافه میکنیم . همانند زیر:



dll و scriptهای زیر به پروژه ما اضافه میشود :




حال ، همانطور که در زیر نشان داده شده است ، یک model با نام Employee به پروژه اضافه میکنیم .

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
  
namespace Tellerik_grid.Models  
{  
    public class employee  
    {  
        public int Id { get; set; }  
        public string FirstName { get; set; }  
        public string LastName { get; set; }  
        public string Email { get; set; }  
        public int EmployeeId { get; set; }  
        public string MobileNo { get; set; }  
  
        public string State { get; set; }  
        public string Country { get; set; }  
         
         
    }  
}   

حال ، به HomeController رفته و متد Action زیر را اضافه میکنیم :

public class HomeController : Controller  
{  
    public ActionResult Index()  
    {  
        return View();  
    }  
    public ActionResult GetData()  
    {  
        List<employee> li = new List<employee>();  
        CodeXEntities CX = new CodeXEntities();  
        var det = CX.tbl_employee;  
        foreach(var x in det)  
        {  
            employee emp = new employee();  
            emp.Id = x.id;  
            emp.FirstName = x.firstName;  
            emp.LastName = x.LastName;  
            emp.MobileNo = x.MobileNo;  
            emp.State = x.State;  
            emp.Country = x.Country;  
            emp.Email = x.Email;  
            emp.EmployeeId =Convert.ToInt32(x.EmployeeId);  
            li.Add(emp);  
  
        }  
              
        return View(li);  
  
    }  

این action method از جداول ،داده را بازیابی کرده و به view بازمی گرداند . حال ، در زیر چگونگی اضافه کردن GetData را می بینید .  


حال ، view را میبینید که controller data را به telerik grid متصل کرده است .

@model IEnumerable<Tellerik_grid.Models.employee>  
@using Telerik.Web.Mvc.UI;  
  
@{  
    ViewBag.Title = "GetData";  
}  
  
</br>  
<div>  
    @{  
  
        Html.Telerik().Grid(Model)  
            .Name("Grid")  
             .DataKeys(keys => keys.Add(c => c.Id))  
            .Footer(true)  
            .Sortable()  
            .Filterable()  
  
            .Scrollable(scr => scr.Height(330))  
              
            .Columns(x =>  
            {  
                x.Bound(m => m.Id).Width(120).HeaderTemplate("UserId").Title("User ID").Groupable(false);  
                x.Bound(m => m.FirstName).Width(120).Groupable(false).Filterable(true).Groupable(true);  
                x.Bound(m => m.LastName).Width(120).Groupable(true).Filterable(true).Groupable(true);  
                x.Bound(m => m.MobileNo).Width(120).HeaderTemplate("UserId").Filterable(true);  
                x.Bound(m => m.Email).Width(120).Groupable(false).Filterable(true);  
                x.Bound(m => m.State).Width(120).Groupable(true).Filterable(true);  
                x.Bound(m => m.Country).Width(120).Groupable(false).Filterable(true);  
            })  
  
          .Pageable(x => x.PageSize(10))  
  
            .Render();  
  
    @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true)))  
    @(Html.Telerik().ScriptRegistrar())  
    }  
  
</div>  


حال ، پروژه را ذخیره کرده و آن را اجرا کنید . خروجی زیر را باید ببینید . 




آموزش asp.net mvc

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب