PDA

View Full Version : [CLOSED] Loading Partial View within a Portlet



PriceRightHTML5team
Jul 09, 2013, 5:36 PM
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(ResourceLoc ationType.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>

Vladimir
Jul 09, 2013, 5:57 PM
ItemsFromPartial works with Ext.Net widgets only
Please use ContentFromPartial

PriceRightHTML5team
Jul 09, 2013, 7:07 PM
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.ManagerCon fig as MvcResourceManagerConfig).RenderStyles(ResourceLoc ationType.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>

Vladimir
Jul 09, 2013, 7:20 PM
Are you sure that button is not rendered? Try to set enough height for portlets

PriceRightHTML5team
Jul 09, 2013, 10:00 PM
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;
}

}

Daniil
Jul 10, 2013, 4:34 PM
This helps.

portletBuilder.AutoDoLayout(true);

However, be careful with this setting, because it can slow down initial rendering.

PriceRightHTML5team
Jul 12, 2013, 8:54 PM
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(ResourceLoc ationType.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>

PriceRightHTML5team
Jul 12, 2013, 9:44 PM
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);
}
}

PriceRightHTML5team
Jul 12, 2013, 10:13 PM
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);
}
}

Daniil
Jul 15, 2013, 5:14 AM
Please provide a runnable simplified test case to reproduce the issue.