[CLOSED] Loading Partial View within a Portlet

  1. #1

    [CLOSED] Loading Partial View within a Portlet

    I'm having trouble loading a partial view inside of a portlet. With the code below, only the ext.net button control loads inside the portlet, all other html within the partial view is displayed outside of the porlets.

    Am I missing an ext.net container of some kind to load the partial view in?

    Please don't link me to the examples, I've looked there already.

    Thank you,
    Rob

    --

    Main View

    
    @functions 
    {
        private Ext.Net.Portlet.Builder InitPortlet(IWidgetWrapper widgetModel)
        {
            var portletBuilder = new Ext.Net.Portlet.Builder();
                
            switch (widgetModel.WidgetId)
            {
                case 1:
                    portletBuilder.ItemsFromPartial("~/Views/Shared/Widgets/_AlertsWidget.cshtml", widgetModel as AlertsWidgetViewModelDTO);
                    break;
                default:
                    portletBuilder.ItemsFromPartial("~/Views/Shared/Widgets/_ErrorWidget.cshtml");
                    break;
            }
    
            return portletBuilder;
        }
    
    }
    
    <div>
        @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
    
        @(Html.X().Portal().ID("Dashboard_Portal").Border(false).Layout(Ext.Net.LayoutType.Fit)
                .Items(Html.X().Portal()
                            .Items(Html.X().PortalColumn().Cls("x-column-padding")
                                    .Items(portlets =>
                                        {
                                            foreach (var widgetModel in Model.WidgetContents)
                                            {
                                                IWidgetWrapper thisWidget = widgetModel;
                                                portlets.Add(InitPortlet(widgetModel));
                                            }
                                        })
                           )))    
     </div>
    Partial View

    
    @model PR.DTO.AlertsWidgetViewModelDTO
    
    <div>
        <h3>Alerts Widget</h3>
        <p>
            This is where some alerts will go
        </p>
        <br />
        @Html.X().Button().Icon(Icon.Application).Text("Ext.Net button - click").Handler("Ext.Msg.alert('Ext.NET button', 'Hello');")
    
    </div>
    Last edited by Daniil; Jul 23, 2013 at 12:55 PM. Reason: [CLOSED]
  2. #2
    ItemsFromPartial works with Ext.Net widgets only
    Please use ContentFromPartial
  3. #3
    Quote Originally Posted by Vladimir View Post
    ItemsFromPartial works with Ext.Net widgets only
    Please use ContentFromPartial
    Using ContentFromPartial renders the html in my partial view but now my ext.net button control does not render.

    I have both ext.net controls and html in my partial view and I want to render them both within a Portlet.

    How can I achieve this?

    Thanks
    -Rob

    Main View

    <link href="~/Content/thirdPartyCss/ext_custom_graythem.css" rel="stylesheet" />
    <div>
        
        @functions 
        {
            private Ext.Net.Portlet.Builder InitPortlet(IWidget widgetModel)
            {
                var portletBuilder = new Ext.Net.Portlet.Builder();
    
                switch (widgetModel.WidgetId)
                {
                    case 100:
                        portletBuilder.ContentFromPartial("~/Views/Widgets/_WidgetAlerts.cshtml", widgetModel as WidgetModelAlerts);
                        break;
                }
    
                return portletBuilder;
            }
    
        }
    
        @(Html.X().ResourceManager(this.ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
    
        @(Html.X().Portal().ID("Dashboard_Portal").Border(false).Layout(Ext.Net.LayoutType.Fit)
                .Items(Html.X().Portal()
                            .Items(Html.X().PortalColumn()
                                    .Cls("x-column-padding")
                                    .Items(portlets =>
                                        {
                                            foreach (var widgetModel in Model.Widgets)
                                            {
                                                IWidget thisWidget = widgetModel;
                                                portlets.Add(InitPortlet(thisWidget));
                                            }
                                        })
                            )))
    
        
    
    </div>
    Partial View

    @using Ext.Net
    @using Ext.Net.MVC
    
    @model SandboxOneMvc.Models.WidgetModelAlerts
    
    <div>
        <h3>Alerts Widget - WidgetId: @(Model.WidgetId)</h3>
        <p>
            This is where some alerts will go
        </p>
        <br />
        @Html.X().Button().Icon(Icon.Application).Text("Ext.Net button - click").Handler("Ext.Msg.alert('Ext.NET button', 'Hello');")
     
    </div>
  4. #4
    Are you sure that button is not rendered? Try to set enough height for portlets
  5. #5
    You're right, the button was hidden.

    Setting the Height or the MinHeight resolved the issue, see code below.

    Is there a property or method that will auto adjust the height to fit the contents of the portlet?

    Thank you
    -Rob

        @functions 
        {
            private Ext.Net.Portlet.Builder InitPortlet(IWidget widgetModel)
            {
                var portletBuilder = new Ext.Net.Portlet.Builder();
    
                switch (widgetModel.WidgetId)
                {
                    case 100:
                        portletBuilder.ContentFromPartial("~/Views/Widgets/_WidgetAlerts.cshtml", widgetModel as WidgetModelAlerts);
                        portletBuilder.MinHeight(160);
                        break;
                }
    
                return portletBuilder;
            }
    
        }
  6. #6
    This helps.
    portletBuilder.AutoDoLayout(true);
    However, be careful with this setting, because it can slow down initial rendering.
  7. #7
    I added code so I can generate columns dynamically and ContentFromPartial is now loading the partial view outside of the portlet again.

    I'm getting my partial views loaded, then empty portlets

    How do I ensure the partial views load within their containers?

    Thank you,
    -Rob

    
    <link href="~/Content/ext_custom_graythem.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/PriceRight/Dashboard.js"></script>
    
    @functions 
    {
        private void InitPortal(Portal portal)
        {
            InitPortalColumn(portal);
        }
        
        private void InitPortalColumn(Portal portal)
        {
            var layoutColumnCount = Model.CurrentLayout.ColumnCount;
    
            for (int currentColumn = 1; currentColumn <= layoutColumnCount; currentColumn++)
            {
                var portalColumnBuilder = new Ext.Net.PortalColumn.Builder();
    
                portalColumnBuilder = Html.X().PortalColumn()
                                        .ID("portal-column" + currentColumn)
                                        .Cls("x-column-padding")
                                        .MarginSpec("0 10 0 10")
                                        .Control(portalColumn => InitPortlet(currentColumn, portalColumn));
                                       
                portal.Items.Add(portalColumnBuilder);
            }
        
        }
    
        private void InitPortlet(int currentColumn, PortalColumn portalColumn)
        {
            var layoutColumnCount = Model.CurrentLayout.ColumnCount;
            var widgets = Model.CurrentWidgets;
    
            foreach (var widget in widgets.Where(w => w.WidgetColumnPosition == currentColumn))
            {
                var widgetViewModel = CastWidgetModel(GetWidgetContent(widget.WidgetId));
                var portlet = new Ext.Net.Portlet.Builder();
    
                portlet = Html.X().Portlet()
                                .ID("portlet-" + widget.WidgetId)
                                // Load Partial
                                .ContentFromPartial(widget.WidgetUrl, widgetViewModel)
                                // Ext.Net - Complex
                                .Title(widget.WidgetName)
                                .Closable(false)
                                .Layout(LayoutType.Fit)
                                .Anchor("100% 50%")
                                .MinHeight(250)
                                .TopBar(new Toolbar { Items = { new Button { Text = "Reload", Icon = Icon.ArrowRefresh, OnClientClick = "alert('toolbar')" } }
                                });
                
                portalColumn.Items.Add(portlet);
            }
        }
    
        private IWidgetWrapper GetWidgetContent(int widgetId)
        {
            var widgetContent = Model.WidgetContents.Where(w => w.WidgetId == widgetId).SingleOrDefault();
    
            return widgetContent;
        }
    
        private IWidgetWrapper CastWidgetModel(IWidgetWrapper widgetContent)
        {
            IWidgetWrapper widgetModel;
    
            switch (widgetContent.WidgetId)
            {
                case 1:
                    widgetModel = widgetContent as AlertsWidgetViewModelDTO;
                    break;
                case 2:
                    widgetModel = widgetContent as ReferencePricingWidgetViewModelDTO;
                    break;
                case 3:
                    widgetModel = widgetContent as PriceSimulatorWidgetViewModelDTO;
                    break;
                case 4:
                    widgetModel = widgetContent as PriceChangeInboxWidgetViewModelDTO;
                    break;
                default:
                    widgetModel = widgetContent as EmptyWidgetViewModelDTO;
                    break;
            }
    
            return widgetModel;
        }
    }
    
    <div id="dashboard-portal">
        @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
    
        @(this.Html.X().Portal()
                        .ID("dashboardPortal")
                        .Border(false)
                        .Flex(1) // Ext.Net - Complex
                        .AutoDoLayout(true)
                        .Layout(LayoutType.Fit)
                        .Control(portal => { this.InitPortal(portal); }))
    
    </div>
    Here is the html source

    
    
    <section class="main-content clear-fix">
    
    
    
        <link href="/Content/ext_custom_graythem.css" rel="stylesheet">
        <script type="text/javascript" src="/Scripts/PriceRight/Dashboard.js"></script>
    
    
        <div id="dashboard-portal">
    
    
            <div id="App.dashboardPortal_Container">
                <div id="portlet-1_Content" class="x-hidden">
    
    
    
                    <div id="App.grdPriceChange_Container">
                        <div style="height: 100px;" class="x-panel x-grid-custom x-grid-with-row-lines x-grid-header-hidden x-panel-default x-grid" id="grdPriceChange">
                            <div style="width: 1696px; right: auto; left: 0px; top: 0px;" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" id="grdPriceChange_header">
                                <div style="width: 1684px;" id="grdPriceChange_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top">
                                    <div style="width: 1684px; height: 16px;" id="grdPriceChange_header-innerCt" class="x-box-inner " role="presentation">
                                        <div style="width: 1684px;" id="grdPriceChange_header-targetEl" class="x-box-target">
                                            <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1684px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="grdPriceChange_header_hd"><span id="grdPriceChange_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Approved Price Change Alerts</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct" style="border-width: 1px; height: 0px; width: 1696px; right: auto; left: 0px; top: 25px;" id="headercontainer-1021">
                                <div style="width: 216px; height: 42px;" id="headercontainer-1021-innerCt" class="x-box-inner " role="presentation">
                                    <div style="width: 216px;" id="headercontainer-1021-targetEl" class="x-box-target">
                                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-first" style="border-width: 1px; width: 100px; height: auto; right: auto; left: 0px; top: 0px; margin: 0px;" id="colSubject">
                                            <div id="colSubject-titleEl" class="x-column-header-inner"><span id="colSubject-textEl" class="x-column-header-text">&nbsp;</span><div id="colSubject-triggerEl" class="x-column-header-trigger"></div>
                                            </div>
                                        </div>
                                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-last" style="border-width: 1px; width: 100px; height: auto; right: auto; left: 100px; top: 0px; margin: 0px;" id="colAlertColor">
                                            <div id="colAlertColor-titleEl" class="x-column-header-inner"><span id="colAlertColor-textEl" class="x-column-header-text">&nbsp;</span><div id="colAlertColor-triggerEl" class="x-column-header-trigger"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="left: 0px; top: 25px; width: 1696px; height: 75px;" id="grdPriceChange-body" class="x-panel-body x-grid-body x-panel-body-default x-layout-fit x-panel-body-default">
                                <div tabindex="-1" style="overflow: auto; margin: 0px; width: 1694px; height: 75px;" class="x-grid-view x-fit-item x-grid-view-default x-unselectable" id="gridview-1022">
                                    <table id="gridview-1022-table" class="x-gridview-1022-table x-grid-table" style="width: 200px;" tabindex="-1" border="0" cellpadding="0" cellspacing="0">
                                        <colgroup>
                                            <col class="x-grid-cell-colSubject" style="width: 100px">
                                        </colgroup>
                                        <colgroup>
                                            <col class="x-grid-cell-colAlertColor" style="width: 100px">
                                        </colgroup>
                                        <tbody id="gridview-1022-body"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="App.grdCompetitorPricing_Container">
                        <div style="height: 100px;" class="x-panel x-grid-with-row-lines x-grid-header-hidden x-panel-default x-grid" id="grdCompetitorPricing">
                            <div style="width: 1696px; right: auto; left: 0px; top: 0px;" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" id="grdCompetitorPricing_header">
                                <div style="width: 1684px;" id="grdCompetitorPricing_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top">
                                    <div style="width: 1684px; height: 16px;" id="grdCompetitorPricing_header-innerCt" class="x-box-inner " role="presentation">
                                        <div style="width: 1684px;" id="grdCompetitorPricing_header-targetEl" class="x-box-target">
                                            <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1684px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="grdCompetitorPricing_header_hd"><span id="grdCompetitorPricing_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Competitor Pricing Alerts</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct" style="border-width: 1px; height: 0px; width: 1696px; right: auto; left: 0px; top: 25px;" id="headercontainer-1025">
                                <div style="width: 216px; height: 35px;" id="headercontainer-1025-innerCt" class="x-box-inner " role="presentation">
                                    <div style="width: 216px;" id="headercontainer-1025-targetEl" class="x-box-target">
                                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-first" style="border-width: 1px; width: 100px; height: auto; right: auto; left: 0px; top: 0px; margin: 0px;" id="gridcolumn-1026">
                                            <div id="gridcolumn-1026-titleEl" class="x-column-header-inner"><span id="gridcolumn-1026-textEl" class="x-column-header-text">&nbsp;</span><div id="gridcolumn-1026-triggerEl" class="x-column-header-trigger"></div>
                                            </div>
                                        </div>
                                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-last" style="border-width: 1px; width: 100px; height: auto; right: auto; left: 100px; top: 0px; margin: 0px;" id="gridcolumn-1027">
                                            <div id="gridcolumn-1027-titleEl" class="x-column-header-inner"><span id="gridcolumn-1027-textEl" class="x-column-header-text">&nbsp;</span><div id="gridcolumn-1027-triggerEl" class="x-column-header-trigger"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="left: 0px; top: 25px; width: 1696px; height: 75px;" id="grdCompetitorPricing-body" class="x-panel-body x-grid-body x-panel-body-default x-layout-fit x-panel-body-default">
                                <div tabindex="-1" style="overflow: auto; margin: 0px; width: 1694px; height: 73px;" class="x-grid-view x-fit-item x-grid-view-default x-unselectable" id="gridview-1028">
                                    <table id="gridview-1028-table" class="x-gridview-1028-table x-grid-table" style="width: 200px;" tabindex="-1" border="0" cellpadding="0" cellspacing="0">
                                        <colgroup>
                                            <col class="x-grid-cell-gridcolumn-1026" style="width: 100px">
                                        </colgroup>
                                        <colgroup>
                                            <col class="x-grid-cell-gridcolumn-1027" style="width: 100px">
                                        </colgroup>
                                        <tbody id="gridview-1028-body"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="App.grdPriceCertification_Container">
                        <div style="height: 100px;" class="x-panel x-grid-with-row-lines x-grid-header-hidden x-panel-default x-grid" id="grdPriceCertification">
                            <div style="width: 1696px; right: auto; left: 0px; top: 0px;" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" id="grdPriceCertification_header">
                                <div style="width: 1684px;" id="grdPriceCertification_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top">
                                    <div style="width: 1684px; height: 16px;" id="grdPriceCertification_header-innerCt" class="x-box-inner " role="presentation">
                                        <div style="width: 1684px;" id="grdPriceCertification_header-targetEl" class="x-box-target">
                                            <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1684px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="grdPriceCertification_header_hd"><span id="grdPriceCertification_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Price Certification Alerts</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct" style="border-width: 1px; height: 0px; width: 1696px; right: auto; left: 0px; top: 25px;" id="headercontainer-1031">
                                <div style="width: 216px; height: 35px;" id="headercontainer-1031-innerCt" class="x-box-inner " role="presentation">
                                    <div style="width: 216px;" id="headercontainer-1031-targetEl" class="x-box-target">
                                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-first" style="border-width: 1px; width: 100px; height: auto; right: auto; left: 0px; top: 0px; margin: 0px;" id="gridcolumn-1032">
                                            <div id="gridcolumn-1032-titleEl" class="x-column-header-inner"><span id="gridcolumn-1032-textEl" class="x-column-header-text">&nbsp;</span><div id="gridcolumn-1032-triggerEl" class="x-column-header-trigger"></div>
                                            </div>
                                        </div>
                                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-last" style="border-width: 1px; width: 100px; height: auto; right: auto; left: 100px; top: 0px; margin: 0px;" id="gridcolumn-1033">
                                            <div id="gridcolumn-1033-titleEl" class="x-column-header-inner"><span id="gridcolumn-1033-textEl" class="x-column-header-text">&nbsp;</span><div id="gridcolumn-1033-triggerEl" class="x-column-header-trigger"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="left: 0px; top: 25px; width: 1696px; height: 75px;" id="grdPriceCertification-body" class="x-panel-body x-grid-body x-panel-body-default x-layout-fit x-panel-body-default">
                                <div tabindex="-1" style="overflow: auto; margin: 0px; width: 1694px; height: 73px;" class="x-grid-view x-fit-item x-grid-view-default x-unselectable" id="gridview-1034">
                                    <table id="gridview-1034-table" class="x-gridview-1034-table x-grid-table" style="width: 200px;" tabindex="-1" border="0" cellpadding="0" cellspacing="0">
                                        <colgroup>
                                            <col class="x-grid-cell-gridcolumn-1032" style="width: 100px">
                                        </colgroup>
                                        <colgroup>
                                            <col class="x-grid-cell-gridcolumn-1033" style="width: 100px">
                                        </colgroup>
                                        <tbody id="gridview-1034-body"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="portlet-2_Content" class="x-hidden">
                    <div>
                        <p>Widget Text</p>
    
                        <p>
                            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
           
                            <br>
                            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
       
                        </p>
                    </div>
    
                </div>
                <div id="portlet-3_Content" class="x-hidden">
                    <div>
                        <p>Widget Text</p>
    
                        <p>
                            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
           
                            <br>
                            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
       
                        </p>
                    </div>
    
    
                </div>
                <div id="portlet-4_Content" class="x-hidden">
                    <div>
                        <p>Widget Text</p>
    
                        <p>
                            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
           
                            <br>
                            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test 
       
                        </p>
                    </div>
    
    
                </div>
                <div class="x-panel x-portal x-panel-default" id="dashboardPortal">
                    <div style="overflow: auto; left: 0px; top: 0px; width: 1696px;" id="dashboardPortal-body" class="x-panel-body x-portal-body x-panel-body-default x-column-layout-ct x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left"><span id="dashboardPortal-outerCt" style="display: table; width: 100%;">
                        <div id="dashboardPortal-innerCt" style="display: table-cell; height: 100%; vertical-align: top;" class="">
                            <div class="x-container x-column-padding x-column x-container-default x-portal-column-first x-portal-column-last" style="margin: 0px 10px; width: 1660px;" id="portal-column1"><span id="portal-column1-outerCt" style="display: table; width: 100%; table-layout: fixed;">
                                <div id="portal-column1-innerCt" style="display: table-cell; height: 100%; vertical-align: top;" class="">
                                    <div style="width: 1660px; height: 250px;" class="x-panel x-portlet x-panel-default-framed" id="portlet-1">
                                        <div style="width: 1660px; right: auto; left: -1px; top: -1px;" class="x-panel-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top" id="portlet-1_header">
                                            <div style="width: 1648px;" id="portlet-1_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default-framed x-panel-header-body-horizontal x-panel-header-body-default-framed-horizontal x-panel-header-body-top x-panel-header-body-default-framed-top x-panel-header-body-docked-top x-panel-header-body-default-framed-docked-top x-box-layout-ct x-panel-header-body-default-framed-horizontal x-panel-header-body-default-framed-top x-panel-header-body-default-framed-docked-top">
                                                <div style="width: 1648px; height: 16px;" id="portlet-1_header-innerCt" class="x-box-inner " role="presentation">
                                                    <div style="width: 20000px;" id="portlet-1_header-targetEl" class="x-box-target">
                                                        <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1632px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default-framed x-box-item x-component-default" unselectable="on" id="portlet-1_header_hd"><span id="portlet-1_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Alerts</span></div>
                                                        <div class="x-tool x-box-item x-tool-default x-tool-after-title" style="width: 15px; height: 15px; right: auto; left: 1633px; top: 0px; margin: 0px;" id="tool-1017">
                                                            <img id="tool-1017-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-collapse-top" role="presentation"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 1650px; right: auto; left: 4px; top: 29px;" class="x-toolbar x-docked x-toolbar-default x-docked-top x-toolbar-docked-top x-toolbar-default-docked-top x-box-layout-ct" id="toolbar-1009">
                                            <div style="width: 1630px; height: 20px;" id="toolbar-1009-innerCt" class="x-box-inner " role="presentation">
                                                <div style="width: 20000px;" id="toolbar-1009-targetEl" class="x-box-target">
                                                    <div class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left" style="border-width: 1px; right: auto; left: 0px; top: 0px; margin: 0px;" id="button-1010">
                                                        <div id="button-1010-btnWrap" class="x-btn-wrap" unselectable="on"><a id="button-1010-btnEl" class="x-btn-button" role="button" hidefocus="on" unselectable="on" tabindex="0"><span id="button-1010-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Reload</span><span role="img" id="button-1010-btnIconEl" class="x-btn-icon-el icon-arrowrefresh " unselectable="on" style="">&nbsp;</span></a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-top-width: 1px; left: 0px; width: 1650px; top: 60px; height: 180px;" id="portlet-1-body" class="x-panel-body x-panel-body-default-framed x-layout-fit x-panel-body-default-framed"></div>
                                    </div>
                                    <div style="width: 1660px; height: 250px;" class="x-panel x-portlet x-panel-default-framed" id="portlet-2">
                                        <div style="width: 1660px; right: auto; left: -1px; top: -1px;" class="x-panel-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top" id="portlet-2_header">
                                            <div style="width: 1648px;" id="portlet-2_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default-framed x-panel-header-body-horizontal x-panel-header-body-default-framed-horizontal x-panel-header-body-top x-panel-header-body-default-framed-top x-panel-header-body-docked-top x-panel-header-body-default-framed-docked-top x-box-layout-ct x-panel-header-body-default-framed-horizontal x-panel-header-body-default-framed-top x-panel-header-body-default-framed-docked-top">
                                                <div style="width: 1648px; height: 16px;" id="portlet-2_header-innerCt" class="x-box-inner " role="presentation">
                                                    <div style="width: 20000px;" id="portlet-2_header-targetEl" class="x-box-target">
                                                        <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1632px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default-framed x-box-item x-component-default" unselectable="on" id="portlet-2_header_hd"><span id="portlet-2_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Reference Pricing</span></div>
                                                        <div class="x-tool x-box-item x-tool-default x-tool-after-title" style="width: 15px; height: 15px; right: auto; left: 1633px; top: 0px; margin: 0px;" id="tool-1018">
                                                            <img id="tool-1018-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-collapse-top" role="presentation"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 1650px; right: auto; left: 4px; top: 29px;" class="x-toolbar x-docked x-toolbar-default x-docked-top x-toolbar-docked-top x-toolbar-default-docked-top x-box-layout-ct" id="toolbar-1011">
                                            <div style="width: 1630px; height: 20px;" id="toolbar-1011-innerCt" class="x-box-inner " role="presentation">
                                                <div style="width: 20000px;" id="toolbar-1011-targetEl" class="x-box-target">
                                                    <div class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left" style="border-width: 1px; right: auto; left: 0px; top: 0px; margin: 0px;" id="button-1012">
                                                        <div id="button-1012-btnWrap" class="x-btn-wrap" unselectable="on"><a id="button-1012-btnEl" class="x-btn-button" role="button" hidefocus="on" unselectable="on" tabindex="0"><span id="button-1012-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Reload</span><span role="img" id="button-1012-btnIconEl" class="x-btn-icon-el icon-arrowrefresh " unselectable="on" style="">&nbsp;</span></a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-top-width: 1px; left: 0px; width: 1650px; top: 60px; height: 180px;" id="portlet-2-body" class="x-panel-body x-panel-body-default-framed x-layout-fit x-panel-body-default-framed"></div>
                                    </div>
                                    <div style="width: 1660px; height: 250px;" class="x-panel x-portlet x-panel-default-framed" id="portlet-3">
                                        <div style="width: 1660px; right: auto; left: -1px; top: -1px;" class="x-panel-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top" id="portlet-3_header">
                                            <div style="width: 1648px;" id="portlet-3_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default-framed x-panel-header-body-horizontal x-panel-header-body-default-framed-horizontal x-panel-header-body-top x-panel-header-body-default-framed-top x-panel-header-body-docked-top x-panel-header-body-default-framed-docked-top x-box-layout-ct x-panel-header-body-default-framed-horizontal x-panel-header-body-default-framed-top x-panel-header-body-default-framed-docked-top">
                                                <div style="width: 1648px; height: 16px;" id="portlet-3_header-innerCt" class="x-box-inner " role="presentation">
                                                    <div style="width: 20000px;" id="portlet-3_header-targetEl" class="x-box-target">
                                                        <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1632px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default-framed x-box-item x-component-default" unselectable="on" id="portlet-3_header_hd"><span id="portlet-3_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Price Simulator</span></div>
                                                        <div class="x-tool x-box-item x-tool-default x-tool-after-title" style="width: 15px; height: 15px; right: auto; left: 1633px; top: 0px; margin: 0px;" id="tool-1019">
                                                            <img id="tool-1019-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-collapse-top" role="presentation"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 1650px; right: auto; left: 4px; top: 29px;" class="x-toolbar x-docked x-toolbar-default x-docked-top x-toolbar-docked-top x-toolbar-default-docked-top x-box-layout-ct" id="toolbar-1013">
                                            <div style="width: 1630px; height: 20px;" id="toolbar-1013-innerCt" class="x-box-inner " role="presentation">
                                                <div style="width: 20000px;" id="toolbar-1013-targetEl" class="x-box-target">
                                                    <div class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left" style="border-width: 1px; right: auto; left: 0px; top: 0px; margin: 0px;" id="button-1014">
                                                        <div id="button-1014-btnWrap" class="x-btn-wrap" unselectable="on"><a id="button-1014-btnEl" class="x-btn-button" role="button" hidefocus="on" unselectable="on" tabindex="0"><span id="button-1014-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Reload</span><span role="img" id="button-1014-btnIconEl" class="x-btn-icon-el icon-arrowrefresh " unselectable="on" style="">&nbsp;</span></a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-top-width: 1px; left: 0px; width: 1650px; top: 60px; height: 180px;" id="portlet-3-body" class="x-panel-body x-panel-body-default-framed x-layout-fit x-panel-body-default-framed"></div>
                                    </div>
                                    <div style="width: 1660px; height: 250px;" class="x-panel x-portlet x-panel-default-framed" id="portlet-4">
                                        <div style="width: 1660px; right: auto; left: -1px; top: -1px;" class="x-panel-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top" id="portlet-4_header">
                                            <div style="width: 1648px;" id="portlet-4_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default-framed x-panel-header-body-horizontal x-panel-header-body-default-framed-horizontal x-panel-header-body-top x-panel-header-body-default-framed-top x-panel-header-body-docked-top x-panel-header-body-default-framed-docked-top x-box-layout-ct x-panel-header-body-default-framed-horizontal x-panel-header-body-default-framed-top x-panel-header-body-default-framed-docked-top">
                                                <div style="width: 1648px; height: 16px;" id="portlet-4_header-innerCt" class="x-box-inner " role="presentation">
                                                    <div style="width: 20000px;" id="portlet-4_header-targetEl" class="x-box-target">
                                                        <div style="right: auto; left: 0px; top: 0px; margin: 0px; width: 1632px;" class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default-framed x-box-item x-component-default" unselectable="on" id="portlet-4_header_hd"><span id="portlet-4_header_hd-textEl" class="x-header-text x-panel-header-text" unselectable="on">Price Change Inbox</span></div>
                                                        <div class="x-tool x-box-item x-tool-default x-tool-after-title" style="width: 15px; height: 15px; right: auto; left: 1633px; top: 0px; margin: 0px;" id="tool-1020">
                                                            <img id="tool-1020-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-collapse-top" role="presentation"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="width: 1650px; right: auto; left: 4px; top: 29px;" class="x-toolbar x-docked x-toolbar-default x-docked-top x-toolbar-docked-top x-toolbar-default-docked-top x-box-layout-ct" id="toolbar-1015">
                                            <div style="width: 1630px; height: 20px;" id="toolbar-1015-innerCt" class="x-box-inner " role="presentation">
                                                <div style="width: 20000px;" id="toolbar-1015-targetEl" class="x-box-target">
                                                    <div class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left" style="border-width: 1px; right: auto; left: 0px; top: 0px; margin: 0px;" id="button-1016">
                                                        <div id="button-1016-btnWrap" class="x-btn-wrap" unselectable="on"><a id="button-1016-btnEl" class="x-btn-button" role="button" hidefocus="on" unselectable="on" tabindex="0"><span id="button-1016-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Reload</span><span role="img" id="button-1016-btnIconEl" class="x-btn-icon-el icon-arrowrefresh " unselectable="on" style="">&nbsp;</span></a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-top-width: 1px; left: 0px; width: 1650px; top: 60px; height: 180px;" id="portlet-4-body" class="x-panel-body x-panel-body-default-framed x-layout-fit x-panel-body-default-framed"></div>
                                    </div>
                                </div>
                            </span></div>
                        </div>
                    </span></div>
                </div>
            </div>
    
        </div>
        
    </section>
  8. #8
    When I set the .Html for the portlet the content loads within the portlet as expected but the partial view does not

    
        private string GetPortletHtml(string widgetName)
        {
            string html = "";
            var sb = new System.Text.StringBuilder();
    
            sb.Append("<div>");
            sb.Append("<p>" + widgetName + "</p>");
            sb.Append("<p>");
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("<br />");
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test"); 
            sb.Append("</p>");
            sb.Append("</div>");
    
            html = sb.ToString();
    
            return html;
        }
    
        private void InitPortlet(int currentColumn, PortalColumn portalColumn)
        {
            var layoutColumnCount = Model.CurrentLayout.ColumnCount;
            var widgets = Model.CurrentWidgets;
    
            foreach (var widget in widgets.Where(w => w.WidgetColumnPosition == currentColumn))
            {
                var widgetViewModel = CastWidgetModel(GetWidgetContent(widget.WidgetId));
                var portlet = new Ext.Net.Portlet.Builder();
    
                portlet = Html.X().Portlet()
                                .ID("portlet-" + widget.WidgetId)
                                // Load Partial
                                //.ContentFromPartial(widget.WidgetUrl, widgetViewModel)
                                .Html(GetPortletHtml(widget.WidgetName))
                                // Ext.Net - Complex
                                .Title(widget.WidgetName)
                                .Closable(false)
                                .Layout(LayoutType.Fit)
                                .Anchor("100% 50%")
                                .MinHeight(250)
                                .TopBar(new Toolbar { Items = { new Button { Text = "Reload", Icon = Icon.ArrowRefresh, OnClientClick = "alert('toolbar')" } }
                                });
                
                portalColumn.Items.Add(portlet);
            }
        }
  9. #9
    I also tried rendering a partial view to html string and call the .Html method of the portlet.

    This works and loads my partialview within the portlet container.

    However, when the partial view contains other Ext.Net controls I get a script error in firefox and the page stops loading

    Please help

    Thanks,
    Rob

    Error

    SyntaxError: missing } after property list
    ret = !!(window.WebGLRenderingContext && (canvas.getContext('experimental-webgl') || canvas.getContext('webgl')));
    Partial View with Ext.Net control

    
    @model PR.DTO.AlertsWidgetViewModelDTO
    
    <div id="widget-alerts" class="">
        <h3>Alerts Widget - WidgetId: @(Model.WidgetId)</h3>
        <p>
            This is where some alerts will go
        </p>
        <br />
        @(Html.X().Button().Icon(Icon.Application).Text("Ext.Net button - click").Handler("Ext.Msg.alert('Ext.NET button', 'Hello');"))
       
    </div>
    Main View

    
        private string GetWidgetPartialViewHtml(string widgetUrl, IWidgetWrapper widgetViewModel)
        {
            return Html.Partial(widgetUrl, widgetViewModel).ToHtmlString();
        }
    
        private void InitPortlet(int currentColumn, PortalColumn portalColumn)
        {
            var layoutColumnCount = Model.CurrentLayout.ColumnCount;
            var widgets = Model.CurrentWidgets;
    
            foreach (var widget in widgets.Where(w => w.WidgetColumnPosition == currentColumn))
            {
                var widgetViewModel = CastWidgetModel(GetWidgetContent(widget.WidgetId));
                var portlet = new Ext.Net.Portlet.Builder();
    
                portlet = Html.X().Portlet()
                                .ID("portlet-" + widget.WidgetId)
                                // Load Partial
                                //.ContentFromPartial(widget.WidgetUrl, widgetViewModel)
                                //.Html(GetPortletHtml(widget.WidgetName))
                                .Html(GetWidgetPartialViewHtml(widget.WidgetUrl, widgetViewModel))
                                // Ext.Net - Complex
                                .Title(widget.WidgetName)
                                .Closable(false)
                                .Layout(LayoutType.Fit)
                                .Anchor("100% 50%")
                                .MinHeight(250)
                                .TopBar(new Toolbar { Items = { new Button { Text = "Reload", Icon = Icon.ArrowRefresh, OnClientClick = "alert('toolbar')" } }
                                });
                
                portalColumn.Items.Add(portlet);
            }
        }
  10. #10
    Please provide a runnable simplified test case to reproduce the issue.

Similar Threads

  1. [CLOSED] Loading a partial view in Table Format
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 23, 2012, 12:44 PM
  2. [CLOSED] [2.1] MVC Partial View
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 23, 2012, 12:04 PM
  3. [CLOSED] Loading Partial View under a formpanel
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 25, 2012, 2:26 PM
  4. [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
  5. [CLOSED] Error loading partial view in Tab.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 20, 2011, 8:00 PM

Tags for this Thread

Posting Permissions