I have a KendoUI grid that displays foreign key drop-down lists and other fields such as dates, and for some reason some random text / characters are added before and after the control is rendered. In this block below, <$Bw$> <$Bx$> is displayed in the browser as text before the selection list is displayed, followed by <$By$> .
<td role="gridcell" data-container-for="StateProvinceId"><$Bw$> <$Bx$><span style="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="StateProvinceId_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input"> </span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon ki-arrow-s">select</span></span></span><input data-val="true" data-val-number="The field StateProvinceId must be a number." data-val-required="The StateProvinceId field is required." id="StateProvinceId" name="StateProvinceId" type="text" value="0" data-role="dropdownlist" style="display: none;" data-bind="value:StateProvinceId" class="valid"></span><script> jQuery(function(){jQuery("#StateProvinceId").kendoDropDownList({"dataSource":[],"dataTextField":"Text","dataValueField":"Value"});}); </script><$By$> <span class="field-validation-valid" data-valmsg-for="StateProvinceId" data-valmsg-replace="true"></span></td>
The FK editor template is simply the default.
@using Kendo.Mvc.UI @model object @( Html.Kendo().DropDownListFor(m => m) .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]) )
This happens with all displayed fields that have the KendoUI editor template.
Grid Code
@using Kendo.Mvc.UI @model Data.DataModels.Person @(Html.Kendo().Grid<Data.ViewModels.LicenseVM>() .Name("LicensesGrid") .Columns(columns => { columns.ForeignKey(p => p.StateProvinceId, (System.Collections.IEnumerable)ViewData["StateProvinces"], "StateProvinceId", "Name") .Title("State"); columns.ForeignKey(p => p.LicenseTypeId, (System.Collections.IEnumerable)ViewData["LicenseTypes"], "LicenseTypeId", "Name") .Title("Type"); columns.Bound(p => p.LicenseNumber).Width(150); columns.Bound(p => p.ExpirationDate).Width(150); columns.Command(commands => { commands.Edit(); // The "edit" command will edit and update data items commands.Destroy(); // The "destroy" command removes data items }).Title("").Width(200); }) .ToolBar(toolBar => { toolBar.Create().Text("Add License"); }) .DataSource(dataSource => dataSource .Ajax() .Events(events => events.Error("error_handler")) .Model(model => { model.Id(p => p.PersonLicenseId); model.Field(p => p.PersonId).Editable(false).DefaultValue(@Model.PersonId); }) .Read(read => read.Action("_GetLicenses", "Person", new { PersonId = Model.PersonId })) .Create(create => create.Action("_AddLicense", "Person")) .Update(update => update.Action("_EditLicense", "Person")) .Destroy(destroy => destroy.Action("_DeleteLicense", "Person")) ) ) <script type="text/javascript"> function errorHandler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } } </script>
source share