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.comUse 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.