Partially loading ext controls on browser.

[MOHAMMEDRAFI]

Hi All,
We are using Ext.Net version 2.1 in our MVC application(VS2017 4.0 framework). We have been experiencing issues while rendering Ext.Net controls. Ext.Net controls do not render properly why there are multiple ajax calls in the same page. Most of the time only the active controls/partial pages/tabs which are focussed render the controls properly with data that is returned by Ajax call. Other controls/partial pages/tabs do not render properly even though the Ajax calls succeed.
We have been experiencing this issue since Google Chrome released a patch recently. The patch is released on 8th Mar 2018. This is on Windows 10 Platform. The patch they released is Layout objects will no longer be created for children of display-none iframes. The version of Google Chrome is 65.0.3325.181 after this patch.
We tried the same web application on Windows 7 with Google Chrome and we did not come across any issue.
We tried the same web application on Windows 10 with previous version of Chrome (64.0.3282.186) and it worked perfectly fine.

So effectively rendering controls is failing in Windows 10 with latest Chrome(65.0.3325.181).

Below are the sample code.
This is main viewport under rendering another page.
@(
Html.X().Viewport()
.Layout("fit")
.ID("viewPortIndex")
.Anchor("100% 100%")
.Items(viewportitems =>
{
viewportitems.Add(
Html.X().TabPanel()
.ID("tpMain")
.Region(Ext.Net.Region.Center)
//.AutoScroll(true)
.Margins("0 0 0 0")
.Items(tabpanelitems =>
{
tabpanelitems.Add(
Html.GeneratePanel
(
"Data Information", string.Format("Job/Job/{0}/{1}?hashcode={2}&data={3}",
url,
Url.CurrentId(), Request.GetQueryHashCode(), jobStatusName),
"Loading Data Information...")
);

})
);
})

)

@using Ext.Net
@using Ext.Net.MVC
@using System.Web.Optimization
@model test.test2.testdomain.data1
@{
ViewBag.Title = "Manage Job";
Layout = "~/Views/Shared/_ExtLayout.cshtml";

if (Model != null)
{
Model.RevenueEstimate = decimal.Round(Model.RevenueEstimate, 2, MidpointRounding.AwayFromZero);
if (Model.RevenueEstimate == 0 && Model.JobStatusId == JobStatus.data) //Initialize the default value
{
Model.RevenueEstimate = 1000;
}
}
ClientEdit ClientEditReadOnly = new ClientEdit { IsReviewed = true, MllJobId = Model.Id };
ClientEdit ClientHistry = new ClientEdit { MllJobId = Model.Id };

if (ViewBag.ViewMode == 0 && ViewBag.CanView == 1 && ViewBag.ViewModePartial == 0)
{
ViewData["ReadOnly"] = true;
}
else
{
ViewData["ReadOnly"] = false;
}
var MenuElementId = Model.IsBackDatedJob == true ? "addeditbackdatedjob" : "addeditjob";

}
<link href="@Url.Content("~/Content/Widget.css")" rel="stylesheet" type="text/css" />
@using (Html.BeginForm())
{
<div class="column column-max">
<table width="980px">
@*<tr>
<td style="width:320px"></td>
<td style="width:10px"></td>
<td></td>
</tr>*@
<tr style="display: none">
<td colspan="3">

</td>
</tr>
<tr>

</tr>
<tr>
<td colspan="3" style="padding-left: 5px;">
@if (ViewBag.ViewMode == 0)
{
}
else
{
@Html.X().Toolbar().Items(toolbaritems =>
{
toolbaritems.Add(Html.X().ToolbarFill());
if (ViewBag.ViewMode == 1 || ViewBag.ViewModePartial == 1)
{
toolbaritems.Add(Html.X().Button().Text("Add additional recipient").ID("btnAddRecp").Icon(Ext.Net.Icon.App licationAdd)
.Listeners(listen => { listen.Click.Handler = "javascript:showAdditionalAccountContact();"; }));
if ((Model.JobStatusId == JobStatus.Clientdata || Model.JobStatusId == JobStatus.data))
{
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Discard data",
Icon = Icon.Delete,
Handler = string.Format("DiscarddataJob()")
}).ID("btnDiscardTop").Hidden(Model.Id == 0));
}

toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Save as data",
Icon = Icon.DatabaseSave,
Handler = string.Format("validateAccountHover('{1}',false, false,'{0}','{2}');", WorkFlowActions.SaveAsdata.ToString(),
(Model.JobStatusId == JobStatus.Clientdata ? "Clientdata" : "data"), Model.ClientJobAccount.Id)
}));
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Save as data and close",
Icon = Icon.DatabaseStart,
Handler = string.Format("validateAccountHover('{1}',true, false,'{0}','{2}');", WorkFlowActions.SaveAsdata.ToString(),
(Model.JobStatusId == JobStatus.Clientdata ? "Clientdata" : "data"),Model.ClientJobAccount.Id)
}));
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Save to calendar",
Icon = Icon.CalendarAdd,
Handler = string.Format("validateAccountHoverForCalendarSave ('{1}',true, true,'{0}','{2}');", WorkFlowActions.SaveToCalendar.ToString(),
(Model.JobStatusId == JobStatus.Clientdata ? "Clientdata" : "data"),Model.ClientJobAccount.Id)
}));
}
toolbaritems.Add(Html.X().ToolbarSeparator());
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Cancel",
Icon = Icon.Cancel,
Handler = string.Format("closeJobWindow('{0}');", Model.Id == 0 ? MenuElementId : "managejob")
}));
})
}
</td>
</tr>
<tr>
<td colspan="3">
<fieldset>
<legend style="font-weight: bold;">Primary Information</legend>
@Html.PartialPath(PartialPath.Job, "BasicJobInfo.Edit.Partial", Model)
<br />
</fieldset>
</td>
</tr>
@if (Model.Id != 0)
{
<tr class="ClientHistory">
<td colspan="3">
<fieldset>
<legend style="font-weight: bold;">Client Edit(s)</legend>
@Html.PartialPath(PartialPath.Job, "ClientHistory.Partial", ClientHistry)
<br />
</fieldset>
</td>
</tr>
}
<tr>
<td colspan="3">
<div style="width: 100%">
@Html.PartialPath(PartialPath.Service, "ServiceList.Partial", Model)
</div>
<br />
</td>
</tr>
<tr>
<td colspan="3">
@(Html.X().Panel().ID("ServiceDetailPanel")
.Layout(LayoutType.Fit).ManageHeight(true).Overflo wY(Overflow.Hidden).AutoScroll(false)
.Region(Ext.Net.Region.Center).MinHeight(500).Hidd en(true)
.Collapsible(false)
.Flex(1)
.Margins("0 0 0 0")
.Border(false)
)
</td>
</tr>
<tr>
<td colspan="3">

<br />
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 45%; vertical-align: top;">
<fieldset>
<legend style="font-weight: bold;">Case Information</legend>
@Html.PartialPath(PartialPath.Job, "CaseInfo.Edit.Partial", Model)
</fieldset>
</td>
<td style="width: 55%; vertical-align: top;">
<fieldset>
<legend style="font-weight: bold;">Location Information</legend>
@Html.PartialPath(PartialPath.Job, "LocationInfo.Edit.Partial", Model)
@Html.X().Container().ID("LocationContainer")
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
@Html.PartialPath(PartialPath.Deponent, "test2.Partial", Model.JobWitnessesList)
<br />
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 50%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
@Html.PartialPath(PartialPath.Job, "test4.Partial", Model.JobFileList)
</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div class="editor-label">@Html.Label("Internal data Notes")</div>
@{
Model.Notes = string.IsNullOrEmpty(Model.Notes) ? "" : Model.Notes.ToString().Replace(";", "\n");
}
@Html.TextAreaFor(model => model.Notes, new { style = "width:98%;height:80px; padding:4px" })
<br />
@Html.ValidationMessageFor(model => model.Notes)
</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div class="editor-label">@Html.Label("Gatekeeper Notes")</div>
@Html.TextAreaFor(model => model.GatekeeperNotes, new { style = "width:98%;height:80px; padding:4px" })
<br />
@Html.ValidationMessageFor(model => model.GatekeeperNotes)
</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div class="editor-label">@Html.Label("Notes to Ordered By Contact")</div>
@Html.TextAreaFor(model => model.ClientNotes, new { style = "width:98%;height:80px; padding:4px" })
<br />
@Html.ValidationMessageFor(model => model.ClientNotes)
</td>
</tr>
<tr>
<td style="padding-left: 5px;">

<div class="editor-label">@Html.X().Label().Html(fieldLable)</div>
@Html.TextAreaFor(model => model.AdditionalNotes, new { style = "width:98%;height:80px; padding:4px", Readonly = "true" })
<br />
@Html.HiddenFor(model => model.NumberOfPeople)
</td>
</tr>
</table>
</td>
<td style="width: 50%; vertical-align: top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
@Html.PartialPath(PartialPath.Job, "CustomFieldList.Partial", Model.JobCustomFieldList, new ViewDataDictionary { { "viewJobSourceName", Model.JobSource.Name }, { "viewJobStatusId", Model.JobStatusId } })
@Html.X().Hidden().ID("JobCustomFieldList")
@Html.X().Hidden().ID("JobCustomFieldRemoveList")
</td>
</tr>
<tr>
<td style="padding: 5px;">
@Html.X().Panel().Border(false).ItemsFromPartial(" ManageSalesRep")
</td>
</tr>
<tr>
<td style="padding: 5px;">
@Html.X().Panel().Border(false).ItemsFromPartial(" Shared/AdditionalRecipient.Partial")
</td>
</tr>
</table>
</td>
</tr>
@*<tr>

</tr>*@
</table>
</td>
</tr>
@if (Model.Id != 0)
{
<tr>
<td colspan="3">
<fieldset style="border: 0px;">
@Html.PartialPath(PartialPath.Job, "CancellationSummary.Partial")
</fieldset>
</td>
</tr>
<tr>
<td colspan="3">
<fieldset style="border: 0px;">
@Html.PartialPath(PartialPath.Job, "ClientHistoryReadOnly.Partial", ClientEditReadOnly)
</fieldset>
</td>
</tr>
}
<tr>
<td colspan="3" style="padding-left: 5px;">
<br />
@if (ViewBag.ViewMode == 0 && ViewBag.ViewModePartial == 0 && (Model.JobStatusId != JobStatus.data && Model.JobStatusId != JobStatus.Clientdata))
{
}
else
{
@Html.X().Toolbar().Items(toolbaritems =>
{
toolbaritems.Add(Html.X().ToolbarFill());
if (ViewBag.ViewMode == 1 || ViewBag.ViewModePartial == 1)
{
if ((Model.JobStatusId == JobStatus.Clientdata || Model.JobStatusId == JobStatus.data))
{
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Discard data",
Icon = Icon.Delete,
Handler = string.Format("DiscarddataJob()")
}).ID("btnDiscard").Hidden(Model.Id == 0));
}

toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Save as data",
Icon = Icon.DatabaseSave,
Handler = string.Format("validateAccountHover('{1}',false, false,'{0}','{2}');", WorkFlowActions.SaveAsdata.ToString(),
(Model.JobStatusId == JobStatus.Clientdata ? "Clientdata" : "data"), Model.ClientJobAccount.Id)
}));
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Save as data and close",
Icon = Icon.DatabaseStart,
Handler = string.Format("validateAccountHover('{1}',true, false,'{0}','{2}');", WorkFlowActions.SaveAsdata.ToString(),
(Model.JobStatusId == JobStatus.Clientdata ? "Clientdata" : "data"), Model.ClientJobAccount.Id)
}));
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Save to calendar",
Icon = Icon.CalendarAdd,
Handler = string.Format("validateAccountHoverForCalendarSave ('{1}',true, true,'{0}','{2}');", WorkFlowActions.SaveToCalendar.ToString(),
(Model.JobStatusId == JobStatus.Clientdata ? "Clientdata" : "data"), Model.ClientJobAccount.Id)
}));
toolbaritems.Add(Html.X().ToolbarSeparator());
toolbaritems.Add(@Html.X().Button(new Button.Config
{
Text = "Cancel",
Icon = Icon.Cancel,
Handler = string.Format("closeJobWindow('{0}');", Model.Id == 0 ? MenuElementId : "managejob")
}));
}
})
}
</td>
</tr>
</table>
</div>

}