[CLOSED] Tabpanel with partial views, Panel gets blanked

  1. #1

    [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
    
    @{
        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))
                             )
                         )
                    )
              )
        ))
    Attached Thumbnails Click image for larger version. 

Name:	firstTab.PNG 
Views:	36 
Size:	33.7 KB 
ID:	11741   Click image for larger version. 

Name:	secondTab.PNG 
Views:	39 
Size:	32.0 KB 
ID:	11751   Click image for larger version. 

Name:	firstTabBlanked.PNG 
Views:	34 
Size:	9.3 KB 
ID:	11761  
    Last edited by Daniil; Jun 10, 2014 at 6:16 AM. Reason: [CLOSED]
  2. #2
    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

Similar Threads

  1. [CLOSED] Window in Partial Views
    By Istofix in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 06, 2014, 4:18 PM
  2. Multiple IDs and partial views clarification
    By millenovanta in forum 2.x Help
    Replies: 2
    Last Post: Dec 03, 2012, 11:52 AM
  3. [CLOSED] [Razor] using partial views
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 25, 2012, 10:40 AM
  4. [CLOSED] Switching between partial views on a tree panel
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 24, 2011, 1:04 PM
  5. Replies: 0
    Last Post: Oct 15, 2009, 7:07 AM

Tags for this Thread

Posting Permissions