Asp.net MVC-2 with dojo

Question

Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?

score 4 · Accepted Answer · answered Apr 08 '11 at 14:45

I did not see difference between MVC2 and other types of applications...

You should read about dojo grid

First of all you need to load dojo script (it would be better if you do it on master page). Also you can add some css styles that dojo grid using:

Site.Master:

<html>
   <head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
    .dojoxGrid table
    {
        margin: 0;
    }
    </style>
...
   </head>
....
</html>

After that you should add some code in view for initialize dojo grid, E.g.:

Index.aspx:

...
<script>
   dojo.require("dojox.grid.DataGrid");
   dojo.require("dojo.data.ItemFileReadStore");
   var layoutCountries = [
       [{
                field: "abbr",
                name: "Abbeviation",
                width: 10
        },
        {
            field: "name",
                name: "Name",
                width: 10
        },
        {
            field: "capital",
                name: "Capital",
                width: 'auto'
        }]];
        var storeData = {
            identifier: 'abbr',
            label: 'name',
            items: [{
                abbr: 'ec',
                name: 'Ecuador',
                capital: 'Quito'
            },
                {
                    abbr: 'eg',
                    name: 'Egypt',
                    capital: 'Cairo'
                },
                {
                    abbr: 'sv',
                    name: 'El Salvador',
                    capital: 'San Salvador'
                },
                {
                    abbr: 'gq',
                    name: 'Equatorial Guinea',
                    capital: 'Malabo'
                },
                {
                    abbr: 'er',
                    name: 'Eritrea',
                    capital: 'Asmara'
                },
                {
                    abbr: 'ee',
                    name: 'Estonia',
                    capital: 'Tallinn'
                },
                {
                    abbr: 'et',
                    name: 'Ethiopia',
                    capital: 'Addis Ababa'
                }]
        }
    </script>
<div style="width: 400px; height: 300px;">
        <div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
        </div>
        <div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
            queryoptions="{deep:true}" query="{}" rowsperpage="40">
        </div>
    </div>
...

And the result of this code is: enter image description here

by: I think its a good start, do you idea's on how you can pass the Json object to the view from controller? — remo, Apr 08 '11 at 17:12
@sharma: i think it helps you: http://stackoverflow.com/questions/3331842/asp-net-mvc-pass-json-string-to-view-using-viewdata :) — Andrei, Apr 08 '11 at 17:22

Asp.net MVC-2 with dojo

1 Answers1