We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to make Dropdownlist enabled for Adding and disabled for Editing in grid?

Platform: jQuery |
Control: ejGrid
Tags: editing, ejgrid, 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:

While adding the records

Img1:  While adding the records

While Editing the Records

Img2:  While Editing the Records

Sample Link:-  https://jsplayground.syncfusion.com/wvyvg2zs

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile