I am trying to generate a Telerik.Grid() PopUp with 4 dropdown menu's in them. Seleting a value in one dropdown shoud change the value in the other dropdown's.
I am using VS 2010, C# 4.0 and Telerik 2010.3.1110.235.
I am trying to implement the example provided http://demos.telerik.com/aspnet-mvc/grid/editingajax.
I am getting the following Javascript errors one after the other and I see the dropdown binding only to the first Item in the list. On Edit mode, I don't see any popup other than a very small box with Close 'X' on it.
- Microsoft JScript runtime error: Object doesn't support this property or method
- Microsoft JScript runtime error: 'find(...).data(...)' is null or not an object
- Microsoft JScript runtime error: 'parent().data(...)' is null or not an object
But the same works fine if I replace the Telerik.Dropdown with Html.DropDownList, but the width and look of the Dropdown is all messed up and I am not sure if this works fine for the built in functionalities if any, since it is not the build in one. But still I could see this Javascript error.
Microsoft JScript runtime error: 'find(...).data(...)' is null or not an object
Model:
<P>[DisplayName("Id")]<BR>[UIHint("SomeList"), Required]<BR>public string City {get;set; }</P>View:
<P><%= Html.Telerik().Grid(Model.Name) <BR>.Name("SomeList")<BR>.DataKeys(keys => <BR>{ <BR>keys.Add(m => m.UniqueId); <BR>}) <BR>.ToolBar(commands => commands.Insert().ButtonType(type).ImageHtmlAttributes(new {style="margin-left:0"})) <BR>.DataBinding(dataBinding => { <BR>dataBinding.Ajax()<BR>.Select("_Select", "ControllerName")<BR>.Insert("_Insert", "ControllerName")<BR>.Update("_Save", "ControllerName")<BR>.Delete("_Delete", "ControllerName"); <BR>})<BR>.Columns(columns => {<BR>columns.Bound(m => m.Id).Title("Id"); </P> <P>{Some more columns }</P> <P>columns.Command(commands => {<BR>commands.Edit().ButtonType(type); <BR>commands.Delete().ButtonType(type);<BR>}).Title("Action").Width(80); <BR>}) <BR>.Editable(editing => editing.Mode(GridEditMode.PopUp))<BR>.ClientEvents(events => events.OnEdit("onEdit"))<BR>.Pageable()<BR>.Scrollable(s => s.Height("100px"))<BR>.HtmlAttributes(new { style = "width:545px" })<BR>.Sortable() <BR>%></P>
<P><script type="text/javascript"></P> <P><BR>function onEdit(e) { <BR>$(e.form).find('#Id').data('tDropDownList').select(function (dataItem) {<BR>return dataItem.Text == e.dataItem['Id']<BR>});<BR>}</P>ClientTemplates - SomeList.ascx
<P><%= Html.Telerik().DropDownList()<BR>.Name("City")<BR>.BindTo(new SelectList((IEnumerable)ViewData["CitiesItem"], "Value", "Text"))</P>Any help is greatly appreciated!
Thank you!