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!
1 Answer, 1 is accepted
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; }
} columns.Bound(c => c.RelationshipType)
.ClientTemplate("#=RelationshipType.RelationshipName#")
.EditorTemplateName("RelationshipTypeEditor").Width(240);// In the OrderViewModel:
public RelationshipType RelationshipType { get; set; }@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" },
})
)Kind Regards,
Anton Mironov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Rank 2
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!
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.