I have requirement to allow editable row for one column in Parent row of Parent-Child Grid. I am able to display field in popup window by hiding all other non required field. But I am getting validation message for hide field while update the required field. Please help me to find out the solution either displays only required field in popup window without hiding all other fields or how to stop validation for non-required field in popup window. Below is my code in View:
@model IEnumerable<StarTrax.Mvc.Models.ToFindListViewModel>
@{
ViewData["Title"] = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.Name).Width(110).Title("List Name");
columns.Bound(e => e.CreatedAt).Width(110).Title("Create Date").Format("{0:MM/dd/yyyy}");
columns.Bound("").Width(110).Title("Created By");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)).HtmlAttributes(new { style = "width:300px;font-size:12px;height: 200px;" })
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.EntityId);
})
.Read(read => read.Action("GetAll", "ToFindList"))
.Update(update => update.Action("Edit", "ToFindList"))
.Destroy(update => update.Action("Delete", "ToFindList"))
)
.Events(events =>
{
events.DataBound("dataBound");
events.Edit("hideField");
})
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid< StarTrax.Mvc.Models.AssetToFindViewModel> ()
.Name("grid_#=EntityId#")
.Columns(columns =>
{
columns.Bound(o => o.Asset.EPC.BarCode).Width(110).Title("Barcode");
columns.Bound(o => o.Asset.SerialNumber).Width(110).Title("Serial Number");
columns.Bound(o => o.Asset.Name).Width(200).Title("Asset Name");
columns.Bound(o => o.Asset.Status).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetToFindAssets", "ToFindList", new { toFindListId = "#=EntityId#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function hideField(e) {
$("#CreatedAt").hide();
$("#CreatedAt").editable = false;
$("label[for='CreatedAt']").hide();
$("#OrganizationId").hide();
$("#OrganizationId").editable = false;
$("label[for='OrganizationId']").hide();
$("#CreatedBy").hide();
$("#CreatedBy").editable = false;
$("label[for='CreatedBy']").hide();
$("#LastModifiedBy").hide();
$("#LastModifiedBy").editable = false;
$("label[for='LastModifiedBy']").hide();
$("#UpdatedAt").hide();
$("#UpdatedAt").editable = false;
$("label[for='UpdatedAt']").hide();
$("#EntityId").hide();
$("#EntityId").editable = false;
$("label[for='EntityId']").hide();
$("#Deleted").hide();
$("#Deleted").editable = false;
$("label[for='Deleted']").hide();
}
</script>
<script type="text/javascript">
function error_handler(e) {
debugger;
if (e.errors) {
var message = "Error:\n";
var grid = $('#locationGrid').data('kendoGrid');
var gridElement = grid.editable.element;
var validationMessageTemplate = kendo.template(
"<div id='#=field#_validationMessage' class='k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error' " +
"style='margin: 0.5em;' data-for='#=field#' data-val-msg-for='#=field#' role='alert'>" +
"<span class='k-icon k-warning'> " +
"</span > " +
"#=message#" +
"<div class='k-callout k-callout-n'> " +
"</div > " +
"</div>"
);
$.each(e.errors, function (key, value) {
if (value.errors) {
gridElement.find("[data-valmsg-for=" + key + "],[data-val-msg-for=" + key + "]").replaceWith(validationMessageTemplate({ field: key, message: value.errors[0] }));
gridElement.find("input[name=" + key + "]").focus();
//alert(value.errors[0]);
}
});
grid.one("dataBinding", function (e) {
e.preventDefault();
});
}
}
</script>
1 Answer, 1 is accepted
By default all value type fields (integers, dates, etc.) are required. All reference types are not required unless they are decorated with the Required data annotation attribute.
Therefore, to make a field not required, if it is a value type change its type to a nullable, for example:
public DateTime? CreatedAt { get; set; }If it is a reference type, make sure it does not have a Required attribute.
e.g.
[Required] // remove this attributepublic string Name { get; set; }Regarding the popup editor, instead of manually hiding the fields within the edit event handler, I would recommend you to create a custom editor template which contains only the fields that you want to edit. For further information about custom popup editors, please refer to the following sample:
Although the above sample is MVC 5, the very same approach applies for MVC Core.
Regards,
Georgi
Progress Telerik