Wijmo Grid with ASP.NET MVC 3

Question

I am looking for an example/tutorial or a guide to implementing Wijmo Grid.

I am looking to implement this in ASP.NET MVC 3. I will be passing dynamic data from my action.

Please can some one help me out on this.

score 5 · Answer 1 · answered Sep 10 '12 at 13:45

It's a pure client side grid which is completely server side agnostic. The documentation also seems pretty self explanatory. I invite you to go through it.

Once you go through it things get pretty standard.

You start with a view model that will hold your dynamic data:

public class MyViewModel
{
    public object[] Rows { get; set; }
}

then a controller that will feed this view model to the view:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // This data could of course be dynamic and come from wherever you like it to come
            Rows = new object[] 
            {
                new object[] { 1, "a" },
                new object[] { 2, "b" },
                new object[] { 3, "c" },
            }
        };
        return View(model);
    }
}

and finally a view:

@model MyViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Wijmo grid demo </title>
</head>
<body>
    <table id="mytable"></table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

    <!--Theme-->
    <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />

    <!--Wijmo Widgets CSS-->
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.1.min.css" rel="stylesheet" type="text/css" />

    <!--Wijmo Widgets JavaScript-->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.2.1.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $("#mytable").wijgrid({
            data: @Html.Raw(Json.Encode(Model.Rows))
        });
    </script>
</body>
</html>

Thanks @Darin will try this out, I was reading the documentation, but found it very confusing. — Yasser Shaikh, Sep 10 '12 at 13:56

score 2 · Accepted Answer · answered Sep 11 '12 at 06:53

Here is what I did with help from @Darin Dimmitrov

public ActionResult Index()
{
    var entity = new BloggingEngineDBEntities();
    var result = entity.Users.ToList();

    var model = new MyViewModel();

    var objArray = new object[result.Count];
    int counter = 0;

    foreach (var item in result)
    {
        objArray[counter] = new object[]
                                {
                                    item.UserName,
                                    item.Password,
                                    item.DisplayName,
                                    item.Email,
                                    item.AllowNotifications,
                                    item.ImageFilePath
                                };
        counter++;
    }

    model.Rows = objArray;

    return View(model);
}

and it works :), hope someone finds this useful.

Wijmo Grid with ASP.NET MVC 3

2 Answers2