How correctly enable/disable columns of a grid based on a row value
Hi!
I have a logic to enable/disable specific columns of a grid based on a row value. The script works fine when editing the row but not the first time when is loaded or the first time when the flag value is changed. This is my code of the grid and the script related (column Paid is the flag value to enable/disable):
@(Html.EJS().Grid("OrderForm").DataSource(dataManager => { dataManager.Url("/Order/Datasource").UpdateUrl("/Order/Update").InsertUrl("/Order/Insert").RemoveUrl("/Order/Remove").Adaptor("UrlAdaptor"); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Pedido").Width("100").IsPrimaryKey(true).IsIdentity(true).Add();
col.Field("PetID").HeaderText("PetID").Width("50").Visible(false).Add();
col.Field("Price").HeaderText("Precio").Width("70").MinWidth("80").MaxWidth("60").ValidationRules(new { required = true }).Add();
col.Field("Paid").HeaderText("Pagado").Width("80").Type("boolean").DisplayAsCheckBox(true).EditType("booleanedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).HeaderTextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).DefaultValue(false).Add();
col.Field("DeliveryAddress").ForeignKeyField("DeliveryAddress").ForeignKeyValue("DeliveryAddressText").DataSource((IEnumerable<object>)ViewBag.Addresses).HeaderText("Dirección de entrega").Width("180").MinWidth("130").MaxWidth("230").ValidationRules(new { required = true }).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Add();
col.Field("ProductionDate").HeaderText("Día de producción").Width("130").EditType("datepickeredit").Format("dd/MM/yyyy").ValidationRules(new { required = true }).DefaultValue(Utility.ConvertToLocal(DateTime.Now)).Add();
col.Field("DeliveryDate").HeaderText("Día de entrega").Width("130").EditType("datepickeredit").Format("dd/MM/yyyy").ValidationRules(new { required = true }).DefaultValue(Utility.ConvertToLocal(DateTime.Now)).Add();
col.Field("Ingredients").HeaderText("Ingredientes").Width("200").MinWidth("150").MaxWidth("250").AllowEditing(false).Add();
})
.Toolbar(toolbar)
.Locale("es-MX")
.AllowPaging()
.AllowSorting()
.AllowTextWrap()
.EditSettings(edit => { edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true).ShowDeleteConfirmDialog(true).AllowEditOnDblClick(false); })
.SortSettings(sort => sort.Columns(cols))
.PageSettings(page => page.PageSize(10))
.ActionComplete("complete")
.ActionFailure("failure")
.Load("load")
.Render()
)
<script>
function complete(args) {
if (args.requestType === "add" || args.requestType === "beginEdit") {
args.form.autocomplete = "off";
}
if (args.requestType === "add") {
this.columns[2].allowEditing = true;
this.columns[4].allowEditing = true;
this.columns[5].allowEditing = true;
this.columns[6].allowEditing = true;
}
if (args.requestType === 'beginEdit') {
this.columns[2].allowEditing = !args.rowData.Paid;
this.columns[4].allowEditing = !args.rowData.Paid;
this.columns[5].allowEditing = !args.rowData.Paid;
this.columns[6].allowEditing = !args.rowData.Paid;
}
}
function failure(args) {
ej.popups.hideSpinner(document.getElementById('OrderForm'))
if (args.error[0]) {
alert(args.error[0].error.responseText.split("HTTP Error 400.0 - ")[1].split('</h3>')[0]);
} else {
alert(args.error);
}
}
function load() {
this.columns[5].format = { type: 'date', format: 'dd/MM/yyyy' };
this.columns[6].format = { type: 'date', format: 'dd/MM/yyyy' };
}
</script>
If I cancel the edit and try again... it works:
Thanks, regards!
SIGN IN To post a reply.
5 Replies
Hi! Yes, works fine using actionBegin. But only when I try to disable the foreign column, it is not completely disabled (I can still open the dropdown box)
Any idea how to disable it?
Thanks, regards!
SIGN IN To post a reply.
