Populate field depending the value selected from another field

[Walter Konnerth]

Hi,

I have two columns A and B, the column A is a dropdownlist and the column B is text or numericedit and after to select a value in dropdownlist, I would like to populate the column B depending of the value selected in the column A. How can to do that?

Thanks,

[Ponmani Murugaiyan]

Hi Walter, 

Thanks for contacting Syncfusion support. 

We have checked your reported query. As per your requirement, we have prepared sample with DropDownList and TextBox component. Updated the Textbox value with selected value from args properties in change event of the Dropdown as like below screenshot. 

onChange(args) { 

    this.textareaObj.value = args.itemData.Game; 

} 

render() { 

return ( 

<div class="row"> 

    <div class="col-sm-2"> 

        <DropDownListComponent 

        id="games" 

        dataSource={this.sportsData} 

        fields={this.fields} 

        change={this.onChange.bind(this)} 

        placeholder="Select a game" 

        floatLabelType="Auto" 

        /> 

    </div> 

    <div class="col-sm-2"> 

        <TextBoxComponent 

        placeholder="Selected value in Textbox" 

        floatLabelType="Auto" 

        ref={scope => { 

            this.textareaObj = scope; 

        }} 

        /> 

    </div> 

</div> 

Output:  

 

Sample: https://stackblitz.com/edit/react-prbzgb-cavlgr?file=index.js  

Kindly check with the above sample. If not meets your requirement or if we misunderstood the query, please revert us with the below details. 

1. Is Dropdownlist, Textbox or Numeric Textbox placed inside Grid component?
2. Provide control rendering code snippet.
3. Provide pictorial representation of UI to get the clear view of your expected requirement.

The above requested details will help us to provide you the solution at earliest. 

Regards, 

Ponmani M 

[Walter Konnerth]

Hi, 

Thanks for the information.

I forgot to mention that both Dropdownlist and Textbox are fields from a Grid component :(

Can you please help me with this?

[Balaji Sekar]

Hi Walter, 

 

Query:  I would like to populate the column B depending of the value selected in the column A. How can to do that? 

To populate the Column B value depending of the value selected from Column A using cascading dropdownlist concept in the DataGrid component. 

Using cellEditTemplate feature, we have bound the dropdownlist editing in the ShipCountry column and it will populate the ShipCity column value based on selected item of ShipCountry column using change event of dropdownlist component. 

 

Using change event of Dropdownlist component, we found that dropdownlist selected item and bind that value to ShipCity input element of edit form 

 

Please refer the below code example and sample for more information. 

 

[index.js] 

 <GridComponent 

            id="gridcomp" 

            dataSource={data} 

            allowPaging={true} 

            ref={g => (this.gridInstance = g)} 

            pageSettings={{ pageCount: 5 }} 

            editSettings={this.editSettings} 

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                field="OrderID" 

                headerText="Order ID" 

                width="120" 

                textAlign="Right" 

                isPrimaryKey={true} 

                validationRules={this.validationRule} 

              /> 

              .   .    .    . 

              <ColumnDirective 

                field="ShipCountry" 

                edit={this.editparams} 

                headerText="Ship Country" 

                width="150" 

              /> 

              <ColumnDirective 

                field="ShipCity" 

                headerText="Ship City" 

                width="150" 

              /> 

            </ColumnsDirective> 

editparams = { 

    create: () => {       

      this.elem = document.createElement("input"); 

      return this.elem; 

    }, 

    destroy: () => { 

      this.element.destroy(); 

    }, 

    read: args => { 

      return this.element.text; 

    }, 

    write: args => { 

      this.element = new DropDownList({ 

        floatLabelType: "Never", 

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

        dataSource: data, 

        placeholder: "Select a Value", 

        value: args.rowData["OrderID"], 

        change: function(e) { 

          const tempQuery = new Query().where("OrderID", "equal", e.value); 

          var findData = new DataManager(data).executeLocal(tempQuery); 

          console.log(findData); 

          var shipCityEle = [].slice 

            .call(this.gridInstance.editModule.formObj.inputElements) 

            .filter(x => x.getAttribute("name") == "ShipCity")[0]; 

          shipCityEle.value = findData[0]["ShipCity"]; 

        }.bind(this) 

      }); 

      this.element.appendTo(this.elem); 

    } 

  }; 

 

 

 

Sample link: https://stackblitz.com/edit/react-4jqzek-1t2eor  

 

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

                                          https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-template  

 

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

 

Regards, 

Balaji Sekar 

[Walter Konnerth]

Thank you for the tips, it worked very well!

My next question is: how could I accomplish the same in a child grid? 

I have a child grid with a dropdownlist and I would like to populate another field(s) (textbox, datetime) based on the selection from the dropwdownlist.

The dropdownlist and the textbox / datetime fields are from the same childgrid.

Thanks,

[Balaji Sekar]

Hi Walter, 

 

Thanks for your valuable patience. 

 

Based on your query we understand that you need to update TextBox and datetime element while change dropdown item in the ChildGrid editing action. 

 

To achieve your requirement we have used cellEditTemplate feature. In this feature, we have bound the dropdown editing in “ShipCity” column of ChildGrid and update textbox(“ShipName”) and datepicker (“OrderDate”) values using the change event of ShipCity dropdown. 

 

Please refer the below code example and sample for more information. 

[index.js] 

 this.shipCityParams = { 

      create: () => { 

        this.elem = document.createElement("input"); 

        return this.elem; 

      }, 

      destroy: () => { 

        this.element.destroy(); 

      }, 

      read: args => { 

        return this.element.text; 

      }, 

      write: args => { 

        this.element = new DropDownList({ 

          floatLabelType: "Never", 

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

          dataSource: orderDatas, 

          placeholder: "Select a Value", 

          value: args.rowData["OrderID"], 

          change: function(e) { 

            const tempQuery = new Query().where("OrderID", "equal", e.value); 

            var findData = new DataManager( 

              this.childGrid.dataSource 

            ).executeLocal(tempQuery); 

            console.log(findData); 

            var gridInstance = e.element.closest(".e-grid").ej2_instances[0]; 

            var shipCityEle = [].slice 

              .call(gridInstance.editModule.formObj.inputElements) 

              .forEach(item => { 

                switch (item.getAttribute("name")) { 

                  case "ShipName": 

                    item.value = findData[0]["ShipName"]; 

                    break; 

                  case "OrderDate": 

                    var intl = new Internationalization(); 

                    var dFormatter = intl.getDateFormat({ skeleton: "yMd" }); 

                    var formattedString = dFormatter( 

                      new Date(findData[0]["OrderDate"]) 

                    ); 

                    item.ej2_instances[0].value = formattedString; 

                    break; 

                } 

              }); 

          }.bind(this) 

        }); 

        this.element.appendTo(this.elem); 

      } 

    }; 

 

    this.childGrid = { 

      dataSource: orderDatas, 

      queryString: "EmployeeID", 

      allowPaging: true, 

      pageSettings: { pageSize: 6, pageCount: 5 }, 

      editSettings: { 

        allowAdding: true, 

        allowEditing: true, 

        allowDeleting: true 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Cancel", "Update"], 

      columns: [ 

        { 

          field: "OrderID", 

          headerText: "Order ID", 

          textAlign: "Right", 

          isPrimaruKey: true, 

          width: 120 

        }, 

        { 

          field: "ShipCity", 

          headerText: "Ship City", 

          edit: this.shipCityParams, 

          width: 120 

        }, 

        { 

          field: "OrderDate", 

          headerText: "Order Date", 

          type: "date", 

          format: { skeleton: "yMd", type: "date" }, 

          editType: "datepickeredit", 

          width: 120 

        }, 

 

        { field: "ShipName", headerText: "Ship Name", width: 150 }, 

        { field: "Freight", headerText: "Freight", width: 120 } 

      ] 

    }; 

  } 

 

Sample link: https://stackblitz.com/edit/react-pyjy3h-ewltzc  

 

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

 

Regards, 

Balaji Sekar 

[Walter Konnerth]

Thanks for the tips, it helped me a lot!!

Question: how could I do it if the edit mode would be Dialog?

[Balaji Sekar]

Hi Walter, 

Based on your query we can update the TextBox and datetime element while change dropdown item in the ChildGrid editing action with dialog edit mode. 

Please refer the below code example and sample for more information. 

[app.component.ts] 

 this.shipCityParams = { 

      create: () => { 

        this.elem = document.createElement("input"); 

        return this.elem; 

      }, 

      destroy: () => { 

        this.element.destroy(); 

      }, 

      read: args => { 

        return this.element.text; 

      }, 

      write: args => { 

        var gridEle = args.row.closest(".e-grid"); 

        var gridInstance = null; 

        if (gridEle) { 

          gridInstance = gridEle["ej2_instances"][0]; 

          this.gridInstance = gridInstance; 

        } 

        this.element = new DropDownList({ 

          floatLabelType: "Never", 

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

          dataSource: orderDatas, 

          placeholder: "Select a Value", 

          value: args.rowData["OrderID"], 

          change: function(e) { 

            const tempQuery = new Query().where("OrderID", "equal", e.value); 

            var findData = new DataManager( 

              this.childGrid.dataSource 

            ).executeLocal(tempQuery); 

            console.log(findData); 

            var shipCityEle = [].slice 

              .call(this.gridInstance.editModule.formObj.inputElements) 

              .forEach(item => { 

                switch (item.getAttribute("name")) { 

                  case "ShipName": 

                    item.value = findData[0]["ShipName"]; 

                    break; 

                  case "OrderDate": 

                    var intl = new Internationalization(); 

                    var dFormatter = intl.getDateFormat({ skeleton: "yMd" }); 

                    var formattedString = dFormatter( 

                      new Date(findData[0]["OrderDate"]) 

                    ); 

                    item.ej2_instances[0].value = formattedString; 

                    break; 

                } 

              }); 

          }.bind(this) 

        }); 

        this.element.appendTo(this.elem); 

      } 

    }; 

Sample link: https://stackblitz.com/edit/react-pyjy3h-cj1d6f  

Please get back to us if you need further assistance. 

Regards, 

Balaji Sekar 

[Walter Konnerth]

Hi,

I tried the provided example and there is an error on trying to add a child:

Error occurred:

undefined is not an object (evaluating 'args.row.closest')

Can you please look into this?

Thanks,

[Balaji Sekar]

Hi Walter, 

Sorry for the inconvenience. 

Based on your query we have modified a sample with add action in the ChildGrid component and we have save the added value to Grid using childGrid’s actionBegin event. 

Using actionBegin event we have to save the queryString value while requestType as “save” and action as “add” since we will include added record to childGrid’s dataSource. 

Please refer the below code example and sample for more information. 

[app.component.ts] 

 write: args => {         

        var dropdowndata = DataUtil.distinct(orderDatas, "OrderID", true); 

        this.element = new DropDownList({ 

          floatLabelType: "Never", 

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

          dataSource: dropdowndata, 

          value: args.rowData["OrderID"], 

          change: function(e) { 

            const tempQuery = new Query().where("OrderID", "equal", e.value); 

            var findData = new DataManager( 

              this.childGrid.dataSource 

            ).executeLocal(tempQuery); 

            console.log(findData); 

            var editform = e.element.closest(".e-gridform").ej2_instances[0]; 

            var shipCityEle = [].slice 

              .call(editform.inputElements) 

              .forEach(item => { 

                switch (item.getAttribute("name")) { 

                  case "ShipName": 

                    item.value = findData[0]["ShipName"]; 

                    break; 

                  case "OrderDate": 

                    var intl = new Internationalization(); 

                    var dFormatter = intl.getDateFormat({ skeleton: "yMd" }); 

                    var formattedString = dFormatter( 

                      new Date(findData[0]["OrderDate"]) 

                    ); 

                    item.ej2_instances[0].value = formattedString; 

                    break; 

                } 

              }); 

          }.bind(this) 

        }); 

        this.element.appendTo(this.elem); 

      } 

.   .    .    . 

 actionBegin: function(args) { 

        if (args.requestType == "save" && args.action == "add") { 

          args.data[ 

            this.parentDetails.parentKeyField 

          ] = this.parentDetails.parentKeyFieldValue; 

        } 

      }, 

 

Sample link: https://stackblitz.com/edit/react-pyjy3h-mpwsj5  

 

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

 

Regards, 

Balaji Sekar