This is a migrated thread and some comments may be shown as answers.

Ajax binding DropDown - show current value

6 Answers 394 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

6 Answers, 1 is accepted

answered on 14 Sep 2010, 08:53 AM

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

answered on 14 Sep 2010, 09:10 AM

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

answered on 24 Sep 2010, 09:28 PM

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();

})

}

answered on 11 Jul 2012, 03:25 PM

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")) %>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Ajax binding DropDown - show current value

6 Answers, 1 is accepted