Binding Data to datagrid using Easyui in mvc

Sachinrautetc
Posted by in ASP.NET MVC category on for Advance level | Points: 250 | Views : 1472 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.

Introduction

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 easyui.com
Use for this data binding to grid easyui.min.js and their CSS and images which is free for commercial use:
<div>
<table id="tableStudentList" class="easyui-datagrid" cellspacing="1" cellpadding="1">
</table>
</div>
Also we write binding code in javascript section as follows:
write-
BindDatatoGrid(data) finction and pass data in the form of list to this function.


function BindDatatoGrid(data)
{
$('#tableStudentList').datagrid({
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:



Conclusion

Easyui is very easy to bind data to grid.


Page copy protected against web site content infringement by Copyscape

About the Author

Sachinrautetc
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

Login to post response

Comment using Facebook(Author doesn't get notification)