Load On Demand, Duplicates on Virtual Scrolling

[Jeff Reinhardt]

I have a combobox with Loadondemand and I keep getting deplicates on scrolling:

 

 

 

<telerik:RadComboBox ID="radcmbInmate" runat="server" Width="200px" Height="150px" AllowCustomText="false" EmptyMessage="Select an Inmate" EnableLoadOnDemand="True" ShowMoreResultsBox="true" Filter="None" EnableVirtualScrolling="true" MarkFirstMatch="true" HighlightTemplatedItems="true" DataTextField="FullName" DataValueField="InmateID" OnItemsRequested="radcmbInmate_ItemsRequested">
</telerik:RadComboBox>

 

 

 

private DataSet GetInmateDataSet(string inmateText)
{
     string errorMsg = string.Empty;
     DataSet DS = new DataSet();
     Inmate.GetByName(FacilityID, inmateText, ref DS, ref errorMsg);
     return DS;
}

protected void radcmbInmate_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
     DataSet data = GetInmateDataSet(e.Text);
     radcmbInmate.DataSource = data;
     radcmbInmate.DataBind();
}

[Simon]

Hello Jeff Reinhardt,

You are missing the server-side logic in the ItemsRequested event handler that loads only the needed portion of Items. Please see this demo for the complete code.

Greetings,
Simon
the Telerik team

[Jeff Reinhardt]

Thank you this works for the example I showed you, but how would this work for a multi-column combobox?

<telerik:RadComboBox ID="radcmbProduct" runat="server" Width="400px" Height="200px" AllowCustomText="false" EmptyMessage="Select a Product" EnableLoadOnDemand="True" ShowMoreResultsBox="true" DropDownWidth="600px"                             EnableVirtualScrolling="true" HighlightTemplatedItems="true" MarkFirstMatch="true" ItemsPerRequest="60" NoWrap="true" OnItemsRequested="radcmbProduct_ItemsRequested" OnItemDataBound="radcmbProduct_ItemDataBound">
     <HeaderTemplate>
        <ul>
           <li class="col1">Title</li>
           <li class="col2">System</li>
           <li class="col3">Price</li>
        </ul>
     </HeaderTemplate>
     <ItemTemplate>
        <ul>
           <li class="col1">
               <%# DataBinder.Eval(Container.DataItem, "Title") %></li>
           <li class="col2">
               <%# DataBinder.Eval(Container.DataItem, "GameSystemName") %></li>
           <li class="col3">
               <%# DataBinder.Eval(Container.DataItem, "DisplayPrice")%></li>
        </ul>
   </ItemTemplate>
</telerik:RadComboBox>

This code below cannot work as you need to provide all the info for the template...  but I am not sure how to programmatically provide that info, as I have always done just a databind to a dataset since I had no need for load on demand or anything fancy in most other situations.

How would I change this code:

int itemOffset = e.NumberOfItems;
int endOffset = Math.Min(itemOffset + ItemsPerRequestProduct, data.Tables[0].Rows.Count);
e.EndOfItems = endOffset == data.Tables[0].Rows.Count;

for (int i = itemOffset; i < endOffset; i++)
{
   radcmbProduct.Items.Add(new RadComboBoxItem(data.Tables[0].Rows[i]["Title"].ToString(), data.Tables[0].Rows[i]["ProductID"].ToString()));
}

e.Message = GetStatusMessage(endOffset, data.Tables[0].Rows.Count);

[Cori]

Hello Jeff,

To add more fields to use in a multi-column situation, try doing it this way:

int itemOffset = e.NumberOfItems;
int endOffset = Math.Min(itemOffset + ItemsPerRequestProduct, data.Tables[0].Rows.Count);
e.EndOfItems = endOffset == data.Tables[0].Rows.Count;

for (int i = itemOffset; i < endOffset; i++)
{
   RadComboBoxItem cmdItem = new RadComboBoxItem(data.Tables[0].Rows[i]["Title"].ToString(), data.Tables[0].Rows[i]["ProductID"].ToString());
   cmbItem.Attributes.Add("GameSystemName",data.Tables[0].Rows[i]["GameSystemName"].ToString());
   cmbItem.Attributes.Add("DisplayPrice",data.Tables[0].Rows[i]["DisplayPrice"].ToString());
   radcmbProduct.Items.Add(cmbItem);
   cmbItem.DataBind();
}

e.Message = GetStatusMessage(endOffset, data.Tables[0].Rows.Count);

And the ItemTemplate should look like this:

<ItemTemplate>
        <ul>
           <li class="col1">
               <%# DataBinder.Eval(Container, "Text") %></li>
           <li class="col2">
               <%# DataBinder.Eval(Container, "Attributes['GameSystemName']") %></li>
           <li class="col3">
               <%# DataBinder.Eval(Container, "Attributes['DisplayPrice']")%></li>
        </ul>
   </ItemTemplate>

So basically, I added the extra fields as Attributes of the RadComboBoxItem. For your Title field I'm binding it to the Text property of the RadComboBoxItem, since that is how it's being added.

I hope that helps.

[Jeff Reinhardt]

Ok that gets the control working as expected, however, it breaks one piece of functionality I need.  During the ItemDataBound event for the combobox I was setting the text and value as follows:

protected void radcmbProduct_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
   e.Item.Text = e.Item.Text.ToString() + " | " + e.Item.Attributes["GameSystemName"].ToString() + " | " + e.Item.Attributes["DisplayPrice"].ToString();
   e.Item.Value = ((DataRowView)e.Item.DataItem)["ProductID"].ToString();
}

This is important so that when the user selects an item it shows the three column values from that item separated by a pipe delimter ' | '

I tried to fix it in the code above my switching to the attributes but the only thing that gets set on select is the Text of the Title.