Jun 02, 2014, 5:53 AM
[CLOSED] Tabpanel with partial views, Panel gets blanked
Hi,
My Configuration is :
Ext.net version : 2.2.0.26551
Ext.net runtime version : 4.0.30319
Ext.net.Utilities version : 2.2.0.0
Ext.net.Utilities runtime version : 2.0.50727
OS : Windows 7 professional
.Net Framework : 4.5
I am creating a page (index view) having two tabs (each represented by a Panel) for which I am using TabPanel of ext.net, each tab shares a common partial view,
the problem is,
At first load the first tab gets loaded correctly, when second tab is clicked its content gets loaded correctly too, but when first tab is clicked again, it gets blanked, also whenever second tab is clicked it always requests data from server, where I need this to be done only once, and just shown and hidden later.
First tab loaded correctly :
second tab loaded
first tab gets blanked
Here's the code for Index.cshtml
My Configuration is :
Ext.net version : 2.2.0.26551
Ext.net runtime version : 4.0.30319
Ext.net.Utilities version : 2.2.0.0
Ext.net.Utilities runtime version : 2.0.50727
OS : Windows 7 professional
.Net Framework : 4.5
I am creating a page (index view) having two tabs (each represented by a Panel) for which I am using TabPanel of ext.net, each tab shares a common partial view,
the problem is,
At first load the first tab gets loaded correctly, when second tab is clicked its content gets loaded correctly too, but when first tab is clicked again, it gets blanked, also whenever second tab is clicked it always requests data from server, where I need this to be done only once, and just shown and hidden later.
First tab loaded correctly :
second tab loaded
first tab gets blanked
Here's the code for Index.cshtml
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
var X = Html.X();
}
@Html.X().ResourceManager()
<script>
var cumulativeTab = function ()
{
//App.RevenueTrendCumulativeContainer.removeAll();
var action = '@( Url.Action("LoadRereferecingRules", "ReferenceRules"))';
Ext.net.DirectMethod.request({
url: action,
json: true,
eventMask: { showMask: true },
params: {
containerId: 'RevenueTrendCumulativeContainer'
}
});
}
</script>
@(X.TabPanel()
.ID("tabPanelReferenceRules")
.ActiveTabIndex(0)
.Width(1400)
.MinHeight(1000)
.Plain(true)
.Items(
X.Panel()
.ID("pnlInitialRules")
.Title("Initial Reference Rules")
.ContentFromAction("LoadRereferecingRules", new { containerId = "pnlInitialRules" })
.BodyPadding(6)
.AutoScroll(true),
X.Panel()
.ID("pnlRereferencingRules")
.Title("Re-Referencing Rules")
.BodyPadding(6)
.AutoScroll(true)
.Listeners(ls => ls.Activate.Fn = "cumulativeTab")
.Items(
Html.X().Container().ID("RevenueTrendCumulativeContainer").DefaultAnchor("100%").Layout(LayoutType.Fit)
//.Loader(X.ComponentLoader()
// .Url(Url.Action("LoadRereferecingRules"))
// .LoadMask(m => m.ShowMask = true)
// .Params(new Parameter("containerId", "RevenueTrendCumulativeContainer"))
// )
)
))
Here's my partial view's code@model PR.LS.DTO.ViewModels.ReferenceRulesViewModel
@{
var X = @Html.X();
}
<style type="text/css">
div#pnlOptions {
border-width: 0 0 1px 0;
border-style: solid;
border-color: black;
}
li.colorgreen {
color: green;
}
</style>
<script type="text/javascript">
var searchText = function (textBox) {
var term = textBox.value,
id = textBox.id,
ulsOfItems = $('#itemSelectorCountries ul.x-list-plain'),
srchKeyword = "\\b" + term.toUpperCase() + ".*\\b",
srchRegEx = new RegExp(srchKeyword);
if (id.toLowerCase() == 'txtsearchavail') {
var ul = $(ulsOfItems[0]),
lis = ul.find('li');
if (term != '') {
lis.removeClass('x-boundlist-selected');
lis.each(function (index) {
var li = $(this),
text = li.text().toUpperCase();
if (text.match(srchRegEx)) {
li.attr('class', li.attr('class') + ' ' + 'x-boundlist-selected');
ul.animate({
scrollTop: li.position().top
}, 'slow');
ul.scrollTop(li.position().top);
return false;
}
});
}
else {
lis.removeClass('x-boundlist-selected');
}
}
else {
var ul = $(ulsOfItems[1]),
lis = ul.find('li');
if (term != '') {
lis.removeClass('x-boundlist-selected');
lis.each(function () {
var li = $(this),
text = li.text();
if (text.match(srchRegEx)) {
li.attr('class', li.attr('class') + ' ' + 'x-boundlist-selected');
return false;
}
});
}
else {
lis.removeClass('x-boundlist-selected');
}
}
};
var clearList = function (textBox) {
var id = textBox.id,
ulsOfItems = $('#itemSelectorCountries ul.x-list-plain');
if (id.toLowerCase() == 'txtsearchavail') {
var ul = $(ulsOfItems[0]),
lis = ul.find('li');
lis.removeClass('x-boundlist-selected');
} else {
var ul = $(ulsOfItems[1]),
lis = ul.find('li');
lis.removeClass('x-boundlist-selected');
}
};
var expandCollapsePanels = function () {
App.pnlReferencedCountries.toggleCollapse();
App.pnlRules.toggleCollapse();
App.pnlPriceType.toggleCollapse();
App.pnlUpdateFrequency.toggleCollapse();
App.pnlSKUPrices.toggleCollapse();
App.pnlRefereceLags.toggleCollapse();
};
var rdbRuleTypeChanged = function (option, oldValue, newValue) {
var RULE_TYPE_CD = Ext.getCmp('rdbListRuleTypes').getChecked()[0];
var dataTypeCode = $(RULE_TYPE_CD.bodyEl.query('input')[0]).attr('data-typecode');
var dataIsRequiredLowestOfN = $(RULE_TYPE_CD.bodyEl.query('input')[0]).attr('data-isrequiredlowestofn');
var dataIsRequiredFormula = $(RULE_TYPE_CD.bodyEl.query('input')[0]).attr('data-isrequiredformula');
var pnlOptions = $('div#pnlOptions').find('input[type=text][data-typecode=' + dataTypeCode + ']');
var pnlExpressions = $('div#pnlExpression');
var dataTypeCodeText = pnlOptions.attr('data-typecode');
$('div#pnlOptions').find('input[type=text][data-typecode]').css('visibility', 'hidden');
if (dataIsRequiredLowestOfN.toLowerCase() == 'true') {
pnlOptions.css('visibility', 'visible');
}
pnlExpressions.css('visibility', 'hidden');
if (dataIsRequiredFormula.toLowerCase() == 'true') {
pnlExpressions.css('visibility', 'visible');
}
};
</script>
@(X.ButtonGroup().ID("btnGroup").ButtonAlign(Alignment.Left).Buttons(X.Button().ID("btnBack").Text("<< Back"),
X.Button().ID("btnReset").Text("Reset"),
X.Button().ID("btnRestoreDefault").Text("Restore Default"),
X.Button().ID("btnSave").Text("Save"),
X.Button().ID("btnRestoreAndSaveDefault").Text("Restore & Save Default - All Countries"))
.Items(X.Button().ID("btnExpCollapse").Text("Expand/Collapse All").Listeners(ls => ls.Click.Fn = "expandCollapsePanels")))
<br />
<br />
@(X.Container().ID("pnlCountries")
.Flex(1)
.Padding(30)
.Width(950)
.AutoScroll(true)
.Layout(LayoutType.HBox).Items(X.ComboBoxFor(m => m.Countries)
.ID("cmbCountries")
.DisplayField("Text")
.ValueField("Value")
.Store(X.Store().Model(X.Model().Fields(new ModelField("Text"), new ModelField("Value"), new ModelField("IsRulePresent"))).DataSource(Model.Countries))
.Text("--Select--")
.PaddingSpec("1px, 30px, 1px, 1px")
.EmptyText("Select a country")
.EmptyValue("")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ListConfig(X.BoundList()
.ID("ulComboCountries")
.Tpl(X.XTemplate().Html(@" <ul class='x-list-plain'>
<tpl for='.'>
<li role='option' class='x-boundlist-item <tpl if='IsRulePresent'>colorgreen</tpl>'>
{Text}
</li>
</tpl>
</ul>"))),
X.Checkbox().ID("chkNoRefRuleApplied").PaddingSpec("1px, 10px, 1px, 1px"),
X.Label().Text("No Reference Rule Applied (Check to remove reference rules)")))
<br />
<br />
@(X.FormPanel()
.ID("frmReferenceRules")
.Width(1200)
.Border(false)
.Flex(1)
.BodyPadding(0)
.Items(
X.Panel()
.Collapsible(true)
.ID("pnlReferencedCountries")
.Title("Referenced Countries")
.MarginSpec("0px 0px 50px 0px")
.Layout(LayoutType.HBox)
.Items(
X.Panel().Border(false).Width(630).Layout(LayoutType.Container).Items(
X.Panel().Border(false).PaddingSpec("50px 1px 1px 29px").Width(630).Layout(LayoutType.Column).Items(
X.TextField().ID("txtSearchAvail").Width(200).Listeners(ls => ls.Change.Fn = "searchText").Listeners(l => l.Blur.Fn = "clearList"),
X.TextField().ID("txtSearchSelected").Width(200).PaddingSpec("1px 1px 1px 116px").Listeners(ls => ls.Change.Fn = "searchText").Listeners(l => l.Blur.Fn = "clearList")
),
X.ItemSelector()
.Padding(30)
.Width(600)
.Height(225)
.ID("itemSelectorCountries")
.AllowBlank(false)
.Buttons(new ItemSelectorButton[] { ItemSelectorButton.Add, ItemSelectorButton.Remove })
.FromTitle("Country List")
.ToTitle("Referenced Countries")
.Store(X.Store().Model(X.Model().Fields(new ModelField("Text"), new ModelField("Value"))).DataSource(Model.Countries))
.DisplayField("Text")
.ValueField("Value")
.SelectedItems((from c in Model.ReferencedCountries select new ListItem() { Value = c.Value }).ToList())
.SingleSelect(true)
),
X.Panel().Border(false).Width(630).PaddingSpec("50px 1px 1px 29px").Layout(LayoutType.Container).Items(
X.Label("Referencing Countries").PaddingSpec("1px 1px 8px 29px"),
X.MultiSelectFor(m => m.Countries)
.Padding(20)
.FieldLabel("")
.Store(X.Store().Model(X.Model().Fields(new ModelField("Text"), new ModelField("Value"), new ModelField("IsRulePresent"))).DataSource(Model.ReferencingCountries))
.Width(200)
.Height(225)
.Padding(30)
.SingleSelect(true)
.DisplayField("Text")
.ValueField("Value")
)
),
X.Panel()
.Collapsible(true)
.ID("pnlRules")
.MarginSpec("0px 0px 50px 0px")
.Title("Rule Types")
.Layout(LayoutType.Column)
.Items(
X.Panel().Layout(LayoutType.Container).Border(false).Items(
X.Panel().ID("pnlOptions").Width(260).Border(false).PaddingSpec("20px 20px 2px 20px").Layout(LayoutType.Column).Items(
X.RadioGroup()
.ID("rdbListRuleTypes")
.GroupName("rdbGroupRuleTypes")
.Vertical(true)
.ColumnsNumber(1)
.Items(from c in Model.AllRuleTypes select new Ext.Net.Radio() { ID = c.Value +"_rule", Name = c.Text, InputAttrTpl = X.XTemplate().Html("data-typecode=" + c.Value + " " + "data-isrequiredlowestofn=" + c.IsRequiredLowestOfN + " " + "data-isrequiredformula=" + c.IsRequiredFormula), BoxLabel = c.Text, Checked = c.IsSelected })
.Listeners(l => l.Change.Fn = "rdbRuleTypeChanged"),
X.Container().ID("divTextFieldsRepeater").Layout(LayoutType.VBox).ItemsFromPartial("_RadioTextFields", Model.AllRuleTypes)
).Listeners(ls => ls.AfterRender.Fn = "rdbRuleTypeChanged"),
X.TextField().ID("txtRate").FieldLabel("Mark-down Rate (in %):").PaddingSpec("10px 0px 5px 20px"),
X.Label("Enter negative values for mark-up rate").PaddingSpec("5px 0px 30px 20px"),
X.Panel().Width(0).Border(false).Items(X.TextField().Flex(1).Width(50).ID("txtIsRequiredLowestOfN").MarginSpec("1px 0px 0px 0px"))
),
X.Panel().ID("pnlExpression").Border(false).Layout(LayoutType.VBox).Items(
X.TextArea().ID("txtExpression").PaddingSpec("50px 0px 0px 10px").Height(100).Width(340),
X.Button().ID("btnParse").Text("Parse").MarginSpec("0px 0px 30px 10px")).Hidden(false)
),
X.Panel()
.Collapsible(true)
.ID("pnlPriceType")
.Title("Price Type")
.MarginSpec("0px 0px 50px 0px")
.Layout(LayoutType.Container)
.Items(
X.RadioGroup()
.ID("rdbListPriceType")
.GroupName("rdbGroupPriceTypes")
.Vertical(true)
.PaddingSpec("20px 20px 20px 20px")
.ColumnsNumber(1)
.Items(from c in Model.AllPriceTypes select new Ext.Net.Radio() { ID = c.Value + "_price", BoxLabel = c.Text, Name = c.Text, Checked = c.IsSelected })
),
X.Panel()
.Collapsible(true)
.ID("pnlUpdateFrequency")
.MarginSpec("0px 0px 50px 0px")
.Title("Update Frequency")
.Layout(LayoutType.VBox)
.Items(
X.Container()
.ID("contMonths")
.Layout(LayoutType.Container)
.Padding(30)
.Items(
X.Panel()
.ID("pnlMonths")
.Border(false)
.PaddingSpec("0px 0px 30px 0px")
.Layout(LayoutType.HBox)
.Items(
X.Label("Update Frequency (in months):").PaddingSpec("0px 25px 0px 0px"),
X.ComboBox().ID("cmbMonths").Editable(false).Items(
new ListItem("-- Select --", 0),
new ListItem("6", 1),
new ListItem("12", 0)
)
),
X.Panel()
.ID("pnlDates")
.Border(false)
.Layout(LayoutType.VBox)
.Items(
X.Label("Update Start/End Dates:").PaddingSpec("0px 0px 30px 0px"),
X.Panel()
.Border(false)
.ID("pnlDateFields")
.Layout(LayoutType.HBox)
.Items(
X.DateField().ID("dtFrom").Format("dd.MM.yyyy").PaddingSpec("0px 25px 0px 0px"),
X.Label("To").PaddingSpec("0px 10px 0px 0px"),
X.DateField().ID("dtTo").Format("dd.MM.yyyy").PaddingSpec("0px 20px 0px 0px")
)
)
)
).Hidden(Model.Tab != PR.LS.DTO.ViewModels.TabType.ReReferencingRules),
X.Panel()
.Collapsible(true)
.ID("pnlSKUPrices")
.Title("Rule to combine SKU prices to product level")
.MarginSpec("0px 0px 50px 0px")
.Layout(LayoutType.Container)
.Items(
X.Container()
.ID("contSKUPrices")
.Layout(LayoutType.Container)
.Padding(30)
.Items(
X.Panel()
.Border(false)
.ID("pnlSKUPricesOptions")
.Layout(LayoutType.VBox)
.Items(
X.RadioGroup()
.ID("rdbListCombinedType")
.GroupName("rdbGroupCombinedTypes")
.Vertical(true)
.PaddingSpec("20px 20px 20px 20px")
.ColumnsNumber(1)
.Items(from c in Model.AllCombinedTypes select new Ext.Net.Radio() { ID = c.Value + "_combined", BoxLabel = c.Text, Name = c.Text, Checked = c.IsSelected })
)
)
),
X.Panel()
.Collapsible(true)
.ID("pnlRefereceLags")
.Title("Reference Lags")
.Layout(LayoutType.Container)
.MarginSpec("0px 0px 50px 0px")
.Items(
X.Container()
.ID("contReferenceLags")
.Layout(LayoutType.Container)
.Padding(30)
.Items(
X.Panel()
.ID("pnlReferenceLagsContent")
.Border(false)
.Layout(LayoutType.VBox)
.Items(
X.Panel()
.Layout(LayoutType.HBox)
.Border(false)
.PaddingSpec("0px 0px 15px 0px")
.Items(
X.Label("Effectiveness Lag(default = 1 month)").PaddingSpec("0px 20px 0px 0px"),
X.TextField().ID("txtEffectivenessLag").Width(40)
).Hidden(Model.Tab != PR.LS.DTO.ViewModels.TabType.ReReferencingRules),
X.Panel()
.Border(false)
.Layout(LayoutType.HBox)
.Items(
X.Label("Back Reference Lag(default = 1 month)").PaddingSpec("0px 20px 0px 0px"),
X.TextField().ID("txtBackReferenceLag").Width(40).Text(Convert.ToString(Model.BackReferenceLagMonths))
)
)
)
)
))
Last edited by Daniil; Jun 10, 2014 at 5:16 AM.
Reason: [CLOSED]