Binding Data to datagrid using Easyui in mvc

Posted by in ASP.NET MVC category on for Advance level | Points: 250 | Views : 8181 red flag

Binding Data to datagrid using easyui, send the response from controller to view and in view we can bind data to datagrid using easyui in client side.


To bind data to datagrid using easyui.

Bind Data to EasyUi in MVC

In Client side take div and in that div we take simple html table as follows
>>download easyui.js from
Use for this data binding to grid easyui.min.js and their CSS and images which is free for commercial use:
<table id="tableStudentList" class="easyui-datagrid" cellspacing="1" cellpadding="1">
Also we write binding code in javascript section as follows:
BindDatatoGrid(data) finction and pass data in the form of list to this function.

function BindDatatoGrid(data)
rownumbers: false,
singleSelect: false,
ctrlSelect: true,
remoteSort: false,
sortOrder: 'desc',
width: '100%',
columns: [[
{ field: "Sid", hidden: true, title: 'StudentId' },
{ field: "StudentName", width: "55%", sortable: true, title: 'Student Name'},
{ field: "City", width: "15%", sortable: true, title: 'City' }
}).datagrid('loadData', data.StudentList);

Output :  just like your datagrid shown as below:


Easyui is very easy to bind data to grid.

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Ankush Band
Member Level: Starter
Member Status: Member
Member Since: 2/28/2016 11:19:10 AM
Country: India

Software Developer,Pune, India

Login to vote for this post.

Comments or Responses

Posted by: Ashwnk on: 3/2/2019 | Points: 25
You know that this is free of cost informational Homepage for everyone? If you have Bing web browser then use this tutorial and learn every single information how to permanently from your records. Thanks a lot to this post comment.

Login to post response

Comment using Facebook(Author doesn't get notification)