RadComboBox, populate on client-side

Thread is closed for posting
7 posts, 0 answers
  1. Erik
    Erik avatar
    1 posts
    Member since:
    Apr 2009

    Posted 06 Apr 2009 Link to this post

    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

     

     

     

     

     

     

     

     

     

  2. Dallas Sehlhorst
    Dallas Sehlhorst avatar
    19 posts
    Member since:
    Feb 2006

    Posted 06 Apr 2009 Link to this post

    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 { getset; } 
     
           public string Value { getset; } 


    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. teeberryu
    teeberryu avatar
    4 posts
    Member since:
    Oct 2010

    Posted 29 Mar 2011 Link to this post

    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



  5. teeberryu
    teeberryu avatar
    4 posts
    Member since:
    Oct 2010

    Posted 12 Apr 2011 Link to this post

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

    Posted 12 Apr 2011 Link to this post

    Hello,

    Probably you will find helpful:

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

    Kind regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. teeberryu
    teeberryu avatar
    4 posts
    Member since:
    Oct 2010

    Posted 14 Apr 2011 Link to this post

    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.





  8. Pankaj
    Pankaj avatar
    1 posts
    Member since:
    Sep 2013

    Posted 13 May 2014 in reply to teeberryu Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017