[Solved] 'Prometheus' ComboBox Freezes

[Venu Daroju]

Hi

I am using asp: ScriptManager and UpdatePanel control and under this updatepanel i have placed 3 'Promitheus' version ComboBoxes(DistrictList, SchoolsList and TeachersList) all ComboBoxe's data sources is bind at code behind. 

and bussiness logic is : upon selection of District trigger the event to get school list and upon selection of school trigger event to get teachers list.

Bussiness logic works very greate, but the thing is some times combobox freezes/locks the browser for more than half a minute,

Design Code :

<table>
                <tr>
                    <td class="AdminLabels">
                        LEA:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="ddlLEA" runat="server" AutoPostBack="True" MarkFirstMatch="True"
                            NoWrap="True" OnSelectedIndexChanged="ddlLEA_SelectedIndexChanged" Skin="Default"
                            Width="480px" Height="500px">
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                            <ExpandAnimation Type="OutQuart"></ExpandAnimation>
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: top">
                        <div class="floatLeft">
                            <div class="AdminLabels">
                                School:
                            </div>
                            <div class="AdminLabels">
                                Acadamic Year:
                            </div>
                            <div class="AdminLabels">
                                Are you a TITLE I School:
                            </div>
                            <div class="AdminLabels">
                                Teacher List:
                            </div>
                        </div>
                    </td>
                    <td style="vertical-align: top">
                        <div>
                            <asp:UpdatePanel ID="updtpnlSchools" runat="server">
                                <ContentTemplate>
                                    <div class="AdminLabels">
                                        <telerik:RadComboBox ID="ddlSchool" runat="server" Width="480px" AutoPostBack="True"
                                            MarkFirstMatch="True" NoWrap="True" OnSelectedIndexChanged="ddlSchool_SelectedIndexChanged"
                                            Skin="Default" AllowCustomText="True" Height="500px">
                                            <CollapseAnimation Duration="200" Type="OutQuint" />
                                            <ExpandAnimation Type="OutQuart" />
                                        </telerik:RadComboBox>
                                    </div>
                                    <div class="AdminLabels">
                                        <telerik:RadComboBox ID="ddlFiscalYear" runat="server" Width="75px" DataSourceID="SqlDataSource_FiscalYears"
                                            DataTextField="FiscalYear" DataValueField="FiscalYear" AutoPostBack="True" MarkFirstMatch="True"
                                            NoWrap="True" Skin="Default"
                                            onselectedindexchanged="ddlFiscalYear_SelectedIndexChanged" Height="200px">
                                            <CollapseAnimation Duration="200" Type="OutQuint" />
                                            <ExpandAnimation Type="OutQuart" />
                                        </telerik:RadComboBox>
                                    </div>
                                    <div class="AdminLabels">
                                        <telerik:RadComboBox ID="ddlTitleone" runat="server" MarkFirstMatch="True"
                                            NoWrap="True" Width="75px" Height="250px" RadComboBoxImagePosition="Right">
                                            <Items>
                                            <telerik:RadComboBoxItem Value="--?--" Text="--?--" />
                                            <telerik:RadComboBoxItem Value="N" Text ="No" />
                                            <telerik:RadComboBoxItem Value="Y" Text ="Yes" />

                                            </Items>
                                            <CollapseAnimation Duration="200" Type="OutQuint" />

                                            <ExpandAnimation Type="OutQuart" />
                                        </telerik:RadComboBox>
                                    </div>
                                    <div class="AdminLabels floatLeft">
                                        <asp:UpdatePanel ID="updpnlTeacher" runat="server">
                                            <ContentTemplate>
                                                <telerik:RadComboBox ID="ddlTeachers" runat="server" MarkFirstMatch="True"
                                                    NoWrap="True" Skin="Default"  AllowCustomText="True"
                                                    Width="200px" Height="500px">
                                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                                    <ExpandAnimation Type="OutQuart" />
                                                </telerik:RadComboBox>
                                            </ContentTemplate>
                                            <Triggers>
                                                <asp:AsyncPostBackTrigger ControlID="ddlSchool" EventName="SelectedIndexChanged" />
                                                <asp:AsyncPostBackTrigger ControlID="ddlFiscalYear" EventName="SelectedIndexChanged" />
                                            </Triggers>
                                        </asp:UpdatePanel>
                                    </div>
                                    <asp:Button ID="btnload" Style="float: right" runat="server" Text="Display Teacher Information."
                                        OnClick="btnload_Click" />
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddlLEA" EventName="SelectedIndexChanged" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </div>
                        <asp:SqlDataSource ID="SqlDataSource_FiscalYears" runat="server" ConnectionString="<%$ ConnectionStrings:EdSHConnectionString %>"
                            SelectCommand="hqtSP_FiscalYears" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
                        <asp:HiddenField ID="HiddenField1" runat="server" />
                    </td>
                </tr>
            </table>

Code Behind:(Page_Load)

        protected void Page_Load(object sender, EventArgs e)
        {
           if (!IsPostBack)
            {
                try
                {
                    TeacherInfo1.Visible = false;

                    ddlFiscalYear.SelectedValue = getfiscalyear().ToString();

                    ddlLEA.DataSource = dds.Districts();//dds is a object used to verify user
                    ddlLEA.DataTextField = "District";
                    ddlLEA.DataValueField = "testdistrictID";
                    ddlLEA.DataBind();
                    ddlLEA.Enabled = dds.EnableDistritcts;
                    if (dds.EnableDistritcts)
                        ddlLEA.AllowCustomText = true;
                    else
                        ddlLEA.AllowCustomText = false;


                    ddlSchool.DataSource = dds.Schools(AppropriateParameter);
                    ddlSchool.DataTextField = "School";
                    ddlSchool.DataValueField = "testschoolID";
                    ddlSchool.DataBind();
                    ddlSchool.Enabled = dds.EnableSchools;
                    if (dds.EnableSchools)
                        ddlSchool.AllowCustomText = true;
                    else
                        ddlSchool.AllowCustomText = false;

                    ddlTeachers.DataSource = dds.Teachers(AppropriateParameters);
                    ddlTeachers.DataTextField = "TeacherName";
                    ddlTeachers.DataValueField = "TeachernameID";
                    ddlTeachers.DataBind();
                }
                catch (Exception ex)
                {
                    ErrHandler.WriteError(ex, ex.Message);
                }
            }

    }

Code Behind:(Ajax triggering events)

    protected void ddlLEA_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            try
            {
                //update school list
                ddlSchool.DataSource = dds.Schools(Appropriateparameters)
                ddlSchool.DataTextField = "School";
                ddlSchool.DataValueField = "testschoolID";
                ddlSchool.DataBind();
                ddlSchool.Enabled = dds.EnableSchools;

                //update teachers list
                ddlTeachers.DataSource = dds.Teachers(Appropriateparameters);
                ddlTeachers.DataTextField = "TeacherName";
                ddlTeachers.DataValueField = "TeachernameID";
                ddlTeachers.DataBind();

            }
            catch (Exception ex)
            {
                ErrHandler.WriteError(ex, ex.Message);
            }
        }
        //School Selected
        protected void ddlSchool_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            try{
            //update teachers list
            ddlTeachers.DataSource = dds.Teachers(Appropriateparameters);
            ddlTeachers.DataTextField = "TeacherName";
            ddlTeachers.DataValueField = "TeachernameID";
            ddlTeachers.DataBind();

            School school = new School();
            school.EntityID = int.Parse(ddlSchool.SelectedValue.ToString());
            school.FiscalYear = int.Parse(ddlFiscalYear.SelectedValue.ToString());
            ddlTitleone.SelectedValue = school.Title();
            ddlTitleone.Enabled = school.Enabled;

            //ddlTeachers.Focus();
            TeacherInfo1.Visible = false;
            }
            catch (Exception ex)
            {
                ErrHandler.WriteError(ex, ex.Message);
            }
        }

District List returns 750 rows/items.

Please help me.

[Simon]

Hello Venu Daroju,

Could you determine when the freeze occurs? Could you reproduce it every time? If so, please put a breakpoint in the SelectedIndexChanged event handler of the sender ComboBox and debug it to detect what exactly causes the freeze.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Venu Daroju]

Hello Simon,

Thank you for reply,

it freezes in three sitiuations

1. Initial load of the page:

        when browser loads page for first time, user can see everything(every control), but immidietly user cann't click on any of the control, it takes atleast 5 seconds. If i user Microsoft dropdown this doesn't occure.

2.  Auto Search:
        If user types to search for an item which is last in the list(i.e.. out of 750 items user is looking for 600th item), then it freezs for very long time.

3. select another Item:
        if user wants to select another item using type search    

Debugging using Breakpoint:
    i dont see any event for auto search(find item(s) as you type), so i was not able use breakpoint


Thank you
Venu.

[Simon]

Hello Venu Daroju,

Thank you for the clarifications.

The high number of Items causes these delays. First, when the page loads, RadComboBox initializes all of its Items - they are many, so the operation is heavy. Then upon typing, RadComboBox iterates through its Items to find the one matching the typed text - this operation also depends on the number of Items.

In order to decrease the delay and greatly improve page performance in your case (of many Items) I suggest you use load on demand. Additionally, you could implement the 'Related ComboBoxes' approach, which is  essentially an equivalent of your server-side approach.

Please read more about Load on Demand here and see a live demo of the 'Related ComboBoxes' here.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Venu Daroju]

I came across a new problem,

In Mozilla FireFox, once you pulldown items list from the dropdown and select a item, thats it, it doesn't respond, the combobox locks,
you will no more be able to pull down that list and select another item.

Please help me.

[Venu Daroju]

Hi,

i am unable to find a solution, could you please send me some sample code for following simple requirment.

Develop a webform(using Visual Studio 2008) with three  radcomboboxes(one of them should have 670 items), all comboboxes should be markfirstitem enabled, among three comboboxes, two comboboxes depend one first one, third combobox depends on second second comboboxes(cascaded dropdowns).

All databindings should be codebehind. Please use ajax to update items in comboboxes

Please help me.

Thanks 

[Simon]

Hello Venu Daroju,

Have you looked at this live demo? It provides the full code needed to implement the 'Related ComboBoxes' approach.

If you encounter any issues with the implementation, please open a formal support ticket and send your project there - we will modify it for you to make it work as in the demo.

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Venu Daroju]

Hi,

Thanks for reply, I saw the demo but it is not what i wanted. All dropdown boxes should be able to search as type.

Thank you
Venu.

[Veselin Vasilev]

Hi Venu Daroju,

Please find attached a sample application.

Best wishes,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.