Partially loading ext controls on browser.

  1. #1

    Partially loading ext controls on browser.

    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>

    }
    Last edited by MOHAMMEDRAFI; Apr 04, 2018 at 9:20 AM.
  2. #2

    Sample application to replicate the issue

    I have created a sample test application to reproduce this issue.

    Please find below link
    https://github.com/vinaymadupathi/Sa...otLoadingIssue

    Steps to reproduce :-
    1. Run application
    2. While two tabs are in progress of loading, switch between the tabs.
    3. Observe that few controls are partially rendered in any one of the tab.

    Attached screenshots showing the same.
    Attached Thumbnails Click image for larger version. 

Name:	Controls_Disappered.png 
Views:	70 
Size:	46.3 KB 
ID:	25142   Click image for larger version. 

Name:	AfterReloadFrame.png 
Views:	51 
Size:	56.7 KB 
ID:	25143  
  3. #3
    Hello @MOHAMMEDRAFI!

    Please wrap your code blocks within [code][/code] tags, it is very hard to even look at the code like that.

    The project you provided simply does not load in Visual Studio; also 2017. Says the project file has errors and refuses to load, besides, it is a bit strange, the solution (.sln) file is within the project directory and not the project's root?..

    Besides, your project references Ext.NET 4.2.0, we're currently at 4.5.1, so try upgrading it to 4.5.1 if you want us to consider it (as the bug might already be fixed to the latest version).

    We may take a look at the code sample you provided if you could review your first post. But I strongly advise you to read our forums guidelines on posting new threads, the tips there helps a lot in "helping us help you" when you post inquiries:

    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Ext.Net controls sending a lot of data to browser
    By dkhandelwal in forum 2.x Help
    Replies: 4
    Last Post: Mar 09, 2016, 11:55 AM
  2. Replies: 1
    Last Post: Feb 04, 2015, 2:40 PM
  3. [CLOSED] Slow loading of image from browser cache
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 06, 2012, 11:52 AM
  4. [CLOSED] Loading data in store take too long. browser hangs.
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 21
    Last Post: Nov 22, 2011, 8:42 AM
  5. Replies: 0
    Last Post: Jan 05, 2011, 6:48 AM

Posting Permissions