ASP.Net MVC Grid in-line edit with dropdown list not binding data when dropdown option selected

[Jason]

I'm having an issue with a Grid component.  I have 2 custom editors for 2 small dropdown lists.  Anytime I select anything other than the default options for either (or both) dropdown lists, the default still gets assigned to the field for some reason.  I've tried debugging but it seems that it's getting changed before anything is sent to the controller (defaults are already present in the post action).

I set the custom editors up using the instructions here.

This is the component itself

@(
Html.Kendo().Grid<CHAASAddInsuredsViewModel>()
.Name("AddlInsureds")
.Columns(columns =>
{
columns.Bound(c => c.FirstName).Width(130);
columns.Bound(c => c.MiddleInitial).Width(70);
columns.Bound(c => c.LastName).Width(150);
columns.Bound(c => c.DOB).Format("{0:MM/dd/yyyy}").Width(150);
columns.Bound(c => c.RelationshipType)
.ClientTemplate("#=RelationshipType.RelationshipName#")
.EditorTemplateName("RelationshipTypeEditor").Width(140);
columns.Bound(c => c.Gender)
.ClientTemplate("#=Gender.GenderName#")
.EditorTemplateName("GenderEditor").Width(150);
columns.Bound(c => c.SSN).Width(160)
.HtmlAttributes(new { @class = "text-center" });
@* .EditorTemplateName("SSNEditorTemplate"); *@
@* .ClientTemplate("<h4>XXX-XX-XXXX</h4>"); *@
columns.Command(c => { c.Edit(); c.Destroy(); });
}
)
.ToolBar(toolbar => toolbar.Create().Text("Add Family Member"))
.Editable(editable => editable.Mode(GridEditMode.InLine)
.ConfirmDelete("Continue to delete this record?")
.DisplayDeleteConfirmation("Continue to delete this record?"))
.Sortable()
.Scrollable()
@* .HtmlAttributes(new { style = "height:550px;" }) *@
.DataSource(d => d
.Ajax()
.Model(m =>
{
m.Id(i => i.Id);
m.Field(f => f.RelationshipType)
.DefaultValue(ViewData["defaultRelationshipType"] as HNL_Agents.Models.AddlInsuredRelationshipType);
m.Field(f => f.Gender)
.DefaultValue(ViewData["defaultGender"] as HNL_Agents.Models.AddlInsuredGender);
})
.Events(e => e.Error("error_handler"))
.Create(c => c.Action("Insured_CreateUpdate", "CHAAS", new { modelAppId = Model.AppId }))
.Read(r => r.Action("GetInsureds", "CHAAS", new { modelAppId = Model.AppId}))
.Update(c => c.Action("Insured_CreateUpdate", "CHAAS", new { modelAppId = Model.AppId }))
.Destroy(d => d.Action("RemoveInsureds", "CHAAS"))
)
)

 

My model is as follows.

public class CHAASAddInsuredsViewModel
{

[AllowNull]
[ScaffoldColumn(false)]
[HiddenInput]
public int? Id { get; set; }

[AllowNull]
[ScaffoldColumn(false)]
[HiddenInput]
public int? AppId { get; set; }


[UIHint("RelationshipTypeEditor")]
[Display(Name ="Relationship Type")]
public AddlInsuredRelationshipType RelationshipType { get; set; }

[Required]
[StringLength(35)]
[Display(Name = "Last Name")]
public string LastName { get; set; }

[Required]
[StringLength(35)]
[Display(Name = "First Name")]
public string FirstName { get; set; }

[AllowNull]
[Display(Name = "M.I.")]
[RegularExpression("^[a-zA-Z]$", ErrorMessage = "Middle Initial must be only 1 letter")]
public string? MiddleInitial { get; set; }

//public int Age { get; set; }

[Required]
[Display(Name = "Birth Date")]
[DataType(DataType.Date)]
[CHAASChildMaxAge(26, ErrorMessage = "The maximum age for a child is 26.")]
public DateTime DOB { get; set; }


[UIHint("GenderEditor")]
public AddlInsuredGender Gender { get; set; }

[Required]
[Display(Name = "Social Security #")]
[StringLength(9)]
//[UIHint("SSNEditorTemplate")]
[RegularExpression(@"^\d{9}|[1-9]{2}\d{1}-\d{2}-\d{4}$", ErrorMessage = "Invalid Social Security Number")]
public string SSN { get; set; }
}

 

These are the custom editors for the drop down lists

@(
Html.Kendo().DropDownList()
.Name("RelationshipType")
.DataValueField("RelationshipId")
.DataTextField("RelationshipName")
.BindTo((System.Collections.IEnumerable)ViewData["relationshipTypes"])
)

 

@(
Html.Kendo().DropDownList()
.Name("Gender")
.DataValueField("GenderId")
.DataTextField("GenderName")
.BindTo((System.Collections.IEnumerable)ViewData["genders"])
)

 

 

Please let me know if there is anything I'm missing or if you need any more information.  Thanks for the help!

[Anton Mironov]

Hi Jason,

Thank you for the code snippets and the details provided.

As the Controller code is not provided, I should point out that the options set for the population in the Grid should exist in the collection of the available options.

It can be seen the available options are available in the "relationshipTypes" collection.

In order to achieve the desired result, I decided to invest time and implement a sample project for the case. It is attached to this reply and implements your "RelationshipType" field:

    public class RelationshipType
    {
        public int RelationshipId { get; set; }

        public string RelationshipName { get; set; }
    }

Here is the column definition for the field:

                columns.Bound(c => c.RelationshipType)
                                   .ClientTemplate("#=RelationshipType.RelationshipName#")
                                    .EditorTemplateName("RelationshipTypeEditor").Width(240);

When we pointed the EditorTemplateName, it is not needed to add a DataAnnotation in the ViewModel:

// In the OrderViewModel:
public RelationshipType RelationshipType { get; set; }

And the EditorTemplate:

@model TelerikMvcApp8.Models.RelationshipType

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("RelationshipId")
        .DataTextField("RelationshipName")
        .BindTo(new List<TelerikMvcApp8.Models.RelationshipType>()
        {
            new TelerikMvcApp8.Models.RelationshipType { RelationshipId = 1, RelationshipName = "RelationshipName 1" },
            new TelerikMvcApp8.Models.RelationshipType { RelationshipId = 2, RelationshipName = "RelationshipName 2" },
            new TelerikMvcApp8.Models.RelationshipType { RelationshipId = 3, RelationshipName = "RelationshipName 3" },
            new TelerikMvcApp8.Models.RelationshipType { RelationshipId = 4, RelationshipName = "RelationshipName 4" },
            new TelerikMvcApp8.Models.RelationshipType { RelationshipId = 5, RelationshipName = "RelationshipName 5" },
        })
)

Feel free to make the needed tests on your side and let me know if this is the desired result.

Kind Regards,
Anton Mironov
Progress Telerik

[Jason]

Thanks Anton!  That seemed to take care of my issue.

 

I do have one other question for you, I'm trying to implement an editor template on the SSN field and everything seems to work just fine except it will not unmask on post...

Here's the grid component again and the Editor Template.  I searched everywhere trying to find a fix but nothing seems to be working.

@(
Html.Kendo().Grid<CHAASAddInsuredsViewModel>()
.Name("AddlInsureds")
.Columns(columns =>
{
columns.Bound(c => c.FirstName).Width(130);
columns.Bound(c => c.MiddleInitial).Width(70);
columns.Bound(c => c.LastName).Width(150);
columns.Bound(c => c.DOB).Format("{0:MM/dd/yyyy}").Width(150);
columns.Bound(c => c.RelationshipType)
.ClientTemplate("#=RelationshipType.TypeDesc#")
.EditorTemplateName("RelationshipTypeEditor").Width(240);
columns.Bound(c => c.Gender)
.ClientTemplate("#=Gender.GenderName#")
.EditorTemplateName("GenderEditor").Width(150);
columns.Bound(c => c.SSN).Width(160)
.HtmlAttributes(new { @class = "text-center" })
.EditorTemplateName("SSNEditorTemplate")
.ClientTemplate("XXX-XX-XXXX");
columns.Command(c => { c.Edit(); c.Destroy(); });
}
)
.ToolBar(toolbar => toolbar.Create().Text("Add Family Member"))
.Editable(editable => editable.Mode(GridEditMode.InLine)
.ConfirmDelete("Continue to delete this record?")
.DisplayDeleteConfirmation("Continue to delete this record?"))
.Sortable()
.Scrollable()
@* .HtmlAttributes(new { style = "max-width: 1180px; overflow: scroll;" }) *@
.DataSource(d => d
.Ajax()
.Model(m =>
{
m.Id(i => i.Id);
m.Field(f => f.RelationshipType)
.DefaultValue(ViewData["defaultRelationshipType"] as HNL_Agents.Data.Models.CHAAS.RelationshipType);
m.Field(f => f.Gender)
.DefaultValue(ViewData["defaultGender"] as HNL_Agents.Models.AddlInsuredGender);
})
.Events(e => e.Error("error_handler"))
.Create(c => c.Action("Insured_CreateUpdate", "CHAAS", new { modelAppId = Model.AppId }))
.Read(r => r.Action("GetInsureds", "CHAAS", new { modelAppId = Model.AppId}))
.Update(c => c.Action("Insured_CreateUpdate", "CHAAS", new { modelAppId = Model.AppId }))
.Destroy(d => d.Action("RemoveInsureds", "CHAAS"))
)
)

___EDITOR COMPONENT___

@(Html.Kendo().MaskedTextBoxFor(m => m)
    .UnmaskOnPost(true)
    .Mask("000-00-0000")
    .HtmlAttributes(new { @class = "text-center" })
    
)

 

Thanks for your help!

[Ivan Danchev]

Jason,

The UnmaskOnPost option is designed for scenarios where the MaskedTextBox is used in a form. The Grid is not a form and when you edit a record, no form submission occurs. Instead the edited record data is sent to the respective action with a standard AJAX request. This is why UnmaskOnPost  does not work in this case. Consider a workaround:

1. Attach a Change event handler to the MaskedTextBox:

.Events(ev => ev.Change("onMaskedTBChange"))

2. Add the event handler to your main page, where the Grid resides:

<script>
    function onMaskedTBChange(e) {
        var value = this.raw();
        var dataItem = $("#AddlInsureds").getKendoGrid().dataItem(this.wrapper.closest("tr"));
        dataItem.set("SSN", value);
    }
</script>

and in the handler set the unmasked value as SSN field value for the edited record.

 

 

 

[Jason]

Perfect, thanks Ivan!