Sign In | Join

Home / ASP.NET Wiki / ASP.NET Life Cycle Overview / ASP.NET MVC3 - JQGrid Integration

ASP.NET MVC3 - JQGrid Integration

 Rate It (0)

Telerik Extensions for ASP.NET MVC extend the ASP.NET MVC framework by delivering a server-based framework that integrates with client-side modules based on popular JavaScript library, jQuery.

Download Telerik  grid DLL and scripts from

http://www.trirand.net or http://www.trirand.net/download.aspx

Add Telerik grid DLL , .js and .CSS files to the project:

Displaying User Data in View:

 

Add a ManageEmployeeController to controller folder in Admin area.
 

public class ManageEmployeeController : Controller
{
}
 
 

 
 

Add ManageAllEMployees action method in the controller and add following code

 

public ActionResult ManageAllEMployees()
{
    ManageEmployeeModel objManageEmployeeModel = new ManageEmployeeModel();
    objManageEmployeeModel.EmployeeProp.ID = "ManageEmployeeId";
    FormatGrid(objManageEmployeeModel.EmployeeProp);
    objManageEmployeeModel.EmployeeProp.DataUrl = Url.Action("GetEmployeeData");
    return View(objManageEmployeeModel);
}
 

 

 

Add GetEmployeeData action method in the controller to get the data from BO class.

 

public JsonResult GetEmployeeData()
{
    return new ManageEmployeeModel().EmployeeProp.DataBind(new EmployeeBO().GetEmployeeDataForGrid());
}
 

 

Add GetEmployeeData non action method in the controller to format the

 

[NonAction]
private void FormatGrid(JQGrid emp )
{
    emp.PagerSettings.PageSize = 5;
    emp.PagerSettings.PageSizeOptions = "[5,10,20]";
    emp.ShrinkToFit = true;
    emp.AppearanceSettings.AlternateRowBackground = true;
}
 

 

Add GetEmployeeDataForGrid  method in BO class.

 

public IQueryable<Employee> GetEmployeeDataForGrid()
{
    return context.Employees.Select(emp => emp);
}
 

 

 

Add ManageEmployeeModel model class in admin area.
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Trirand.Web.Mvc;
using System.Web.UI.WebControls;
namespace EmployeMamagmentAPP14_Dec_2011.Areas.Admin.Models
{
    public class ManageEmployeeModel
    {  
        public JQGrid EmployeeProp { get; set; }
        public ManageEmployeeModel()
        {
            EmployeeProp = new JQGrid
            {
                Columns = new List<JQGridColumn>{
                    new JQGridColumn{
                        DataField="PKEmployeeId",
                        HeaderText="",
                        PrimaryKey=true,
                        Visible=false
                    },
                    new JQGridColumn{
                        DataField="EmployeeName",
                        HeaderText="Employee Name",
                        Sortable=true
                    },
                    new JQGridColumn{
                        DataField="EmployeeSalary",
                        HeaderText="Employee Salary",
                        Sortable=true
                    },
                    new JQGridColumn{
                        DataField="EmployeeAdd",
                        HeaderText="Employee Add",
                        Sortable=true
                    },
                    new JQGridColumn{
                        DataField="EmployeeRating",
                        HeaderText="Employee Rating",
                        Sortable=true
                    },
                },
                Width = Unit.Percentage(400),
                Height = Unit.Percentage(200),
                AutoWidth = true
            };
        }
    }
}
 
 

 
Create a view to ManageAllEMployees to action method:
 

@model EmployeMamagmentAPP14_Dec_2011.Areas.Admin.Models.ManageEmployeeModel
@{
    ViewBag.Title = "ManageAllEMployees";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using Trirand.Web.Mvc
<h2>ManageAllEMployees</h2>
<script src="../../../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="../../../../Content/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
 
@Html.Trirand().JQGrid(Model.EmployeeProp, "ManageEmployeeId1")
 

Revision number 2, Thursday, April 12, 2012 5:11:44 PM by tmorton

Comments

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. abiruban (1)