Problem with CascadeTo

[M]

Hello,

i have 4 Listboxes, the first Listbox Filled up with Initial Data:

<div class="listboxcontrol">
            <!--parent listbox element-->
            <ej:ListBox ID="MainDatabase" runat="server" ShowRoundedCorner="True" OnValueSelect="MainDatabase_ValueSelect">
                <Items>
                    <ej:ListBoxItems Id="Attributes" Text="Attribute">
                    </ej:ListBoxItems>
                    <ej:ListBoxItems Id="Blueprints" Text="Baupläne"></ej:ListBoxItems>
                </Items>
            </ej:ListBox>
        </div>

<div class="listboxcontrol">
            <!-- First level child listbox element-->
            <ej:ListBox ID="Groups" runat="server" ShowRoundedCorner="True" EmptyDataText=".."></ej:ListBox>
        </div>
        <div class="listboxcontrol">
            <!-- second level child listbox element-->
            <ej:ListBox ID="SubGroups" runat="server" ShowRoundedCorner="True" EmptyDataText="..."></ej:ListBox>
        </div>
        <div class="listboxcontrol">
            <!-- second level child listbox element-->
            <ej:ListBox ID="Entry" runat="server" ShowRoundedCorner="True" EmptyDataText="...."></ej:ListBox>
        </div>

Then i Load Data like that:

  protected void Page_Load(object sender, EventArgs e)
        {
            SwitchDatabase( Global._inst.ActiveDatabase );
        }

        private void SwitchDatabase(string database)
        {
            switch (database)
            {
                case "Attributes":

                    Global._inst.ActiveDatabase = "Attributes";

                    Groups.DataSource = Global.AttributeDatabase.AttributeGroups;
                    Groups.DataValueField = "GroupID";
                    Groups.DataTextField = "Name";
                    Groups.CascadeTo = "SubGroups";

                    SubGroups.DataSource = Global.AttributeDatabase.AttributeSubGroups;
                    SubGroups.DataValueField = "SubGroupID";
                    SubGroups.DataTextField = "Name";
                    SubGroups.CascadeTo = "Entry";
                    SubGroups.LoadDataOnInit = false;

                    Entry.DataSource = Global.AttributeDatabase.Attributes;
                    Entry.DataValueField = "AttributeID";
                    Entry.DataTextField = "Name";
                    Entry.LoadDataOnInit = false;

                    break;

                case "Blueprints":

                    Global._inst.ActiveDatabase = "Blueprints";

                    Groups.DataSource = Global.BlueprintDatabase.BlueprintGroups;
                    Groups.DataValueField = "GroupID";
                    Groups.DataTextField = "Name";
                    Groups.CascadeTo = "SubGroups";

                    SubGroups.DataSource = Global.BlueprintDatabase.BlueprintSubGroups;
                    SubGroups.DataValueField = "SubGroupID";
                    SubGroups.DataTextField = "Name";
                    SubGroups.CascadeTo = "Entry";
                    SubGroups.LoadDataOnInit = false;

                    Entry.DataSource = Global.BlueprintDatabase.Blueprints;
                    Entry.DataValueField = "BlueprintID";
                    Entry.DataTextField = "Name";
                    Entry.LoadDataOnInit = false;

                    break;

                default:
                    break;
            }
        }

        protected void MainDatabase_ValueSelect(object sender, Syncfusion.JavaScript.Web.ListBoxEventArgs e)
        {
            ListBox s = sender as ListBox;

            switch (s.SelectedItemIndex)
            {
                case 0:
                    SwitchDatabase( "Attributes" );
                    break;

                case 1:
                    SwitchDatabase( "Blueprints" );
                    break;

                default:
                    SwitchDatabase( "" );
                    break;
            }
        }

It work, but when i click the second or third or fourth and then in the first Listbox another entry, only the First Listbox are Shown after Postback.

I find out the other Listboxes are only Hidden but has Data.

What are the Problem, please help.

PS: i must use a Checkbox with AutoPostBack="True" to have an Event on the first Listbox to Show Data in the Second Listbox to use CascadeTo

Martin

[M]

In Firefox Developer Tools i find a Div ive never Created

<div class="listboxcontrol">           

<!-- First level child listbox element-->           

<div class="e-ddl-popup e-box e-popup e-widget e-wrap" style="visibility: hidden; height: 222px;" tabindex="0" id="Groups_container">

<div class="e-listbox-container">

<input id="Groups_hidden" name="Groups" type="hidden">

<ul id="Groups" class="e-listbox e-js e-ul" data-ej-unselectable="on" style="-moz-user-select: none;">

<li style="" class="e-select">AttributeGroup 0</li>

<li style="" value="1">AttributeGroup 1</li>

<li style="" value="2">AttributeGroup 2</li>

</ul>

</div>

</div>       

</div>

[Christopher Issac Sunder K]

Hi Martin, 

Thank you for contacting Syncfusion support. 

We are able to replicate the reported issue with the provided code. After validating, we found that model values like the value,selectedIndex, selectedItemIndex are still maintained for the first datasource(i.e for Attributes)which causes the script error. Hence we suggest you to clear all the model values when switching to the next datasource in the select event of the main Listbox. 

  <ej:ListBox ID="MainDatabase" runat="server" ShowRoundedCorner="True" OnValueSelect="MainDatabase_ValueSelect" ClientSideOnSelect="onselect"> 

 

</ej:ListBox> 

<script type="text/javascript"> 

 

 

 

        function onselect(e) { 

    

           var obj1= $('#Groups').ejListBox('instance'); 

           var obj2 = $('#SubGroups').ejListBox('instance'); 

           var obj3 = $('#Entry').ejListBox('instance'); 

 

           obj1.model.selectedIndex = null; 

           obj1.model.value = null; 

           obj1.model.selectedItemIndex = null 

           obj2.model.selectedIndex = null; 

           obj2.model.value = null; 

           obj2.model.selectedItemIndex = null 

           obj3.model.selectedIndex = null; 

           obj3.model.value = null; 

           obj3.model.selectedItemIndex = null 

        } 

    </script> 

Sample: https://www.syncfusion.com/downloads/support/forum/140491/ze/Web_ListBox390004801 

Please let us know if this is not helping you. 

Thanks,
Christo

[M]

Hi,

this worked for me!

Thanks for quick Reply.

Martin