Flexigrid is a free Lightweight data grid with resizable columns and scrollable data. We can create flexigrids by using javascript or jquery.We can apply sorting,searching and paging in these grid.Flexigrids accepts two types data sources xml or json.Here is the example of json data source.
In a view
//Add flexigrid script
<`script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/flexigrid.pack.js")">
<`script type="text/javascript">
$(document).ready(function () {
$(".flexmgridUsers").flexigrid({
url: '@Url.Content("~/ControllerName/ActionName")',/*Url of Action from where we get data */
dataType: 'json',
colModel: [
{ display: 'UserId', name: 'UserId', width: 180, sortable: false, align: 'left', hide: true },/*display Columns*/
{ display: 'Name', name: 'Name', width: 250, sortable: true, align: 'left' },
{ display: 'PhoneNo', name: 'PhoneNo', width: 215, sortable: true, align: 'left' }
]
,
buttons: [
{ name: ' ', bclass: 'excelIcon', onpress: CreateUserExcel },/*Buttons on grid*/
{ name: ' ', bclass: 'pdfIcon', onpress: CreateUserPDF}],
],
usepager: true,/*Paging true*/
useRp: true,
rp: 20,/*Range Per page*/
height: "auto"
});
});
Controller that will return the JSON structure that flexgrid accepts:
public ActionResult GetUserList()
{
//converting in grid format
var result = new
{
total = queryList.Count(),
page = page,
rows = (from user in data
select new
{
cell = new string[] { user.UserID.ToString(), user.Name, user.PhoneNo}/create cell/
})
};
//convert to JSON
return this.Json(result, JsonRequestBehavior.AllowGet);
}
0 Comment(s)