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