Anyone used jquery flexigrid with ASP.NET MVC3?

Question

I am trying to use flexigrid with asp.net MVC3. I can't see any online examples for this. Has anyone done that? If yes, can you paste little code snippet here please?

thanks

Answer 1

The flexgrid is a client side control that is server side agnostic. The Wiki contains an example with description of the different properties that you could use.

So you could setup a view:

<script src="@Url.Content("~/Scripts/flexigrid.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#flex1").flexigrid({
            url: '@Url.Action("staff")',
            dataType: 'json',
            colModel: [
                        { display: 'ID', name: 'id', width: 40, sortable: true, align: 'left' },
                        { display: 'First Name', name: 'first_name', width: 150, sortable: true, align: 'left' },
                        { display: 'Surname', name: 'surname', width: 150, sortable: true, align: 'left' },
                        { display: 'Position', name: 'email', width: 250, sortable: true, align: 'left' }
                ],
            searchitems: [
                        { display: 'First Name', name: 'first_name' },
                        { display: 'Surname', name: 'surname', isdefault: true },
                        { display: 'Position', name: 'position' }
                ],
            sortname: "id",
            sortorder: "asc",
            usepager: true,
            title: "Staff",
            useRp: true,
            rp: 10,
            showTableToggleBtn: false,
            resizable: false,
            width: 700,
            height: 370,
            singleSelect: true
        });
    });
</script>

<table id="flex1"></table>

and a controller that will return the JSON structure that flexgrid expects:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Staff()
    {
        // TODO: obviously the data usually comes from a database
        // so you could define a view model that will be populated
        // but which must contain the following structure:
        var data = new 
        {
            page = 1,
            total = 3,
            rows = new[]
            {
                new 
                { 
                    id = 1,
                    cell = new 
                    {
                        id = 1,
                        first_name = "first name",
                        surname = "surname",
                        email = "f@f.com",
                        position = "pos 1"
                    }
                },
                new 
                { 
                    id = 2,
                    cell = new 
                    {
                        id = 2,
                        first_name = "first name 2",
                        surname = "surname 2",
                        email = "f2@f.com",
                        position = "pos 2"
                    }
                },
                new 
                { 
                    id = 3,
                    cell = new 
                    {
                        id = 3,
                        first_name = "first name 3",
                        surname = "surname 3",
                        email = "f3@f.com",
                        position = "pos 3"
                    }
                },
            }
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}