How to make Dropdownlist enabled for Adding and disabled for Editing in grid?
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://ej2.syncfusion.com/home/index.html#platform
Conclusion
I hope you enjoyed learning about how to make Dropdownlist enabled for Adding and disabled for Editing in grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
