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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Enabling / Disabling cell editing depending on dropdown value

Enabling / Disabling cell editing depending on dropdown value

Hi,

I want to enable / disable edition on a cell depeding on the dropdown value selected by the user. This is my code.

MVC
@(Html.EJ().Grid<Contratos>("Grid")
            .Datasource(ds => ds.Json((IEnumerable<Contratos>)ViewBag.ListadoContratos).InsertURL("InsertContrato").UpdateURL("UpdateContrato").Adaptor(AdaptorType.RemoteSaveAdaptor))
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);                    
                });
            })
            .Columns(col =>
            {
                col.Field("id").IsPrimaryKey(true).Visible(false).Add();  col.Field("Tipo").HeaderText("Tipo").Width(42).ForeignKeyField("Value").ForeignKeyValue("Text").TextAlign(TextAlign.Center).AllowEditing(true).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).DataSource(((IEnumerable<object>)ViewBag.Tipo)).Add();
                col.Field("Fecha_Inicio").HeaderText("Fecha de Inicio").Format("{0:dd/MM/yyyy}").TextAlign(TextAlign.Center).Width(29).AllowEditing(true).EditType(EditingType.Datepicker).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();               
                col.Field("Activo").HeaderText("Activo").DisplayAsCheckbox(true).TextAlign(TextAlign.Center).Width(37).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();
            })
            .ClientSideEvents(eve => eve.ActionComplete("Complete"))

    )

Javascript

function Complete(args) {
           if (args.requestType == "beginedit" || args.requestType == "add") {
               $("#GridTipo").ejDropDownList({ change: "ChangeTipo" });//bind the change event to dropdown
           }
       }

      //This part of the code, I know is not working, and this is what I want..
       function ChangeTipo(e) {
           if (e.text == "Externo") {
               $('#GridContratosId_AltaNominal').prop("disabled", true);
               $('#GridContratosFecha_Inicio').prop("disabled", true);
               $('#GridContratosFecha_Fin').prop("disabled", true);
               $('#GridContratosSueldo').prop("disabled", true);
           }
           else {
               $('#GridContratosId_AltaNominal').prop("Alloe",false);
               $('#GridContratosFecha_Inicio').prop("disabled", false);
               $('#GridContratosFecha_Fin').prop("disabled", false);
               $('#GridContratosSueldo').prop("disabled", false);
           }
       }


So, the thing is I want, that depending of the selected value of the dropdown in the grid, enable or disable another fields in the grid.

Best regards.



1 Reply
SA Saravanan Arunachalam Syncfusion Team December 19, 2016 11:35 AM UTC

Hi Dayne, 
Thanks for contacting Syncfusion’s support. 
We understood from your query you need to enable/disable the edited fields based on the seleted value from specified DropdownList on the edit form and we have achived this requirement by using the enable/disable method of editor controls such as DropdownList and NumericTextbox  and also add/remove the e-disabled class from other html controls in edit form. Please refer to the below code example and online demo link. 
@(Html.EJ().Grid<OrdersView>("Editing") 
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
     . . .    
     .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).EditType(EditingType.Dropdown).Add(); 
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).EditType(EditingType.Dropdown).Width(90).Add(); 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).EditType(EditingType.Numeric).Format("{0:C}").NumericEditOptions(new Syncfusion.JavaScript.Models.EditorProperties() { DecimalPlaces = 2 }).Add(); 
            col.Field("ShipName").HeaderText("ShipName").Width(150).AllowEditing(true).Add(); 
            col.Field("ShipCity").HeaderText("ShipCity").Width(90).EditType(EditingType.Dropdown).Add(); 
            col.Field("Verified").HeaderText("Verified").Width(90).EditType(EditingType.Boolean).AllowEditing(false).Add(); 
        }) 
         .ClientSideEvents(eve => { eve.ActionComplete("complete").ActionBegin("begin"); }) 
) 
<script type="text/javascript"> 
    function complete(args) { 
        if (args.requestType == "beginedit" || args.requestType == "add") { 
            $("#EditingCustomerID").ejDropDownList({ change: "onValueChange" });//bind the change event to dropdown 
 
        } 
    } 
    function onValueChange(args) { 
        if (args.text == "VINET") { 
            //call disable method for editor controls 
            $("#EditingEmployeeID").ejDropDownList("disable"); 
            $("#EditingShipCity").ejDropDownList("disable"); 
            $("#EditingFreight").ejNumericTextbox("disable"); 
            //add e-disabled class for other html controls 
            $("#EditingShipName").addClass("e-disabled"); 
            $("#EditingVerified").addClass("e-disabled"); 
        } 
        else { 
            //call enable method for editor controls 
            $("#EditingEmployeeID").ejDropDownList("enable"); 
            $("#EditingShipCity").ejDropDownList("enable"); 
            $("#EditingFreight").ejNumericTextbox("enable"); 
            //remove e-disabled class for other html controls 
            $("#EditingShipName").removeClass("e-disabled"); 
            $("#EditingVerified").removeClass("e-disabled"); 
        } 
    } 
</script> 
Regards, 
Saravanan A. 


Loader.
Up arrow icon