Load on Demand using ADO.NET Data Services (formally Astoria)

[Jeff]

Hi,

I would like to use the ComboBox and the Load On Demand feature but would like to use this with the new ADO.NET Data Services.

I was thinking of hooking into the OnClientItemsRequesting event and then calling the Data Services RESTful service (using the Skip and top commands for the paging) and then adding the results to the combobox.  I believe I would also have to cancel the serverside event?  Any ideas?

I know I could do this via a web service call or via your server side event, however I'm interested in using the new Data Service.

Cheers,

Jeff

[Erjan Gavalji]

Hi Jeff,

Please, find attached a small example, demonstrating the population of RadComboBox with data, retrieved from ADO.NET Data Services.

Kind regards,
Erjan Gavalji
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

Thanks for your help I will try this out on Monday :)

[Jeff]

Thanks for your example i have managed to get something working now :)

However I'm not sure how to implement the paging support in Data Services with the virtual scrolling feature of the RADCombo control. I would like to just load say 10 rows into the combo box and if the user scrolls for more then go off and get the next ten and load them in, then if they enter some different text then go and get the first 10 rows, clear out the combo box and add them in.

Ok so some things i have changed from your code first.... I only want to call the service once the user has entered a letter, so I added the 'if (sender.get_text().length > 0)' check before calling the service.  This works fine.  I have also enabled virtual scrolling on my control.

I have then added the following code to the getDataServiceQuery() function:

var combo = $find("<%= RadComboBoxTags.ClientID %>");
var noItemsLoaded = combo.get_items().get_count();
if (noItemsLoaded == null) noItemsLoaded = 0;
sb.append(String.format("&$skip=0}&$top={1}", noItemsLoaded, itemsPerRequest));

This will retrieve the next 'batch' of results.  I have also removed the line of code that clears the items from the combo box in the updateComboBox() function. And have added the following code:

if ((result.length == 0) | (result.length < itemsPerRequest)) {
    comboBox.set_endOfItems = true;
}
else {
    comboBox.set_endOfItems = false;
}

This code is supposed to set whether there are any more results to come, as the Data Service does not support returning a total this is the best I could come up with!

The problem I now have is that i can't distinguish between a request for more data from virtual scrolling and a new text input?  So i don't know when to clear out the combobox? I don't seem to be getting the OnClientItemsRequesting event firing when scrolling to the bottom of the combo, even when I have set endOfItems to false? Any ideas?

Cheers,

Jeff

[Jeff]

Hi,

Also I have set MarkFirstMatch to true and AllowCustomText to false.  However I am not getting the expected result shown in your live example (the CC field) here.  I can enter a start letter that doesn't exist in the list and move away from the control.  I think this may have something to do with cancelling the items requested event in the itemsRequesting handler.  To resolve this I am trying to use the raise_itemsRequested(text, e) method on the combo box to complete the life cycles and hopefully get the expected functionality.  Is this correct?  If so could you tell me what to pass as the second parameter (e)?

Thanks,

Jeff

[Rosi]

Hi Jeff,

You can find the modified attached project illustrating how to achieve virtual scrolling functionality.

To find if the request is a result of typing or scrolling you can use get_appendItems() method of the combo. If it returns true the request is a result of scrolling if it is false is a result of typing.

Also I suggest you just call the highlightMatches() of RadComboBox to find the first match.

Kind regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

Thanks for your help, I can now get everything working except for the virtual scrolling.  I tried you example but it had a few errors which i fixed below, however it still doesn't fetch the new data once you scroll to the bottom of the bar.
Could you take another look?

var northwindService = null;
        function pageLoad(sender, args)
        {
            northwindService = new Sys.Data.DataService("NorthwindDataService.svc");
            northwindService.query(getDataServiceQuery(), updateComboBox);
        }

        function getDataServiceQuery()
        {
            var tableName = "Customers";
            var criterion = $find("<%= RadComboBox1.ClientID %>").get_text();

            var sb = new Sys.StringBuilder();
            sb.append(String.format("{0}?", tableName));

            if (criterion != "")
            {
                sb.append(String.format("$filter=startswith(ContactName,'{0}')", criterion));
                var combo = $find("<%= RadComboBox1.ClientID %>");
                var noItemsLoaded = combo.get_items().get_count();
                if (noItemsLoaded == null | combo.get_appendItems() == false) noItemsLoaded = 0;
                sb.append(String.format("&$skip={0}&$top=10", "0"));

                return sb.toString();
            }
            return null;
        }

        function updateComboBox(result)
        {
            var comboBox = $find("<%= RadComboBox1.ClientID %>");

            if (comboBox.get_appendItems() == false) comboBox.get_items().clear();
            if ((result.length == 0) | (result.length < 10)) {
                comboBox.set_endOfItems(true);
            }
            else {
                comboBox.set_endOfItems(false);
            }

            for (var i = 0; i < result.length; i++)
            {
                var newItem = new Telerik.Web.UI.RadComboBoxItem();
                newItem.set_value(result[i].CustomerID);
                newItem.set_text(result[i].ContactName);
                comboBox.get_items().add(newItem);
            }
        }

        function onClientItemsRequesting(sender, args)
        {
            args.set_cancel(true);
            northwindService.query(getDataServiceQuery(), updateComboBox);
        }

    function OnClientDropDownOpened(sender,e)
    {
        if (sender.get_childListElement() != null) {
            sender._setUpScroll(sender.get_endOfItems(), sender.get_childListElement());
        }
            sender._virtualScroll = true;
    }

Thanks,

Jeff

[Rosi]

Hi Jeff,

I suggest you add the highlighted lines to your code and also set the Height property of RadComboBox:

    <script type="text/javascript">
        var northwindService = null;
        function pageLoad(sender, args)
        {
            northwindService = new Sys.Data.DataService("NorthwindDataService.svc");
            northwindService.query(getDataServiceQuery(), updateComboBox);
        }

        function getDataServiceQuery()
        {  var tableName = "Customers";
            var criterion = $find("<%= RadComboBox1.ClientID %>").get_text();

            var sb = new Sys.StringBuilder();
            sb.append(String.format("{0}?", tableName));

            if (criterion != "")
            {
                sb.append(String.format("&$filter=startswith(ContactName,'{0}')", criterion));
            }
var combo = $find("<%= RadComboBox1.ClientID %>");
var noItemsLoaded = combo.get_items().get_count();
if (noItemsLoaded == null) noItemsLoaded = 0;
sb.append(String.format("&$skip={0}&$top=10", "0"));

            return sb.toString();
        }

        function updateComboBox(result)
        {
            var comboBox = $find("<%= RadComboBox1.ClientID %>");

            if (comboBox.get_appendItems() == false) comboBox.get_items().clear();
            if ((result.length == 0) | (result.length < 10)) {
                comboBox.set_endOfItems(true);
            }
            else {
                comboBox.set_endOfItems(false);
            }
        var emptyElement = $telerik.getFirstChildByTagName(comboBox.get_childListElement(), "div",0);
        if(emptyElement)
        {
            emptyElement.parentNode.removeChild(emptyElement);
        }
            for (var i = 0; i < result.length; i++)
            {
                var newItem = new Telerik.Web.UI.RadComboBoxItem();
                newItem.set_value(result[i].CustomerID);
                newItem.set_text(result[i].ContactName);
                comboBox.get_items().add(newItem);
            }
            comboBox._ajaxRequest = false;
            if(comboBox.get_dropDownVisible())
            {
                comboBox._setUpScroll(comboBox.get_endOfItems(), comboBox.get_childListElement());
               comboBox._virtualScroll = true;

            }
        }

        function onClientItemsRequesting(sender, args)
        {
            args.set_cancel(true);
            northwindService.query(getDataServiceQuery(), updateComboBox);

        }

    function OnClientDropDownOpened(sender,e)
    {

 if (sender.get_childListElement() != null) {
  var emptyElement = $telerik.getFirstChildByTagName(sender.get_childListElement(), "div",0);
        if(emptyElement)
        {
            emptyElement.parentNode.removeChild(emptyElement);
        }
 window.setTimeout(function (){sender._setUpScroll(sender.get_endOfItems(), sender.get_childListElement())},100);

  }
            sender._virtualScroll = true;
    }

    </script>

Kind regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

Got this working now, thanks for your help :)

Jeff