This is a migrated thread and some comments may be shown as answers.

Loading panel for Combobox.

9 Answers 154 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Karthik
Top achievements
Rank 1
Karthik asked on 25 Feb 2013, 05:29 AM
Hi,
     I want to show an ajax loader processing icon when i click the drop down button of a Rad Combobox and it should be hidden when the drop down items are displayed. I tried doing with the onclientdropdownopening and onclientdwnopened ropdoproperties of the combobox but still I was not able to get the desired results. Can anyone help me out with this???

9 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar Terziev
Telerik team
answered on 27 Feb 2013, 08:06 AM
Hello Karthik,

If the RadComboBox has load on demand enabled, it's advisable to show the loading panel when the OnClientItemsRequesting event is fired and hide it on the OnClientItemsRequested event.

Regards,
Dimitar Terziev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Karthik
Top achievements
Rank 1
answered on 27 Feb 2013, 10:46 AM
Hi,
Thank you for the hint. It will be very useful if you provide me with a demo since I am very much new to this field.
0
Accepted
Princy
Top achievements
Rank 1
answered on 27 Feb 2013, 12:20 PM
Hi,

Please take look into the  Demo I tried.

ASPX:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadComboBox2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadComboBox2" LoadingPanelID="AjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Transparency="80" MinDisplayTime="300"
    runat="server">
    <asp:Image ID="l" runat="server" ImageUrl="~/Images/LoadingPanelImage1.gif"  AlternateText="Loading" />
</telerik:RadAjaxLoadingPanel>
<telerik:RadComboBox ID="RadComboBox2" runat="server" EnableLoadOnDemand="True" ShowMoreResultsBox="true"
    OnItemsRequested="RadComboBox2_ItemsRequested" OnClientItemsRequesting="ClientItemsRequesting"
    OnClientItemsRequested="ClientItemsRequested">
</telerik:RadComboBox>

Javascript:
<script type="text/javascript">
    function ClientItemsRequesting(sender, args) {
        var loadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
        loadingPanel.show(sender.get_id());
    }
    function ClientItemsRequested(sender, args) {
        var loadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
        loadingPanel.hide(sender.get_id());
    }  
</script>

Thanks,
Princy.

0
Karthik
Top achievements
Rank 1
answered on 28 Feb 2013, 11:56 AM
Hi,
     That was really helpful.. Thank you so much.. 
0
Arun
Top achievements
Rank 1
answered on 03 Mar 2017, 02:15 PM

I need another customization here. Below is my code for RadComboBox control

<telerik:RadComboBox ID="ComboID" runat="server" Width="150" Height="200" AllowCustomText="true" EnableItemCaching="false" EnableAutomaticLoadOnDemand="true" ItemsPerRequest="25" OnClientItemsRequesting="ClientItemsRequesting" OnClientItemsRequested="ClientItemsRequested">
</telerik:RadComboBox>

I am not using any server side code to load the combo items. As seen above, the client side event "ClientItemsRequesting" will load the combo items using AJAX request. Can you let me know, how to show the busy loading icons in this case

0
Peter Milchev
Telerik team
answered on 08 Mar 2017, 09:48 AM
Hello Arun,

I would suggest you to consider the approach where the LoadingPanel is shown in the OnClientItemsRequesting event handler and then it is hidden in the success handler of the Ajax request.

Regards,
Peter Milchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Arun
Top achievements
Rank 1
answered on 08 Mar 2017, 10:15 AM

I tried with this approach, but LoadingPanel doesn't show up.Find the below code written in client side,

function ClientItemsRequesting(sender, args) {
    var text = sender.get_text();
    sender.get_items().clear();

    var id = sender.get_id();
    var index = id.indexOf('ComboBox');

    ////Loading Panel
    var loadingPanel = $find("RadAjaxLoadingPaneStreamer");
          if(loadingPanel){
              loadingPanel.show();
          }

    var myVar = GetComboItems(text, id, id.substr(0, index) + "Filter");

    args.set_cancel(true);
}

function GetComboItems(text, comboId, method) {
    var streamerFilterDto = GetFilterValues(text);
    var data = {};
    data = JSON.stringify(streamerFilterDto);

    $.ajax({
        url: "WebService/GetData.ashx/" + method,
        type: 'POST',
        method: 'POST',
        contentType: "application/json",
        async: false,
        cache: false,
        data: data,
        success: function (result) {
            if (result) {
                var comboInstance = $find(comboId);
                if (comboInstance) {
                    comboInstance.clearItems();

                    var items = comboInstance.get_items();
                    comboInstance.trackChanges();

                    var comboItem;
                    $.each(result, function (index, item) {
                        comboItem = new Telerik.Web.UI.RadComboBoxItem();
                        comboItem.set_text(item.Text);
                        comboItem.set_value(item.Value);

                        items.add(comboItem);
                    });
                    comboInstance.commitChanges();
                }
            }

            ////Loading Panel
            var loadingPanel = $find("RadAjaxLoadingPaneStreamer");
            if(loadingPanel){
                  loadingPanel.hide();
             }
        }
    });
}

0
Peter Milchev
Telerik team
answered on 13 Mar 2017, 08:20 AM
Hello Arun,

Please find attached a sample project that we created based on the described approach and used to record this screencast.

To simulate the server we have used json-server. In order to run it, you should install json-server, open a command prompt in the folder where the db.json is located, enter the json-server --watch db.json command. Then you will have a server listening on http://localhost:3000.

Regards,
Peter Milchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Arun
Top achievements
Rank 1
answered on 13 Mar 2017, 11:13 AM

Thanks a lot for the solution. At my end, the property "EnableLoadOnDemand=true" was missing for RadCombo.
Also data from ajax request used to take some time, so I added timeout delay as below which shows the panel for combo item requesting event...
setTimeout(function () {
        GetComboItems(text, id, filterMethod, sender);
    }, 2000);

Tags
ComboBox
Asked by
Karthik
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Karthik
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Arun
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or