[Razor] How to add items to a Panel from a Partial View

  1. #1

    [Razor] How to add items to a Panel from a Partial View

    It is possible to add items to a Panel from a Partial View? Something like this:

    @(Html.X().Viewport()
               .Layout(LayoutType.Border)
               .Resizable(true)
               .Split(true)
             
               .Items(items =>
               {
                 
                   items.Add(Html.X().Panel().Title("Hola").Region(Region.West).Resizable(true).Width(200));
                   items.Add(Html.X().Panel().Title("Chao").Region(Region.Center).Items(items2 =>
                       {
                           
                           Html.RenderPartial("_MyPartialView");
                           
                           
                       }));
                
               })
               
     )
    It's certainly possible to add a UserControl as a Panel <content> using the ASPX engine but I can't figure out how to achieve it using Razor.

    Thanks.
  2. #2
    Hi,

    Please use the ItemsFromPage property.
    .ItemsFromPage(this, "viewName.cshtml")
  3. #3
    Thank you, worked perfectly although there is a strange behavior. The GridPanel loaded from the partial view won't anchor 100% to the center region specified in the Viewport (It grows the size of the items on the grid and overflows offscreen). I'm not sure how to accomplish this. I'm also suspecting that the "Booking" panel has something to do with the problem.

    Index.cshtml
    @Html.X().ResourceManager()
    
    @(Html.X().Viewport()
               .Layout(LayoutType.Border)
               .Split(true)          
               .Items(items =>
               {             
                   items.Add(Html.X().Panel().Title("Options").Region(Region.West).Width(200));
                   items.Add(Html.X().Panel().Title("Booking").Region(Region.Center).ItemsFromPage(this,"~/Views/Shared/_BookingGrid.cshtml"));       
               })
    
    
    )
    _BookingGrid.cshtml
    @(Html.X().GridPanel()                                                                                                                                                                                        
                                                           .Store(store => store.Add(Html.X().Store()
                                                           .AutoLoad(true)                                                                                                    
                                                           .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                                                       .Url("/Data/GetShips/")
                                                                       .Reader(reader => reader.Add(Html.X().JsonReader()
                                                                                   .Root("result")
                                                                               ))
                                                                       ))
                                                           .Model(model => model.Add(Html.X().Model()
                                                                       .Fields(fields =>
                                                                       {
                                                                           fields.Add(Html.X().ModelField().Name("Name"));
                                                                           fields.Add(Html.X().ModelField().Name("Code"));
                                                                       })
                                                                   ))
                                                            ))
    
    
                                                       .ColumnModel(columnModel =>
                                                       {
    
                                                           columnModel.Columns.Add(Html.X().Column()
                                                                                     .Text("Code")
                                                                                     .DataIndex("Code")
                                                                                     .Width(70));
                                                           columnModel.Columns.Add(Html.X().Column()
                                                                                           .Text("Name")
                                                                                           .DataIndex("Name")
                                                                                           .Flex(1));
                                                       })
    
                                                       .BottomBar(bottomBar => bottomBar.Add(Html.X().PagingToolbar()))
                                                        
    
    )
  4. #4
    Please set fit layout for center region panel (panel with title 'Booking')
  5. #5
    Nevermind, found the problem. I had to add .Layout(LayoutType.Fit) to the "Booking" Panel.

    Thanks for your help regarding the initial problem!

Similar Threads

  1. [CLOSED] Loading panel with MVC partial view
    By bbo1971 in forum 2.x Legacy Premium Help
    Replies: 26
    Last Post: Jul 25, 2012, 1:04 AM
  2. [CLOSED] [Razor] using partial views
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 25, 2012, 9:40 AM
  3. Replies: 2
    Last Post: Mar 13, 2012, 10:23 AM
  4. [CLOSED] Tree Panel Razor View Example?
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 09, 2012, 8:22 AM
  5. [CLOSED] Razor syntax for adding a partial view to a Panel
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 23, 2012, 9:55 AM

Tags for this Thread

Posting Permissions