ComboBox as User Control with Load on Demand Scroll position Issue

[Rajesh]

Hi,

I am having an issue with scroll position of ComboBox with load on demand, in the Cities ComboBox on dropdown opening we will be listed with first ten cities. And I have selected a city directly by scrolling say Colorado and when I click on the ComboBox to change my selection my first item will be Colorado in the list which is good and if I keep scrolling down on every callback for getting the data the scroll position moves to the selected city which is Colorado and again I have to keep scrolling to move to the last which is very annoying. I have checked the Demo link the issue which I am facing is not present there. Can you help me in fixing this issue. 

And I am using OnClientDropDownOpening and OnClientItemsRequesting client side events.

I am using OnClientDropDownOpening event to fix an issue with setting up a initial value for the ComboBox on page load. I am successful in adding a RadComboBoxItem to the RadComboBox on Page load. But adding it broke load on demand as on clicking the ComboBox nothing was loading and even the ShowMoreResults is blank. So to fix it up I am calling requestItems in the OnClientDropDownOpening event. The code is added below:

function OnClientDropDownOpening(sender) {
    var attributes = sender.get_attributes();
    //An attribute to check if an Initial Value is set for the ComboBox
    var enableInitialValue = attributes.getAttribute('EnableIntialValue');
    if (enableInitialValue != null && enableInitialValue == "true") {
        sender.requestItems("", false);
    }
}

function OnClientItemsRequesting(sender, eventArgs) {
    var attributes = sender.get_attributes();
    //Attribute to set the name of the DataAccess which will be read in BasePage
    //WebMethod and DataAccess object is fetched from the repository
    var dataAccess = attributes.getAttribute('DataAccess');
    //Filters to be applied on the DataAccess
    var filters = attributes.getAttribute('DataFilters');
    var context = eventArgs.get_context();
    context["DataAccess"] = dataAccess;
    context["DataFilters"] = filters;
    //Added this code as the Selected Item text was being passed on every callback after selecting an item
    //Checking if Context.Text equal to Selected Item text then setting filter text as empty.
    //This issue I could reproduce in the Demo link as well.
    var selectedValue = parseInt(sender.get_value() != "" ? sender.get_value() : 0);
    if (selectedValue > 0 && sender.get_text() == context.Text) {
        context.Text = "";
    }
}
And this is the Common WebMethod which resides in the BasePage which is implemented by all the pages of the Application. So ComboBox user control will not have WebMethod for each instance in each page.

    [WebMethod]
    public static RadComboBoxData FillComboBox(RadComboBoxContext context)
    {
        var comboData = new RadComboBoxData();
        var dropDownFiller = new FillableRepository();
        var dataAccessName = Convert.ToString(context["DataAccess"]);
        var dataAccess = dropDownFiller.GetPropertyValue(dataAccessName);
        var filtersJson = Convert.ToString(context["DataFilters"]);
        var filterConditions = DeserializeFilters(filtersJson);
        if (filterConditions.NotNullAndAny()) dataAccess.SetFilters(filterConditions);
        var fillableList = dataAccess.GetFillableData(context.Text);
        var itemCount = fillableList.Count;
        var itemOffset = context.NumberOfItems;
        var endOffset = Math.Min(itemOffset + ItemsPerRequest, itemCount);
        comboData.EndOfItems = endOffset == (itemCount);
        var result = new List<RadComboBoxItemData>();
        for (var i = itemOffset; i < endOffset; i++)
        {
            var itemData = new RadComboBoxItemData
            {
                Text = fillableList[i].DataField,
                Value = Convert.ToString(fillableList[i].ValueField)
            };
            result.Add(itemData);
        }
        comboData.Message = GetComboStatusMessage(endOffset, itemCount);
        comboData.Items = result.ToArray();
        return comboData;
    }

Please guide me in fixing the issue it is very urgent. 

[Boyan Dimitrov]

Hello,

I tried to replicate the described problem but without success. Please find attached the page I am testing with. When an item is selected and if I reopen the RadComboBox the drop down list is scrolled down and you do not have to scroll from the top of the list to the bottom in order to load the next portion of items.


Regards,
Boyan Dimitrov
Telerik

 

 

[Rajesh]

Hi Boyan,

Thanks for your effort and reply. I have looked at the sample and it works fine and in the same project I have created a user control in which I have added RadComboBox and used my logic to fill the ComboBox with a WebMethod in the Base Page which will be inherited by all the pages and the User Control contains the below code in Page Load for mapping the Web Method which is in Base Page

rcbComboBox.WebServiceSettings.Method = "GetMyCompanyNames";
rcbComboBox.WebServiceSettings.Path = Page.AppRelativeVirtualPath;

Using the User Control I have the issue which I am talking about and everything seems working fine when I am directly using the RadComboBox in my page.

Please help me in resolving this issue.

Regards,
Rajesh

[Boyan Dimitrov]

Hello Rajesh,

I would like to clarify that I moved the RadComboBox to a user control and it works in the same way. I am attaching the project for reference.


Regards,
Boyan Dimitrov
Telerik