kendo ui mvc grid editortemplate issue

Question

What I am trying to do :

1. I have a form with Kendo UI controls like DatePicker(s), Dropdownlist(s), NumericTextBox(s) on the first half of the page

2. Second half has a Kendo UI MVC Grid control

   • This Kendo UI Grid control has 8 columns in which 2 columns has a Kendo dropdownlist(EditorTemplate) and CheckBox(EditorTemplate).
   • The Kendo UI Grid control is Ajax binding.

3. When the save button is clicked, all the values from the Kendo UI controls(first half) and Kendo UI grid control(second half) together are posted as a Json object via "Ajax Post" to the controller.

4. I am using Model binding for the above process

Issues or the problem I am facing :

The first half of the form with other Kendo UI controls are posting their values properly to the controller, but where as the Kendo UI Grid is having some problems posting some column values

• The columns in the Kendo UI Grid with the datatype decimal is not posting the values

• The EditorTemplate controls like the CheckBox and the kendo dropdown when selected shows the values "[Object Object]" for dropdownlist and the actual value of the boolean rather than the checkbox control.

Answer 1

I doubt you want the Grid as part of the Form. Typically the Grid interacts via ajax and not via a batch Form submit with other controls - unwrap it from the Form. This alone may save you a headache.

1st Half:

Try to use Kendo().DatePickerFor(), Kendo().DropDownListFor(), etc. You do not need to explicitly name these Kendo controls via .Name(). This will help you with the model binding.

2nd Half:

Use another data type other than decimal. You think that is tough? Try using a TimeSpan type for time-of-day with no date attached (grown men cry).

You do not need, typically, an EditorTemplate for boolean/checkboxes. Just use this trick (asuming your are using Razor, since you left no code).

columns.Bound(b => b.IsActive).ClientTemplate("<input type='checkbox' ${ IsActive == true ? checked='checked' : ''} disabled />");

Your best bet for your Grid DDLs is

columns.ForeignKey(b => b.CustodianIdPrimary, Model.Custodians, "Id", "FullName").EditorViewData(new {ProjectId = Model.ProjectId}).EditorTemplateName("CustodianDropDownList");

Where the Model.Custodians is a List of all possible items. You can then bind your EditorTemplate to this List, or make an ajax call to populate if you need a subset in this particular DDL, like this

@model int
@(Html.Kendo().DropDownList()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
    .DataValueField("Id")
    .DataTextField("FullName")
    .OptionLabel("Unassigned")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("ReadProjectCustodiansDdl", "SysMaint", new {projectId = ViewData["ProjectId"]}))
    )
)

But here is the Kendo supplied example

@model object       
@(
    Html.Kendo().DropDownListFor(m => m)        
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

Note the use of the EditorViewData parameter in my initial columns.ForeignKey, that is used in this eample to pass the whole list.

Good luck!