PDA

View Full Version : [CLOSED] How to reload specific tab content in tabpanel at client side?



alscg
Jun 17, 2013, 6:16 AM
I have tab panel as below



@(Html.X().TabPanel().ID("tabPnlGoalManager").Padding(0).Listeners(ls => ls.TabChange.Fn = "HideGlobalSaveButton")
.Height(550)//.ActiveTabIndex(2)
.Items(Html.X().Panel().ID("pnlTextView").Title("Text View")
.Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
.Url(Url.Action("GoalTextView", "Talent"))
.Mode(LoadMode.Frame)
.Params(new { id = Session["GoalID"] })
)
),
Html.X().Panel().ID("pnlDiagramView").Title("Diagram View")
.Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
.Url(Url.Action("GoalObjectHierarchy", "Talent"))
.Mode(LoadMode.Frame)
.Params(new { id = Session["GoalID"] })
)
),
Html.X().Panel().ID("pnlLinkedHierarchies").Title("Linked Hierarchies")
.Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
.Url(Url.Action("LinkedHierarchies", "Talent"))
.Mode(LoadMode.Frame)
.Params(new { id = Session["GoalID"] })
)
),
Html.X().Panel().ID("pnlLinkedProjects").Title("Linked Projects")
.Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
.Url(Url.Action("LinkedProjects", "Talent"))
.Mode(LoadMode.Frame)
.Params(new { id = Session["GoalID"] })
)
)
)
)


And there is tab change event like below



var HideGlobalSaveButton = function () {
var activeTab = App.tabPnlGoalManager.getActiveTab().id;
if (activeTab != "pnlTextView" && activeTab != "pnlDiagramView") {
$("#Container_RouteGoalSave").css("display", "none");
}
else if (activeTab == "pnlTextView") {
$("#Container_RouteGoalSave").css("display", "");
}
else {
$("#Container_RouteGoalSave").css("display", "");
}
}


Now I want to reload first tab(id with "pnlTextView") content when ever user come to this tab.
Please suggest a way to achieve this.

Daniil
Jun 17, 2013, 7:04 AM
Hi @alscg,

You can call a Panel's reload method.

panel.reload();

alscg
Jun 17, 2013, 12:09 PM
Hi @alscg,

You can call a Panel's reload method.

panel.reload();


I have modified tab change event handler as below. The newly added line of code is in bold and italic.


var HideGlobalSaveButton = function () {
var activeTab = App.tabPnlGoalManager.getActiveTab().id;
if (activeTab != "pnlTextView" && activeTab != "pnlDiagramView") {
$("#Container_RouteGoalSave").css("display", "none");
}
else if (activeTab == "pnlTextView") {
$("#Container_RouteGoalSave").css("display", "");

Ext.getCmp('pnlTextView').reload();
}
else {
$("#Container_RouteGoalSave").css("display", "");
}
}


Now, when clicked on that first tab(with Id with 'pnlTextView') I am receiving below error


0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'load': object is null or undefined.

Daniil
Jun 17, 2013, 2:26 PM
A Loader is defined for the tab's Container, not for the tab itself. So, please try:

Ext.getCmp('pnlTextView').items.getAt(0).reload();

alscg
Jun 18, 2013, 5:50 AM
A Loader is defined for the tab's Container, not for the tab itself. So, please try:

Ext.getCmp('pnlTextView').items.getAt(0).reload();


Thank you for your support...Its working now. this thread can be closed.