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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Enabling / Disabling cell editing depending on dropdown value

Thread ID:

Created:

Updated:

Platform:

Replies:

127907 Dec 16,2016 11:52 PM UTC Dec 19,2016 11:35 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Dayne
Asked On December 16, 2016 11:52 PM UTC

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.



Saravanan Arunachalam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;