[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 :
http://forums.ext.net/attachment.php...id=11741&stc=1

second tab loaded
http://forums.ext.net/attachment.php...id=11751&stc=1


first tab gets blanked
http://forums.ext.net/attachment.php...id=11761&stc=1



Here's the code for Index.cshtml

Code:

---


@{
    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

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))
                        )
                    )
                )
          )
    ))

---

Hi @PriceRightHTML5team,

I think it happens because the partial view's components are being rendered with the same ids. If you render the same partial view multiple times, you should not use IDs inside that partial view. Here is a related discussion:
http://forums.ext.net/showthread.php?25002