Category / Section
How to make Dropdownlist enabled for Adding and disabled for Editing in grid?
2 mins read
Solution:-
We can select items from dropdownList while on Adding and make readonly on Editing using actionComplete event of the Grid. In the actionComplete event we have disable the dropdownList using disable method.
The following code example demonstrates how to select items from dropdownList while on Adding and make read only on Editing.
1. Render the Grid with actionComplete event.
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: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
actionComplete:"complete",
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100},
{ field: "CustomerID", headerText: "Customer ID", editType: ej.Grid.EditingType.Dropdown, width: 100 },
{ field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },
{ field: "ShipCountry", headerText: "Ship Country", width: 100, }
],
});
});
</script>
MVC
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.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);
});
})
.ClientSideEvents(eve => eve.ActionComplete("complete"))
.Columns(col =>{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();
col.Field("CustomerID").HeaderText("Customer ID") .EditType(EditingType.Dropdown).Width(100).Add();
col.Field("Freight").HeaderText("Freight").Width(100).Format("{0:C}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
}))
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP
[aspx]
<ej:Grid ID="Grid" runat="server" AllowPaging="True">
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<ClientSideEvents ActionComplete="complete"/>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="100" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" EditType="Dropdown" Width="100"/>
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="100"/>
<ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100"/>
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}
}
ASP.NET Core
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" action-complete="complete">
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings>
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="100"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="100"></e-column>
<e-column field="Freight" header-text="Freight" width="100" format="{0:C}"></e-column>
<e-column field="ShipCountry" header-text="Ship Country" width="100"></e-column>
</e-columns>
</ej-grid>
Angular
<ej-grid #grid [dataSource]="gridData" allowPaging="true" (actionComplete)="onactioncomplete($event)" [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
<e-columns>
<e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
<e-column field="Freight" headerText="Freight" format="{0:C}" width="100"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="100"></e-column>
</e-columns>
</ej-grid>
[ts file]
@ViewChild('grid') GridModel: EJComponents<any, any>;
export class GridComponent {
onActionComplete(e: any){
if(e.requestType=="beginedit"){
$("#ejControl_0CustomerID").ejDropDownList("disable");
}
}
}
2. In the actionComplete event of the Grid, while args.requestType as “beginEdit” we have set the disable method of DropdownList to make readonly and select items from dropdownList while adding the records.
<script type="text/javascript">
function complete(args) {
if (args.requestType == "beginedit") {
$("#GridCustomerID").ejDropDownList("disable");
}
}
</script>
Output Screenshot:
Img1: While adding the records
Img2: While Editing the Records
Sample Link:- https://jsplayground.syncfusion.com/wvyvg2zs
