Dynamic Jquery Grid from DB

I was trying to bind the DB table to the Jquery grid but finally i failed

wat i did was
1. First i created Entity for the data and created .XSD file

2. And in Controller i did the following to retrive the DB table
public JsonResult GetEmp()
{
List<EmployeelEntity> result = new List<EmployeelEntity>();
//List<EmployeelEntity> empid = new List<EmployeelEntity>();
//List<EmployeelEntity> empname = new List<EmployeelEntity>();
//List<EmployeelEntity> empdesig = new List<EmployeelEntity>();
{
using (EmployeeTableAdapter ta = new Repository.EmployeeTableAdapters.EmployeeTableAdapter())
{
using (Employee.EmployeeDataTable dt = ta.SelectQuery())
{
foreach (Employee.EmployeeRow row in dt)
{
EmployeelEntity EE = new EmployeelEntity();
EE.EmpID = row.EmpID;
//empid.Add(EE);
EE.Name = row.Name;
//empname.Add(EE);
EE.Designation = row.Designation;
//empdesig.Add(EE);
result.Add(EE);
}
}
}
}
return Json(result, JsonRequestBehavior.AllowGet);
}

3. In view i did like this
 <table id="Employeelist" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<script language="javascript" type="text/javascript">
alert("script");
$(document).ready(function(){
alert("Inside");
$("#Employeelist").jqGrid({
url:'/Home/GetEmp/',
datatype:'json',
colNames:['EmpId','Name','Designation'],
colModel:[
              { name: 'EmpId', index: 'EmpId', width: 55, align: 'left' },
              { name: 'Name', index: 'Name', width: 250 },
              { name: 'Designation', index: 'Designation', width: 250, align: 'right'}],
pager:jQuery('#pager'),
rowNum:3,
caption:'Employee Details'
});
});
</script>


Conclusion:
 But am not able to get the result the Jquery grid alone is displaying but i was not able to bind data in tat
 If anyone knows help me out of this