[Solved] Client Side Binding Progress Indication?

[Cyndie]

I'm cascading ComboBoxes and there is a slight delay while the data is being queried as each combo selection is made.  I know the users are going to quickly try and click on the other ComboBoxes before the data is bound.   How can I show some type of progress indication in the ComboBox so the user knows the data is being queried?  (ie. indicator icon in box, change background color or something similar)

Any idea and/or example on how to do this would be greatly appreciated!

Thanks.

[Georgi Krustev]

Hello Cyndie,

You can show progress loading in ComboBox ( check this online example ) like so:

//show
 $('#ComboBox').data('tComboBox').loader.showBusy();
//hide
 $('#ComboBox').data('tComboBox').loader.hideBusy();

Best wishes,
Georgi Krustev
the Telerik team

[Cyndie]

I get the following error:

Microsoft JScript runtime error: 'data(...).loader' is null or not an object

I see the indicator in the example, but don't see where .loader.showBusy() & .loader.hideBusy() are used in the code.  :(

Because I'm populating the ComboBoxes dynamically, this is all I have in the content for them:

<%= Html.Telerik().ComboBox()
    .Name("VarsDevtyp")
    .ClientEvents(events => events.OnChange("GetVarsDevices"))
    .HtmlAttributes(new {style="position:relative;z-index:10000;"})
 %>

[Georgi Krustev]

Hi Cyndie,

If the id of your combobox UI component is "VarsDevtyp". You need to write modify the code snippet, which I have posted in my previous post like so:

$('#VarsDevtyp').data('tComboBox').loader.showBusy();

If $('#VarsDevtyp').data('tComboBox') is undefined or null, then the ComboBox is not initialized on the client yet.

All the best,
Georgi Krustev
the Telerik team

[Cyndie]

Hi Georgi,

Is the ComboBox considered uninitialized if not databound?  If so, I may have to use the jQuery animate to fade it in and out instead.  It is not as apparant that data is loading, but it works.

I tried each of the following in the ClientEvent OnChange function (of the first ComboBox) after the call to databind the second ComboBox and the animate works (I set the opacity to .1 earlier), but the showBusy() gives the error. 

$('#AmpsDevtyp').animate({ opacity: 1 }, 5000);
$('#AmpsDevtyp').data('tComboBox').loader.showBusy();

I tried putting the showBusy() in a ClientEvent onDataBound function and I don't get the error, but nothing happens. 

The ComboBox is already there, but I don't databind it until a different ComboBox item is selected.  I haven't been able to get this to work no matter where I put it.

[Georgi Krustev]

Hello Cyndie,

Combo component is initialized before it is data bound. Unfortunately I am not able to help you further, before observe how the suggested approach is implemented. Could you please share with us how you are trying to show the progress indication? Code of the View and any relative page will be helpful.

All the best,
Georgi Krustev
the Telerik team

[Cyndie]

Here are the four ComboBoxes in the View which are my 'cascade'.  The first is populated with ViewData and the other three are initially empty.  Note that on the first Combox, I have events OnDataBinding and OnDataBound there to try and get the busy indicator to show up.  I did that for testing, but it doesn't appear to do anything. 

Substn:
<%= Html.Telerik().ComboBox()
    .Name("AmpsSubstn")
    .BindTo((IEnumerable<SelectListItem>)ViewData["ampsSubstn"])
    .ClientEvents(events => events.OnChange("GetAmpsDevtyps"))
    .HtmlAttributes(new {style="position:relative;z-index:10000;"})
 %>
 <br />Devtyp:
<%= Html.Telerik().ComboBox()
    .Name("AmpsDevtyp")
    .ClientEvents(events => {
        events.OnChange("GetAmpsDevices");
        events.OnDataBinding("busy");
        events.OnDataBound("busy");
    })
    .HtmlAttributes(new { style = "position:relative;z-index:10000;" })
 %>
 <br /> Device:
<%= Html.Telerik().ComboBox()
    .Name("AmpsDevice")
   .ClientEvents(events => events.OnChange("GetAmpsAlgs"))
   .HtmlAttributes(new { style = "position:relative;z-index:10000;" })
 %>
 <br />Analog:
<%= Html.Telerik().ComboBox()
    .Name("AmpsAlg")
    .HtmlAttributes(new {style="position:relative;z-index:10000;"})
 %>

These are my controller actions to get the data:

//Amps dropdown actions
[HttpPost]
public JsonResult GetAmpsDevtyp(string devtypVal)
{
    return Json(_lookups.GetAmpsDevtyp(devtypVal));
}
[HttpPost]
public JsonResult GetAmpsDevice(string devtypVal, string deviceVal)
{
    return Json(_lookups.GetAmpsDevice(devtypVal, deviceVal));
}
[HttpPost]
public JsonResult GetAmpsAlg(string devtypVal, string deviceVal, string algVal)
{
    return Json(_lookups.GetAmpsAlg(devtypVal, deviceVal, algVal));
}

I added this for troubleshooting (it is called as a ClientEvent in the AmpsDevtyp combobox as I noted above.  I don't get an error, but the showBusy never appears:

function busy() {
    $('#AmpsDevtyp').data('tComboBox').loader.showBusy();
}

This is one of the functions to fill the cascade.  If I try to put the loader.showBusy where the .animate calls are (it doesn't matter if I put it before or after the call to databind), I get the null error:

ampsDevtypListUrl = '<%=Url.Action("GetAmpsDevtyp", "Analog") %>'
function GetAmpsDevtyps() {
    var ampsSub = $('#AmpsSubstn').data('tComboBox');
    var ampsDtyp = $('#AmpsDevtyp').data('tComboBox');
    if (ampsSub != null) {
        if (ampsDtyp != null) {
            ClearAmpsDevice();
            ClearAmpsAlg();
            ampsDtyp.value("");
            ampsDtyp.text("");
        }
        var devtypVal = ampsSub.value();
        $.post(ampsDevtypListUrl, { devtypVal: devtypVal },
            function(data) {
                ampsDtyp.dataBind(data);
            }, "json");
        }
        $('#AmpsDevtyp').animate({ opacity: 1 }, 5000);
        $('#AmpsDevice').animate({opacity: 0.10});
        $('#AmpsAlg').animate({opacity: 0.10});
}

These are the two functions referenced above.  They are used to clear out what is in the last three ComboBoxes if the user starts over, so they don't have invalid results displayed.

function ClearAmpsAlg() {
    $.post(ampsAlgListUrl, { devtypVal: null, deviceVal: null, algVal: null },
        function(data) {
            $('#AmpsAlg').data('tComboBox').dataBind(data);
        }, "json");
    $('#AmpsAlg').data('tComboBox').value("");
    $('#AmpsAlg').data('tComboBox').text("");
}
function ClearAmpsDevice() {
    $.post(ampsDeviceListUrl, { devtypVal: null, deviceVal: null },
        function(data) {
            $('#AmpsDevice').data('tComboBox').dataBind(data);
        }, "json");
    $('#AmpsDevice').data('tComboBox').value("");
    $('#AmpsDevice').data('tComboBox').text("");
}

Maybe I'm missing something very simple that you'll see.

Thank you very much for your help on this.

[Georgi Krustev]

Hello Cyndie,

By design OnDataBinding or OnDataBound events are not raised when using Client API to bind ComboBox component. I noticed that you are using $.post to get the required data.

I will suggest you use $.ajax to get the data. Before call $.ajax call showBusy() method of the combobox and on complete callback of the $.ajax to call hideBusy():

...
$('#ComboBoxID').data('tComboBox').loader.showBusy();
$.ajax({
    url: ampsDevtypListUrl,
    type: 'POST',
    data: { devtypVal: devtypVal },
    complete: $('#ComboBoxID').data('tComboBox').loader.hideBusy();,
    success: function (data) {
            ampsDtyp.dataBind(data);
    }
});

This approach is used in the ajax binding of the combobox UI component itself.

You can check telerik.list.js file and more concrete loader object.

Regards,
Georgi Krustev
the Telerik team

[Cyndie]

Unfortunately, I'm still getting the same error when using $.ajax  (see the uploaded image). 

I put the combobox in my watchbox, expanded it and don't see 'loader' as an available method (see the second image), .  I see there is a showBusy and hideBusy, but they don't seem to do anything if I access them directly by removing .loader.

[Cyndie]

For testing, I took the .loader. out of both calls and changed the one in the .ajax call to be showBusy and I do see the busy indicator now (of course it doesn't go away, but it shows up which confirms the calls work without .loader.).  

So, the complete is apparently not waiting until the databinding is complete to hideBusy because I can click on the dropdown and the data is not there yet, but the busy indicator is hidden already.  Can I put a delay on the showBusy?

[Georgi Krustev]

Hi Cyndie,

In order to progress with this issue I will ask you to send us a working test project which shows the aforementioned problem. Thus I will be able to review it locally and advice your further.

Best wishes,
Georgi Krustev
the Telerik team

[Cyndie]


complete: function() { setTimeout("$('#AmpsDevtyp').data('tComboBox').hideBusy()", 500); },

I changed the $.ajax complete to the above and now it shows the indicator long enough for the data to be there.  The key was removing .loader. from before hideBusy() and showBusy().

Thank you for your help!!