Category / Section
How to disable editing for a cell based on another column value?
1 min read
In certain cases, we may like to disable editing for a cell based on the value of another column in the row. We can achieve this using the actionComplete event of the Grid.
Solution
Let us consider a grid with editing enabled and based on the value of the one column, another column to be enabled/disabled.
Example
Let us now see in detail how to achieve the above requirement in grid.
- Render the Grid control
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: ["add","edit","delete","update","cancel"] },
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "Freight", format: "{0:C}" },
{ field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.Numeric },
{ field: "ShipCountry", headerText: "Ship Country" },
],
actionComplete: "complete",
});
});
</script>
MVC:
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting())
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("Freight").Format("{0:c2}").Add();
col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Numeric).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
})
.ClientSideEvents(eve=>eve.ActionComplete("complete"))
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="Grid" runat="server" AllowPaging="True">
<ClientSideEvents ActionComplete="complete" />
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="Freight" Format="{0:C}" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="Numeric"/>
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new NorthwindDataContext().Orders;
this.Grid.DataBind();
}
}
- In the actionComplete event of the grid, the textbox corresponding to the EmployeeID column is disabled based on the value of the ShipCountry column value.
function complete(args) {
if (args.requestType == "beginedit") {
if (this.getCurrentViewData()[args.rowIndex]["ShipCountry"] == "France")//checking condition for some column
//as the column edit type is numeric edit, we disable the numeric text box control
$("#GridEmployeeID").ejNumericTextbox("disable");//Grid - GridId, EmployeeID- field name of the column that is to be disabled
}
}
