Tuesday, June 14, 2011

Asp.net MVC 3 Nested Grid view with Webgrid



Introduction: In some cases we need to display data in form of parent child i.e. Order and product scenario for shopping cart web site.I have used Web Grid to display records for my asp net MVC 3 application. 

Model classes: I have created two model classes Order and Product

 public class Order
    {
        public int OrderId { get; set; }
        public DateTime OrderDate { get; set; }

        public List<Product> ProductList { get; set; }
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string Name { get; set; }
    }


Controller:
 public class HomeController : Controller
    {

public ActionResult NestedGrid()
        {
            var Orders = new List<Order>();
            var products1 = new List<Product>();
            products1.Add(new Product { ProductId = 1, Name = "laptop" });
            products1.Add(new Product { ProductId = 5, Name = "pen drive" });
            Orders.Add(new Order { OrderId = 1, ProductList = products1, OrderDate = DateTime.Now });
            var products2 = new List<Product>();
            products2.Add(new Product { ProductId = 3, Name = "Hard disk" });
            products2.Add(new Product { ProductId = 4, Name = "Mouse" });
            Orders.Add(new Order { OrderId = 2, ProductList = products2, OrderDate = DateTime.Now });

            return View(Orders);
        }
}

View: I have used Razor view engine.

@model IEnumerable<MvcApplication1.Data.Order>
@{
    ViewBag.Title = "NestedGrid";
}
@{
        WebGrid topGrid = new WebGrid(source: Model);
}
<h2>NestedGrid</h2>
<div id="grid">
@topGrid.GetHtml(columns:
    topGrid.Columns(
        topGrid.Column("OrderId"),
            topGrid.Column("ProductList", format: (item) =>
        {
            WebGrid subGrid = new WebGrid(item.ProductList);
            return subGrid.GetHtml(
                    columns: subGrid.Columns(
                        subGrid.Column("ProductId"),
                        subGrid.Column("Name")
                    )
                );
        })
         ,topGrid.Column("OrderDate")
    )
)
</div> 

Result:


Conclusion: So we can easily create nested grid with the help of WebGrid in asp.net MVC 3 application.Hope this will be useful to you.

Thanks
Rajendra



51 comments:

grekai said...

it gives me
Error 4 The best overloaded method match for 'System.Web.Helpers.WebGrid.Column(string, string, System.Func, string, bool)' has some invalid arguments
I can't figure it out!!
2bhere4u@gmail.com

android developer said...

I certainly enjoyed the way you explore your experience and knowledge of the subject! Keep up on it. Thanks for sharing the info.

Anonymous said...

I'm extremely inspired along with your writing abilities and also with the layout for your blog. Is that this a paid theme or did you customize it yourself? Anyway stay up the nice high quality writing, it is uncommon to see a nice blog like this one these days..
Visit my webpage - http://www.nfljerseysfreeshippings.com/

Anonymous said...

Quality content is the key to invite the people to go to see the website, that's what this web site is providing.
Here is my page christian louboutin sale

Anonymous said...

Asking questions are genuinely fastidious thing if you are not understanding something
fully, however this post gives nice understanding even.
Also visit my website Cheap nike nfl jerseys

Anonymous said...

Fine way of describing, and nice article to take data regarding my
presentation subject matter, which i am going to present in school.
Here is my page ... web design miami beach

Anonymous said...

Just want to say your article is as astonishing.
The

clarity for your publish is simply cool and i could think you are a
professional on this subject. Fine together with your permission

allow me to clutch your RSS feed to stay up to date

with impending post. Thanks a million and please keep up the gratifying work.
Also visit my web-site :: http://nobitalife.blogspot.ru/

Anonymous said...

Hello, I think your blog could be having web browser compatibility issues.
When I take a look at your blog in Safari, it looks fine but when
opening in Internet Explorer, it has some overlapping issues.
I just wanted to give you a quick heads up! Other than that, great site!
Also see my web page - green coffee extract

Anonymous said...

I think that is among the so much vital

info for me. And i am satisfied studying your article. However should
remark on few common issues, The

site taste is great, the articles is in reality
nice : D. Just right activity, cheers
Also see my website - classified add Gibraltar

Anonymous said...

Thanks in support of sharing such a good thought,
piece of writing is fastidious, thats why i have read it fully
Check out my web blog proform promotions

Anonymous said...

Hey there! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a
community in the same niche. Your blog provided us valuable information
to work on. You have done a wonderful job!
Feel free to surf my webpage : cheap christian louboutin shoe

Anonymous said...

There iѕ onе wоrԁ yοu can
describe ceіlіng fanѕ with lіghts
- prаcticаl. with your fаn,
уou wіll wаnt to ԁouble check anԁ enѕure
that thе ball. Theѕe use incаndеѕcеnt bulbs for a sοft wагm light.



Here іs mу ρage - hampton bay ceiling fans with lights and remote install instructions

Anonymous said...

Have уou ever thought about adding a little bit more than just your articles?

І mean, whаt you say is fundamеntal аnd аll.
Hoωevеr just imagine іf уou аdded some great imageѕ or videоs to give your
postѕ morе, "pop"! Yοuг content is eхcellent but with images аnd video cliρs, thіs site cоulԁ undeniablу be one
of the very beѕt in its niche. Good blog!

Mу web pаge - HomeSite

Anonymous said...

Ahaa, its good discussion on the topic of this piece of
writing at this place at this blog, I have read all that,
so now me also commenting at this place.

my web site: hotel escort

Anonymous said...

excellent issues altogether, you just received a new reader.
What may you recommend about your publish that you made a few days ago?
Any positive?

Also visit my homepage - Christian Louboutin sale

Anonymous said...

whoah this weblog is magnificent i really like reading your posts. Keep up the great work! You understand, a lot of people are searching round for this information, you can help them greatly. |
[url=http://instantonlinepayday.co.uk/]payday loans
[/url]

Anonymous said...

you are actually a excellent webmaster. The website loading speed is incredible.
It kind of feels that you are doing any unique trick. Furthermore, The
contents are masterwork. you have done a wonderful task in this topic!


Visit my weblog - 激安オークリー

Anonymous said...

Hello There. I discovered your blog using msn. This is a very well written article.
I'll be sure to bookmark it and come back to learn more of your useful information. Thank you for the post. I will definitely comeback.

Feel free to visit my web-site レイバンサングラス

Anonymous said...

Saved as a favorite, I love your blog!

My blog post :: レイバン店舗

Anonymous said...

Excellent post but I was wanting to know if you could write
a litte more on this subject? I'd be very grateful if you could elaborate a little bit further. Appreciate it!

Feel free to surf to my webpage: サングラス レイバン

Anonymous said...

Howdy! This blog post could not be written much better!
Looking through this post reminds me of my previous roommate!
He continually kept talking about this. I most certainly will forward this post to him.
Fairly certain he will have a good read. Thank you for sharing!


Here is my web blog ... オークリー サングラス

Anonymous said...

I like reading through an article that will make people
think. Also, thanks for allowing for me to comment!


My page; レイバンサングラス

Anonymous said...

Hey! I know this is somewhat off topic but I was wondering if you knew where I could locate a
captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having difficulty finding one?
Thanks a lot!

Here is my web blog; 激安レイバン

Anonymous said...

I have read so many content on the topic of the blogger lovers except this paragraph is really a nice piece of writing, keep it up.


Stop by my blog - レイバン店舗

Anonymous said...

If you desire to improve your know-how simply keep visiting this web site and
be updated with the hottest news posted here.

Visit my site: オークリーメガネ

Anonymous said...

Howdy very nice site!! Man .. Beautiful .. Wonderful
.. I will bookmark your site and take the feeds additionally?
I'm happy to find a lot of useful info right here in the publish, we want develop extra strategies in this regard, thank you for sharing. . . . . .

My webpage ... オークリー アウトレット

Anonymous said...

I'm truly enjoying the design and layout of your site. It's a very easy
on the eyes which makes it much more enjoyable for me to come here and visit more often.
Did you hire out a developer to create your theme? Great work!



my website; レイバンサングラス

Anonymous said...

I have been exploring for a bit for any high quality articles or blog posts in this kind of area .
Exploring in Yahoo I ultimately stumbled upon this website.
Studying this info So i am satisfied to express that I have
an incredibly excellent uncanny feeling I came upon just what I needed.
I most undoubtedly will make sure to do not omit this web site and provides it a glance regularly.


my web-site :: レイバンサングラス

Anonymous said...

My brother recommended I may like this website.
He used to be entirely right. This post truly made my day.
You cann't consider simply how a lot time I had spent for this information! Thanks!

Here is my webpage ... familienhorn.blogspot.com

Anonymous said...

Amazing! This blog looks exactly like my old one!

It's on a totally different subject but it has pretty much the same layout and design. Superb choice of colors!

Look into my web blog: オークリー 店舗

Anonymous said...

It's really very complicated in this busy life to listen news on TV, so I just use web for that purpose, and get the most up-to-date information.

Also visit my page: 激安オークリー

Anonymous said...

Fantastic goods from you, man. I've understand your stuff previous to and you are just too fantastic. I actually like what you have acquired here, really like what you're stating and the way in which you say it.
You make it entertaining and you still care for to keep
it sensible. I can't wait to read far more from you. This is actually a great web site.

my weblog: 激安レイバン

Anonymous said...

Hi to all, how is everything, I think every one is getting more from this web page, and
your views are good designed for new viewers.


my web blog; レイバン 通販

Anonymous said...

Superb website you have here but I was wondering if you knew of any user
discussion forums that cover the same topics talked about in this article?
I'd really like to be a part of group where I can get opinions from other knowledgeable people that share the same interest. If you have any recommendations, please let me know. Thanks!

Here is my webpage: レイバン

Anonymous said...

Really when someone doesn't understand afterward its up to other visitors that they will help, so here it takes place.

Feel free to visit my blog post ... phpfoxdev.v-vs.ru

Anonymous said...

continuously i used to read smaller articles or
reviews which also clear their motive, and that is also happening with this piece of writing which I am reading now.



Feel free to visit my website ... http://advertisingfreelance.com/members-4/darnellbe/activity/8064

Anonymous said...

Your style is so unique in comparison to other folks I
have read stuff from. I appreciate you for posting when you've got the opportunity, Guess I'll just
bookmark this web site.

Stop by my weblog - オークリーメガネ

Anonymous said...

Thanks for the marvelous posting! I certainly enjoyed reading it,
you're a great author. I will be sure to bookmark your blog and will eventually come back in the future. I want to encourage continue your great posts, have a nice evening!

Here is my weblog: レイバンサングラス

Anonymous said...

Actually when someone doesn't understand afterward its up to other visitors that they will assist, so here it takes place.

my blog :: サングラス オークリー

Anonymous said...

Hmm it seems like your website ate my first comment (it was
extremely long) so I guess I'll just sum it up what I had written and say, I'm thoroughly enjoying your blog.
I as well am an aspiring blog blogger but I'm still new to the whole thing. Do you have any helpful hints for newbie blog writers? I'd definitely appreciate it.



My weblog ... レイバン

Anonymous said...

Very descriptive article, I enjoyed that bit. Will there be a part 2?


Here is my website :: レイバン

Anonymous said...

We stumbleԁ over here coming from a diffeгent ρage and thought I
should check things out. Ӏ like ωhat I sеe
so now i'm following you. Look forward to finding out about your web page again.

Review my web page - http://up4vn.com/link/4534

Anonymous said...

The other day, while I was at work, my cousin stole my iPad and tested
to see if it can survive a 30 foot drop, just so she can be a
youtube sensation. My apple ipad is now broken and she has 83 views.
I know this is completely off topic but I had to
share it with someone!

my web site: レイバンサングラス

Anonymous said...

これは男性のためのバーバリーアクセサリーの中から優れたアクセサリーあなたのワードローブに追加する項目と最も人気のある選択肢の一つである

Feel free to surf to my blog post - コート レディース バーバリー

Anonymous said...

It may help you stand out on the golf package.
Atmosphere Jordan 1985 running shoes had a special name
and they were called as "AJKO". It capabilities a rubber outsole for
specific grip and speedy moves. Very low priced products does not equal to
lower quality. http://www.iespuertadeandalucia.
org/moodle/user/view.php?id=9032&course=1

Anonymous said...

内部 です リラックスした フリースと、アウトドア シープスキン。 ティファニー オープンハートを撮影している、世界全体 嵐によってと に発展する は 大 ファッション 流行。 これ 製品 です
有用 反発で 水分 と寒さで凍結 気候。 ため ポイントのケース:
あなたなら、ディメンション 6 1 つ/2、投資 は ディメンション 6。A 高品質 シープスキンです 耐久性 と 非常に
密 にもかかわらず 維持 柔らかさ。 1 つの特定 補足 引き起こす の彼ら
人気のレベル です彼ら 利便性。Louis Vuitton

Anonymous said...

We area group of volunteers andstartinga new scheme in our community.
Yourweb siteprovidedus with valuableinfoto work on.You'vedonea formidablejob and ourentirecommunity will bethankfulto you."Asp.net MVC 3 Nested Grid view with Webgrid"Admiringthehard workyou put into yourwebsiteandin depthinformation youprovide. It'sawesometo come across a blog every once in a while that isn't the sameoutdatedrehashedmaterial.Fantasticread! I'vebookmarkedyour
site and I'maddingyour RSS feeds to my Google account.

My weblog: エアマックス95

Anonymous said...

これらの簡単なヒント確かにする選択ディーラー右購入あなたサングラス。彼女は特集最近スポーツをRay Ban 3316 Clubmaster
モデル。それにもかかわらず、新しいコメントの公開SBI からすべて米国

Have a look at my website ... オークリーゴルフ

Anonymous said...

彼らは摩耗能力のために見えると頑丈なつくりブランド名資質個性。軸受保護と、将来を防ぐために明快さ ANSI Z87.
one の期待に応えます。

my web blog ... オークリーゴーグル

Anonymous said...

It will depend on how large the home is without question and what capabilities it offers.


Feel free to surf to my page :: organizacja imprez firmowych

sameer more said...

Can u show me example where 4 rows are spanned into one row...using webgrid in MVC