Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > ComboBox > Ajax binding DropDown - show current value

Not answered Ajax binding DropDown - show current value

Feed from this thread
  • Brian Roth avatar

    Posted on Sep 13, 2010 (permalink)

    I'm attempting to use an ajax dropdown control as a custom editor on a grid using the popup editing option.  The dropdown is binding on demand and when I click on the arrow to get the values it binds correctly shows me the possible values that I would expect.  The issue I am running into is that initially the dropdown is showing no value to the user.  It is blank.  Is there a way to show the currently selected value before the on demand binding has taken place?  Or will I need to force a bind when the edit form is loaded and then set the selected value?

    Thanks for your help!

    Regards,
    Brian

    Reply

  • Georgi Krustev Georgi Krustev admin's avatar

    Posted on Sep 14, 2010 (permalink)

    Hello Brian Roth,

    Unfortunately there is no way how to show selected item, because DropDownList UI component does not have it, before binding. This is the reason why it is shown after the component is bound. If the component is bound from server the selected item will be shown.

    One possible solution is as you said to force binding of the component before showing the edit form.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

    Reply

  • Joan Vilariño Intermediate avatar

    Posted on Sep 14, 2010 (permalink)

    Brian, I had the same issue but editing inline... maybe this solution will work for you. A little jQuery in the template makes it bind client-side, as the data for the grid is kept in the jQuery object by Telerik, all you have to do is find the item for the row being edited, create a "dumb" itemlist in the dropdown's items, and then set the dropdown value to the current property value... sounds complicated, so I paste you this piece of code.

    This is my editor template for the combobox on grid:

    <%@ Import Namespace="Telerik.Web.Mvc.UI" %>
    <%@ Import Namespace="Cirsa.Slot.Entidad.General" %>
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Empresa>" %>
    <%=Html.Telerik().ComboBox().Name("myCombo")
        .DataBinding(db => db.Ajax().Select("_getComboItems","myController"))
        .Filterable(ft => ft.FilterMode(AutoCompleteFilterMode.StartsWith))
      
    %>
    <script type="text/javascript">
      
        $(document).ready(function() {
            // Get a handler to your template's combobox
            var combo = $('#myCombo');
            // Get a handler for the row being edited
            var tr = combo.closest('tr:has(form)');
            // Get your entity's Json object from the grid
            var row = $(combo.closest('div.t-grid')).data('tGrid').dataItem(tr);
            // If it has value (my entity uses 0 as no-value, but you can use null
            if (row.Id != 0) {
                // Access the telerik's combo object
                combo = combo.data('tComboBox');
                // Create a new datasource with the current entity value as the only item
                var datasource = [ { Text: row.myEntity.Name, Value: row.myEntity.Id, Selected: true } ];
                // Bind the combobox dropdown list
                combo.dataBind(datasource);
                // Asign combo value and text to the recent bound data
                combo.value(row.myEntity.Id);
                combo.text(row.myEntity.Name);
            }
        });
          
    </script>

    I hope this will help you...

    Cheers

    Reply

  • Brian Roth avatar

    Posted on Sep 24, 2010 (permalink)

    Thanks for the suggestions.  Joan, I tried your method but ran into some difficulties due to the difference between using inline and form editing.  With form editing the onEdit event is really the only place to capture the values of the object being bound.  So I had to hook into the onEdit event and call some custom logic to bind the dropdowns and set the value.  Here's the function I used, in case it might help anyone else.  You'll need to change to 'tComboBox' instead of 'tDropDownList' if you're using combo boxes.

    populateFormDropDowns = function ($form, formDataItem) {
        // Populate any dropdowns with values
        $form.find('.t-dropdown').each(function () {
            var idProp = $.trim(this.id);
     
            var drop = $form.find('#' + idProp);
            var dd = drop.data('tDropDownList');
            var item = formDataItem;
     
            // Make sure there is a valid item that we are binding to and that there is a bound value
            if (item && item[idProp] != null) {
     
                // Set up an event to set the selected value after the data is bound
                drop.bind('dataBound', function (e) {
                    var drp = $(this).data('tDropDownList');
     
                    var selectItem = function (dataItem) {
                        //dataItem argument is a ComboBox data item.
                        if (item) return dataItem.Value == item[e.currentTarget.id];
                        return false;
                    }
                    drp.select(selectItem);
                });
            }
     
            dd.reload();
        })
    }

    Reply

  • Radu avatar

    Posted on Jul 7, 2011 (permalink)

    Hi Brian,

    I came across your solution and it seems to be just what I'm looking for. However, I get an "object undefined" error right at the beginning of the jQuery function:

    populateFormDropDowns = function ($form, formDataItem) {

    The formDataItem comes up undefined. What does your View setup look like? Here's mine (obviously, something's missing):

    .ClientEvents(events => events.OnEdit("populateFormDropDowns()"))

    Can you post an example? Thanks!

    Reply

  • Posted on Aug 27, 2011 (permalink)

    I solved this issue by reload the ComboBox
    e.g.
    <%:
    Html.Telerik()
    .ComboBoxFor(m => m)
    .AutoFill(true)
    .DataBinding(binding => binding.Ajax().Select("ForCombobox", "Categories"))
    .ClientEvents(e=>e.OnLoad("onAjaxComboLoad")) %>

    Then this is the JavaScript:
    function onAjaxComboLoad(e) {
        $(e.target).data("tComboBox").reload();
    }

    This worked for me

    Reply

  • Thomas avatar

    Posted on Jul 11, 2012 (permalink)

    If you want to initialize the ComboBox without using JavaScript, you can, but you need access to the text to be displayed in the ComboBox in the model (or the ViewData).
     
    For this example, assume the model has properties: "int? ItemID" and "string ItemText"

    <%:
    Html.Telerik()
         .ComboBoxFor(model => model.ItemId)
         .Items(item => 
              item.Add()
                   .Text(@Model.ItemText ?? string.Empty)
                   .Value(@Model.ItemId.HasValue ? @Model.ItemId.ToString() : string.Empty)
                   .Selected(true))
         .DataBinding(dataBinding => dataBinding.Ajax().Select("ActionName", "ControllerName")) %>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > ComboBox > Ajax binding DropDown - show current value
Related resources for "Ajax binding DropDown - show current value"

ASP.NET MVC ComboBox Features  |  Documentation  |  Demos  |  Telerik TV ]