In the Edit Dialogue allow a field to be editable based on a selected value.

[Danyelle]

I have two Fields called Location and Reference. When I open the Edit Dialogue I want the reference field to be disabled. If the user picks a certain Location I want the reference to become enabled. I wonder if I could set allow editing to false on the Reference Column and then change it to allow editing = true in the On Change part of the Location in the javascript?

I have attached a demo that shows what I can currently do. When the dialogue is opened reference should be grey. When the user selects Truck or Substation the Reference should become enabled. If the user selects something else the Reference should be disabled.

Code:

<ejs-grid id="Grid" dataBound="dataBound" height="510px"  allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" showColumnChooser="true" toolbarClick="toolbarClick" printComplete='printComplete' actionComplete="actionComplete" actionBegin="actionBegin" toolbar=toolbarItems>

      

        <e-grid-columns>

            <e-grid-column field="Test" headerText="Add Test" template="#test" allowFiltering="false" width="80"></e-grid-column>

            <e-grid-column field="LocationDescription" headerText="Location" valueAccessor="locationAccessor" width="120"></e-grid-column>

            <e-grid-column field="ToolID" headerText="ID" valueAccessor="idAccessor" isIdentity="true" isPrimaryKey="true" width="50"></e-grid-column>

            <e-grid-column field="LocationID" headerText="Location" visible="false" editType="dropdownedit" edit="@(new {create = "createLocation", read = "readLocation", destroy = "destroyLocation", write = "writeLocation"})" width="50"></e-grid-column>

            <e-grid-column field="ReferenceID" headerText="Reference" visible="false"  editType="dropdownedit" edit="@(new {create = "createReference", read = "readReference", destroy = "destroyReference", write = "writeReference"})" width="50"></e-grid-column>

          ...

        </e-grid-columns>

    </ejs-grid>

 var locationValue;

    var locationElem;

    var locationObject;

    var locationData = @Html.Raw(Json.Serialize(@Model.Locations.ToArray()));

    var referenceElem;

    var referenceObject;

    var truckData = @Html.Raw(Json.Serialize(@Model.Trucks.ToArray()));

    var substationData = @Html.Raw(Json.Serialize(@Model.Substations.ToArray()));

    function createLocation() {

        //  create a input element

        return document.createElement('input');

    }

    function readLocation(args) {

        // return the value which will be saved in the grid

        return locationObject.value;

    }

    function destroyLocation() {

        // destroy the custom component.

        locationObject.destroy();

    }

    function writeLocation(args) {

        // create a dropdown control

        locationObject = new ej.dropdowns.DropDownList({

            dataSource: locationData,

            placeholder: args.column.headerText,

            value: args.rowData[args.column.field],

            floatLabelType: "Always",

            fields: { text: "description", value: "locationID" },

            change: function () {

                if (locationObject.value === 1) {

                    referenceObject.dataSource = truckData;

                    referenceObject.fields = { value: 'truckID', text: 'description' };

                }

                else if (locationObject.value === 2) {

                    referenceObject.dataSource = substationData;

                    referenceObject.fields = { value: 'substationID', text: 'name' };

                } else {

                    referenceObject.dataSource = null;

                    referenceObject.fields = { value: '', text: '' };

                }

                referenceObject.dataBind();

                

            }

        });

        //render the component

        locationObject.appendTo(args.element);

    }

    function createReference() {

        //  create a input element

        return document.createElement('input');

    }

    function readReference(args) {

        // return the value which will be saved in the grid

        return referenceObject.value;

    }

    function destroyReference() {

        // destroy the custom component.

        referenceObject.destroy();

    }

    function writeReference(args) {

        debugger;

        // create a dropdown control

        referenceObject = new ej.dropdowns.DropDownList({

            placeholder: args.column.headerText,

            floatLabelType: "Always"

        });

        if ((referenceObject.dataSource.length === 0 || referenceObject.dataSource === undefined) && (args.rowData.ReferenceID !== undefined || args.rowData.ReferenceID !== null)) {

            if (args.rowData.LocationID === 2) {

                referenceObject.dataSource = substationData;

                referenceObject.fields = { value: 'substationID', text: 'name' };

                args.element.value = args.rowData.ReferenceID;

            }

             else if (args.rowData.LocationID === 1) {

                referenceObject.dataSource = truckData;

                referenceObject.fields = { value: 'truckID', text: 'description' };

                args.element.value = args.rowData.ReferenceID;

            } else {

                args.element.value = "";

            }

        }

        if (args.rowData.LocationID === undefined) {

            args.element.value = "";

        }

        //render the component

        referenceObject.appendTo(args.element);

    }

Attachment: EditFieldsDemo_557545c9.zip

[Danyelle]

Also how do I make the Reference field required only If the user selects truck or substation?

[Thiyagu Subramani]

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

Based on your shared information we suspect that you need to enable one dropdown (Location column)  based on another dropdown (Reference column) in dialog editing. To achieve this requirement we suggest you to use dropdown’s enabled property instead of allowEditing as false. 

We have already explained this requirement in below documentation link. Please refer it. 

UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/ 

https://ej2.syncfusion.com/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/ 

Using this enabled property you can achieve your requirement as per your needs. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Danyelle]

I was able to get it working. When the Reference field becomes enabled I want the user to be required to pick a value, when the reference field is disabled it is not required. I have attached a demo where I select a Truck for Location but not a reference. When I click save it should tell me that the reference is required.

Attachment: RequireReference_bb0da3aa.zip

[Thiyagu Subramani]

Hi Danyelle, 

  

Thanks for your update. 

  

Based on your shared information we suspect that you want to enable the reference field column based on location field column’s selected value. To achieve this requirement we suggest you to use below code in dropdown’s change event. In this we have enabled ShipName field based on ShipCountry field’s value that is we have enabled ShipName column is when ShipCountry text as Australia. Likewise you can achieve this as per your needs. 

  

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300"> 

    . . . . . . . . . . . . . 

        <e-grid-column field="ShipCountry"headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column> 

        <e-grid-column field="ShipName" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

  

<script> 

    var countryElem; 

    var countryObj; 

    var stateElem; 

    var stateObj; 

  

    var country = [ 

        { countryName: 'United States', countryId: '1' }, 

        { countryName: 'Australia', countryId: '2' } 

    ]; 

    var state = [ 

        { stateName: 'New York', countryId: '1', stateId: '101' }, 

        { stateName: 'Virginia ', countryId: '1', stateId: '102' }, 

        { stateName: 'Washington', countryId: '1', stateId: '103' }, 

        { stateName: 'Queensland', countryId: '2', stateId: '104' }, 

        { stateName: 'Tasmania ', countryId: '2', stateId: '105' }, 

        { stateName: 'Victoria', countryId: '2', stateId: '106' } 

    ]; 

  

    function create() { 

        countryElem = document.createElement('input'); 

        return countryElem; 

    }; 

    function read() { 

        return countryObj.text; 

    }; 

    function destroy() { 

        countryObj.destroy(); 

    }; 

    function write(args) { 

        countryObj = new ej.dropdowns.DropDownList({ 

            dataSource: country, 

            fields: { value: countryId, text: 'countryName' }, 

            value: args.rowData['ShipCountry'], 

            change: function () { 

                if (countryObj.text === 'Australia') { 

                    stateObj.enabled = true;    // ShipName is enabled only ShipCountry as Australia 

                } 

                else { stateObj.enabled = false; } 

                var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 

                stateObj.query = tempQuery; 

                stateObj.text = null; 

                stateObj.dataBind(); 

            }, 

            placeholder: 'Select a country', 

            floatLabelType: 'Never' 

        }); 

        countryObj.appendTo(countryElem); 

    }; 

    function createcity() { 

        stateElem = document.createElement('input'); 

        return stateElem; 

    }; 

    function readcity() { 

        return stateObj.text; 

    }; 

    function destroycity() { 

        stateObj.destroy(); 

    }; 

    function writecity(args) { 

        stateObj = new ej.dropdowns.DropDownList({ 

            dataSource: state, 

            fields: { value: 'stateId', text: 'stateName' }, 

            enabled: false, 

            value: args.rowData['ShipName'], 

            placeholder: 'Select a state', 

            floatLabelType: 'Never' 

        }); 

        stateObj.appendTo(stateElem); 

    } 

</script> 

  

 

 

  

Please get back to us, if you need any further assistance. 

  

Regards, 

Thiyagu S 

[Danyelle]

I have already accomplished this step. I want to require the reference field column based on the location field column’s selected value.

If Location value = 1 then Reference Required = true Else Reference Required = false. 

[Thiyagu Subramani]

Hi Danyelle, 

Thanks for your update. 

Based on your shared information we suspect that you want to show field column value as true / false based on another column’s selected value. For this we have prepared a sample, If ShipCountry column as United States, ShipName as yes otherwise it is false. Please refer to the below sample and screenshots for more references. 

Sample link: https://www.syncfusion.com/downloads/support/forum/166158/ze/cascading_dropdownlist1816766940 

 

 

If its not full fill your requirement, share your exact requirement briefly with image/video demonstration to us, then only we can provide the appropriate solution as soon as possible. 

Regards, 

Thiyagu S 

[Danyelle]

No this is not what I am asking. 

I need to conditionally validate the input of a drop-down box inside the Add dialogue of a grid. I have a drop-down named Location. The location is always required. The dropdown/field I want to conditionally validate is named Reference. When the screen loads, the reference box is disabled (greyed out). When "Truck" or "Substation" is selected in the location box, I then enable the Reference box. I also need to validate/require the reference box to have input.

Here are some scenarios:

1)      Location contains office. The reference box is disabled and does not need to be validated.

2)      Location contains Truck, the reference box is enabled and needs to be validated.

3)      Location contains Substation, the reference box is enabled and needs to be validated.

4)      Location contains Warehouse A, the reference box is disabled and does not need to be validated.

 

Ex 1 :  The user selects Office. When the user clicks save the reference does not need to be validated.

Ex 2: The User Selects Truck. When the user clicks save the Reference does need to be validated. It should look like this:

 

 

 

 

 

[Thiyagu Subramani]

Hi Danyelle, 

  

Thanks for your clear update and sorry for the inconvenienced. 

  

Based on your shared information we suspect that you want to enable the reference box and validate it based on location values. To achieve this requirement we suggest you to define the required validation rule for required field column in edit form using addRules method. In below sample we have disabled ShipName column based ShipCountry column values ( Office and Warehouse A) and enabled and validated ShipName field based on ShipCountry field values (Truck and Substation) as per your needs.  

  

Please refer to the below code, sample and screenshot for reference. 

  

    . . . . . . . . . 

    function write(args) { 

        countryObj = new ej.dropdowns.DropDownList({ 

            dataSource: country, 

            fields: { value: 'countryId', text: 'countryName' }, 

            value: args.rowData['ShipCountry'], 

             change: function (args) { 

                if (countryObj.text === 'Office' || countryObj.text === 'Warehouse A') { 

                    stateObj.enabled = false; 

                    document.getElementsByClassName('e-gridform')[0].ej2_instances[0].rules = {}; 

                } 

                else { 

                    stateObj.enabled = true; 

                    document.getElementsByClassName('e-gridform')[0].ej2_instances[0].addRules('ShipName', { required: true }); 

                } 

                var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 

                stateObj.query = tempQuery; 

                stateObj.text = null; 

                stateObj.dataBind(); 

            },  

            placeholder: 'Select a country', 

            floatLabelType: 'Never' 

        }); 

        countryObj.appendTo(countryElem); 

    }; 

. . . . . . . . .  

    function writecity(args) { 

        stateObj = new ej.dropdowns.DropDownList({ 

            dataSource: state, 

            fields: { value: 'stateId', text: 'stateName' }, 

            enabled: false, 

            value: args.rowData['ShipName'], 

            placeholder: 'Select a state', 

            floatLabelType: 'Never', 

            enabled: false 

        }); 

        stateObj.appendTo(stateElem); 

    } 

</script> 

  

Screenshot:  

  

 

  

 

  

Sample link: https://www.syncfusion.com/downloads/support/forum/166158/ze/cascading_dropdownlist-16-6-722592404 

  

Please get back to us, if you need any further assistance. 

  

Regards, 

Thiyagu S