Hide/Show custom fields on Form

[Naveen Davuluri]

Hi, i have the following scheduler and couple of custom fields on the form. These custom fields have a dropdown as datasource. Is there a possibility to hide some of these fields based on the selection of other field? In the scheduler below, i have eventtype and drilltype fields. based on the choice in the eventtype, i would like to hide the drilltype field. Can you please let me know if it is possible?

var scheduleObj = new ej.schedule.Schedule({

  width: "100%",

  height: "100%",

  selectedDate: Date.now(),

  showHeaderBar: false,

  views: [

    { displayName: "72 hrs", option: "Day", interval: 3 },

    { displayName: "Week", option: "Week", interval: 1 },

    { displayName: "Gantt", option: "TimelineDay", interval: 3 },

  ],

  currentView: "Day",

  allowDragAndDrop: false,

  allowInline: false,

  eventSettings: {

    query: new ej.data.Query().addParams(

      "ops",

      document.getElementById("plans").ej2_instances[0].value

    ),

    dataSource: dataManager,

    enableTooltip: true,

  },

  eventRendered: function (args) {

    window.applyCategoryColor(args, scheduleObj.currentView);

  },

  actionBegin: function (args) {},

  actionComplete: function (args) {},

  created: function () {

    scheduleObj.scrollTo(intl.formatDate(new Date(), { skeleton: "Hm" }));

  },

  popupOpen: function (args) {

    if (args.data.requestType === "eventCreate" || args.type === "Editor") {

      if (!args.element.querySelector(".custom-field-row")) {

        /**/

        var row = new ej.base.createElement("div", {

          className: "custom-field-row",

        });

        var formElement = args.element.querySelector(".e-schedule-form");

        formElement.firstChild.insertBefore(

          row,

          args.element.querySelector(".e-title-location-row")

        );

        var container = new ej.base.createElement("div", {

          className: "custom-field-container",

        });

        var inputEle = new ej.base.createElement("input", {

          className: "e-field",

          attrs: { name: "EventType" },

        });

        container.appendChild(inputEle);

        row.appendChild(container);

        var drowDownList = new ej.dropdowns.DropDownList({

          dataSource: eventsData,

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

          value: args.EventType,

          floatLabelType: "Always",

          placeholder: "Event Type",

        });

        drowDownList.appendTo(inputEle);

        inputEle.setAttribute("name", "EventType");

        inputEle.setAttribute("id", "inputEleDrop");

        /** */

        var inputEleDrillType = new ej.base.createElement("input", {

          className: "e-field",

          attrs: { name: "DrillType" },

        });

        container.appendChild(inputEleDrillType);

        row.appendChild(container);

        if (args.type === "Editor") {

          if (args.data.EventType === "Helicopter") {

            inputEle.text = args.data.EventType;

          }

        }

        var dropDownListDrillType = new ej.dropdowns.DropDownList({

          dataSource: drillTypeData,

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

          value: args.DrillType,

          floatLabelType: "Always",

          placeholder: "Drill Type",

        });

        dropDownListDrillType.appendTo(inputEleDrillType);

        inputEleDrillType.setAttribute("name", "DrillType");

      }

      if (args.type === "Editor" && args.data.EventType === "Helicopter") {

        var eleDrop = document.getElementById("inputEleDrop").ej2_instances[0];

        eleDrop.value = "heli";

      } else {

        var buttonElement =

          args.type === "Editor"

            ? ".e-event-popup .e-edit"

            : ".e-schedule-dialog .e-event-edit";

        var editButton = document.querySelector(

          ".e-schedule-dialog.e-control.e-btn.e-lib.e-event-delete.e-flat"

        );

        editButton.disabled = true;

      }

    }

  },

});

[Ashokkumar Karuppasamy]

Hi Naveen Davuluri,

Based on the shared details, we have achieved your requirement. Depending on the choice in the eventType, the drillType field will be hidden. we have attached the code snippet and a sample demonstration of the solution. Please try it and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/jluasf74-tl7afn1v?file=index.js

        popupOpen: function (args) {

            if (args.type === 'Editor') {

                const drillTypeElement = args.element.querySelector('.drill-type')

                if (drillTypeElement) {

                    if ( args.data.EventType && args.data.EventType === 'public-event') {

                        drillTypeElement.style.display = "none"

                    } else {

                        drillTypeElement.style.display = ""

                    }

                } 

                // Create required custom elements in initial time

                if (!args.element.querySelector('.custom-field-row')) {

                    var row = new ej.base.createElement('div', { className: 'custom-field-row' });

                    var formElement = args.element.querySelector('.e-schedule-form');

                    formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));

                    var container = new ej.base.createElement('div', { className: 'custom-field-container' });

                    var inputEle = new ej.base.createElement('input', {

                        className: 'e-field', attrs: { name: 'EventType' }

                    });

                    container.appendChild(inputEle);

                    row.appendChild(container);

                    var drowDownList = new ej.dropdowns.DropDownList({

                        dataSource: [

                            { text: 'Public Event', value: 'public-event' },

                            { text: 'Maintenance', value: 'maintenance' },

                            { text: 'Commercial Event', value: 'commercial-event' },

                            { text: 'Family Event', value: 'family-event' }

                        ],

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

                        value: args.EventType,

                        change: function(args) {

                            if (drillTypeObj) {

                                drillTypeObj.parentElement.style.display  = '';

                                var eventTypeValue = args && args.itemData && args.itemData.value ? args.itemData.value : '';

                                // Hide DrillType field if EventType is 'Public Event'

                                if (eventTypeValue === 'public-event') {

                                    drillTypeObj.parentElement.style.display = 'none'; // Hide DrillType

                                }

                            }

                            

                        },

                        floatLabelType: 'Always', placeholder: 'Event Type'

                    });

                    drowDownList.appendTo(inputEle);

                    inputEle.setAttribute('name', 'EventType');

                    var drillTypeObj = new ej.base.createElement('input', {

                        className: 'e-field', attrs: { name: 'DrillType' }

                    });

                    container.appendChild(drillTypeObj );

                    var drowDownList = new ej.dropdowns.DropDownList({

                        cssClass: 'drill-type',

                        dataSource: [

                            { text: 'Type 1', value: 'Type- 1' },

                            { text: 'Type 2', value: 'Type - 2 ' },

                            { text: 'Type 3', value: 'Type - 3' },

                        ],

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

                        floatLabelType: 'Always', placeholder: 'DrillType',

                        value: args.DrillType,

                    });

                    drowDownList.appendTo(drillTypeObj );

                    drillTypeObj .setAttribute('name', 'DrillType');

                }

            }

        }

 

Regards,
Ashok

[Naveen Davuluri]

Thanks a lot for the help. That worked flawlessly

[Ashokkumar Karuppasamy]

Hi Naveen Davuluri,

You are welcome. Get back to us if you need any further assistance. 

Regards,
Ashok