Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create flexigrid in MVC3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 613
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: