There are quite a number of entries in Stackoverflow about kendo dropdownlists in kendo grids but I can't find one that addresses this issue.
Architecture:
View --> popup window view with grid, edit mode "InLine"
I have 3 fields that need a dropdownlist in the grid. I use the UIHint attribute on the model to render these dropdowns
The grid appears as it should when the popup it is in loads, but when I go to edit a line item (edit mode: GridEditMode.InLine), I get a javascript error: invalid token or symbol, and the grid does not go into edit mode.
If I comment out the UIHint attributes then the grid goes into edit mode. If I uncomment any of the three, it fails with the invalid token error.
Is there a bug in the Kendo architecture that prevents the dropdown from rendering in a grid in a partial view?
Here is my popup view:
<div style="width:700px;">
@(Html.Kendo().Grid<xxy.Models.AgencyBillingRateModel>()
.Name("AgencyBillingRateGrid")
.AutoBind(false)
.HtmlAttributes("width:700px")
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text(@Localizer["Edit"].Value); command.Destroy().Text(@Localizer["Destroy"].Value); }).Width(150);
columns.Bound(workItem => workItem.Discipline).Width(150);
columns.Bound(workItem => workItem.VisitType).Width(150);
columns.Bound(workItem => workItem.PayCode).Width(150);
columns.Bound(workItem => workItem.PayCodeCondition).Width(250);
columns.Bound(workItem => workItem.BillingRate).Width(150);
columns.Bound(workItem => workItem.BillingMinutes).Width(150);
columns.Bound(workItem => workItem.GraceMinutesMinimum).Width(200);
columns.Bound(workItem => workItem.PerMileTravelReimb).Width(170);
columns.Bound(workItem => workItem.DefaultSurcharge).Width(170);
})
.ToolBar(toolbar =>
{
toolbar.Create().Text(@Localizer["NewRecord"].Value);
})
.Events(e => e.Edit("onEditAgencyBillingRate"))
.Events(e => e.Save("onSaveAgencyBillingRate"))
.HtmlAttributes(new { style = "height:400px;" })
//.Editable(ed => ed.Mode(GridEditMode.InLine)) //.TemplateName("PractitionerTemplate").Window(w => w.Title(@Localizer["Edit Medical Provider"].Value).Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" })))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Navigatable()
.Sortable()
.Scrollable(src => src.Height(400))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("AGBError_handler"))
.Model(m =>
{
m.Id(p => p.AgencyBillingRateId);
m.Field(p => p.AgencyBillingRateId).Editable(false);
})
.Create(create => create.Action("AgencyBillingRateCreate", "AgencyBillingRate"))
.Read(read => read.Action("AgencyBillingRateRead", "AgencyBillingRate").Data("LoadAgencyBillingRate"))
.Update(update => update.Action("AgencyBillingRateUpdate", "AgencyBillingRate"))
.Destroy(delete => delete.Action("AgencyBillingRateDelete", "AgencyBillingRate"))
)
)
<br /><br />
</div>
Here is one of the three dropdowns; stored in Views/Shared/EditorTemplates
@model HomeCare2.Models.AgencyBillingRateModel
@(Html.Kendo().DropDownListFor(m => m)
.HtmlAttributes(new { style = "width: 100" })
.DataTextField("name")
.DataValueField("id")
.OptionLabel(@Localizer["Please Select"].Value)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAgencyBillingMinutes", "DropDownList");
});
})
)
And here's the model:
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace xxy.Models
{
public class AgencyBillingRateModel
{
[Display(Name = "Agency Billing Rate Id")]
public int AgencyBillingRateId { get; set; }
[Display(Name = "Provider")]
public string ProviderId { get; set; }
[Display(Name = "Agency")]
public string AgencyId { get; set; }
//[UIHint("DisciplineNVL")]
[Display(Name = "Discipline")]
public string Discipline { get; set; }
//[UIHint("VisitTypeNVL")]
[Display(Name = "Visit Type")]
public string VisitType { get; set; }
[Display(Name = "Billing Rate Code")]
public string PayCode { get; set; }
[Display(Name = "Billing Rate Condition")]
public string PayCodeCondition { get; set; }
[DisplayFormat(DataFormatString = "{0:n2}", ApplyFormatInEditMode = true)]
[Display(Name = "Billing Rate")]
public decimal BillingRate { get; set; }
//[UIHint("AgencyBillingMinutesDDL")]
[Display(Name = "Billing Minutes")]
//[DisplayFormat(DataFormatString = "{0}", ApplyFormatInEditMode = true)]
public int BillingMinutes { get; set; }
[Display(Name = "Default Surcharge")]
[DisplayFormat(DataFormatString = "{0:n2}", ApplyFormatInEditMode = true)]
public decimal DefaultSurcharge { get; set; }
[Display(Name = "Per Mile Travel Reimbursement")]
[DisplayFormat(DataFormatString = "{0:n2}", ApplyFormatInEditMode = true)]
public decimal PerMileTravelReimb { get; set; }
[Display(Name = "Minimum Grace Minutes")]
[DisplayFormat(DataFormatString = "{0}", ApplyFormatInEditMode = true)]
public int GraceMinutesMinimum { get; set; }
[Display(Name = "Date Created")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yy hh:mm}")]
public DateTime? CreatedDate { get; set; }
[Display(Name = "Created By")]
public string CreatedBy { get; set; }
[Display(Name = "Date Updated")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yy hh:mm}")]
public DateTime? UpdatedDate { get; set; }
[Display(Name = "Updated By")]
public string UpdatedBy { get; set; }
}
}
The problem was with the method that gets the data for the dropdownlist. In the code file, the id and name fields were string and integer respectively, but I was loading string and string into the control. That broke it. So make sure your data types for id and name, or whatever you call them, is consistent with how you define them in the dropdownlist.