RadComboBox, populate on client-side

[Erik]

Hi
I want to use jquery-ajax to populate a RadComboBox and I get a really strange behaviour.

I have a javascript that triggers on OnClientItemsRequesting

 

 

 

function onModelRequesting(sender, args) {
var text = args._text;
$.ajax({
type: "GET",
url: "/Release/GetModelProjects/",
data: { query: text },
dataType: "json",
success: function(xhr) { 
writeModelsData(xhr);}
});
}

function writeModelsData(data) {
 modelsCombo.clearItems();
 modelsCombo.trackChanges();
 for (var i = 0; i < data.length; i++) {
  var comboItem = new Telerik.Web.UI.RadComboBoxItem();
  comboItem.set_text(data[i].ProjectName + ' ' + data[i].ModelName);
  comboItem.set_value(data[i].ProjectName);
  modelsCombo.get_items().add(comboItem);
 }
 modelsCombo.commitChanges();
}

This seems to work except one thing, the items is not in my dropdown directly, I have to click the dropdown arrow in "ShowMoreResult". Ill se them flash quickly then they dissapear, and then I have to click the down arror at the bottom of the dropdown. What am I missing?

Regards

 

 

 

 

 

 

 

 

 

[Dallas Sehlhorst]

Hey Erik,

Have you seen Atanas' blog entry on how to use a RadComboBox with load on-demand?  If you're going to use the ShowMoreResults and message functionality this is the best way to go.  It uses JQuery for the Ajax calls, but it uses RadComboBox's built in Web Service methods for populating the RadComboBox.  You don't actually create a Web Service, you just trick your Controller method into returning the same Json using an ActionFilterAttribute.

If you are certain you don't want to go that route, you can achive what you're trying to do by doing less.  You don't need to track the changes- that's only for standard WebForms.

Try this for your RadCombo:

<telerik:RadComboBox ID="radProject" runat="server" Skin="Default" Width="300px"
EnableLoadOnDemand="true" Filter="Contains" OnClientItemsRequesting="getProjects"
EmptyMessage="Select Project" />

Javascript:

// Called from RadComboBox
function getProjects(sender, args) {
                itemsRequesting(sender, args);

                $.getJSON(
                '<%= Url.Action("GetProjects", "Capital") %>',
                { facility: GetFacility().get_value() },
                function(data) {
                    fillCombo(sender, data);
                    sender.highlightAllMatches(sender.get_text());
                });
            }

// This cancels the default RadComboBox behavior
function itemsRequesting(sender, args) {
                if (args.set_cancel != null) {
                    args.set_cancel(true);
                }
                if (sender.get_emptyMessage() == sender.get_text())
                    sender.set_text("");
            }

// Use this for all of your RadComboBox to populate from JQuery
function fillCombo(combo, result) {
                combo.clearItems();

                var items = result.d || result;

                // This just lets your users know that nothing was returned with their search
                if (items.length == 0) {
                    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                    comboItem.set_text("Nothing found");
                    comboItem.set_value("null");
                    combo.get_items().add(comboItem);
                    combo.set_text("");
                }

                for (var i = 0; i < items.length; i++) {
                    var item = items[i];

                    var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                    comboItem.set_text(item.Text);
                    comboItem.set_value(item.Value);
                    combo.get_items().add(comboItem);
                }
            }

Then this for your Controller:

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetProjects(int facility, int department)
{
       IList<Project> projects = capitalRequestService.GetFacility(facility).Projects;

       List<ComboInfo> result = new List<ComboInfo>();
       foreach (Project project in projects)
       {
           ComboInfo itemData = new ComboInfo { Text = project.Name, Value = project.ID.ToString() };
           result.Add(itemData);
       }
       return Json(result);
}

public class ComboInfo
{
       public string Text { get; set; }

       public string Value { get; set; }
}

Once you change my code to match your objects/data you should be good.  I would suspect that the itemsRequesting event needs to be called in your example, but I gave you my complete code so you can see a working example.  If you have any questions, I'll try to help.

-Dallas

[teeberryu]

Hey ,
Hope you can help me with this.

Client-side binding on radComboBox (fillCombo in this case)  is using the 'for' statement,  so the client script statements are increasing.
The problem is 'MaxScriptStatments' registry key on user machine,with default value 500000.
Using for statement,I get this message 'A script on this page is causing Internet Explorer to run slowly' (more details here)
The 'set_dataSource' method on RadGrid is very useful and simple. RadComboBox has anything similar ?

Regards

[teeberryu]

Can someone give a clue how to add a radComboBoxItemCollection to radcombo control?
Lots of stuff in project are depending on this,please answer.

[Helen]

Hello,

Probably you will find helpful:

http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcomboboxitemcollection.html

Kind regards,
Helen
the Telerik team

[teeberryu]

Hello Helen ,

Thank you for link,but I am already familiar with radcombobox client-side API.

My problem is that I fill the control with a lot of items (>= 600), using JSON and 'for' statement, but this leads to performance penalty in IE8 ( -bad javascript engine - works fine with IE9 or other browsers) and customers receive a warning message (details here).

1.Now,I want to know if I can add the comboItems at once (creating a Telerik.Web.UI.RadComboBoxItemCollection and assigning it to comboBox ).  
2.Please improve the 'findItemByValue' method - same performance penalty on more than 600 items.I can deal with this by using linq.js [(find _dataItem in dataSource),(get _dataItem _index)(get _comboItem from Control by _index)(select _comboItem)] , by it's messy.

[Pankaj]

I have implemented same as you explain in above example but its not working.Could you please provide me an complete code as working example in MVC