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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set a extra condition, using existing cascading dropdownlist. Angular 7+, TypeScript 3+

Thread ID:

Created:

Updated:

Platform:

Replies:

141283 Dec 4,2018 09:44 AM UTC Apr 15,2019 12:27 PM UTC Angular - EJ 2 11
loading
Tags: Grid
Laurens Albers
Asked On December 4, 2018 09:56 AM UTC

Hi,

I have a grid with cascading dropdownlists based on your existing code:
https://ej2.syncfusion.com/angular/documentation/grid/how-to/cascading-drop-down-list/

The code works great, but now I would like to add a extra condition to the to the initial editParams. In the params I'm trying to find a way on how to get another field, which isnt a dropdownlist, but a "standard input" to be enabled, based on the initial editParams.
Example:
Grid contains 5 fields, 2 of them are dropdownlists(cascading), the other 3 are just "inputs". One of the input fields needs to be enabled(with a default value and editable) or disabled(and empty & not editable) based on the selection of the "top" dropdownlist.

I have added a sample of code for clarification.

greetings,

Laurens





Attachment: sample_dcafd7da.zip

Mohammed Farook J [Syncfusion]
Replied On December 5, 2018 09:47 AM UTC

Hi Laurens, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your requirement. We have added some codes to the code from the documentation to achieve your requirement. We have fetched the corresponding input element to be enabled/disabled in the “change” event handler of dropdown list and added the “e-disabled” class to the corresponding input element. We have prepared a sample for your convenience. Please refer the sample link below, 
 
 
Please refer the code example below,  
 
[normal-edit.component.ts] 
 
  export class NormalEditComponent implements OnInit { 
      public data: Object[]; 
      @ViewChild('Grid') 
      public grid:GridComponent; 
      ... 
      ngOnInit(): void { 
          ... 
          this.countryParams = { 
              ... 
              write:()=>{ 
                  this.countryObj = new DropDownList({ 
                  dataSource: this.country, 
                  fields: { value: 'countryId', text: 'countryName' }, 
                  change: (args:any) => { 
                    //Code to fetch the input element. Here we have disabled/enabled the input element in the “CustomerID” column. 
                    let inputelem: any = document.getElementById(this.grid.element.id + "CustomerID").parentNode;  
                    if(this.countryObj.text == "Australia") { 
                       inputelem.classList.add("e-disabled")          //Make the input as disabled when “Australia” is selected. 
                    } 
                    else if(this.countryObj.text == "United States" && inputelem.classList.contains("e-disabled")) { 
                       inputelem.classList.remove("e-disabled")       //Make the input enabled when “United States” is selected. 
                    } 
                  this.stateObj.enabled = true; 
                  ... 
              }, 
              ... 
          }}; 
          this.stateParams = { 
              ... 
          }} 
      } 
  } 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
J Mohammed Farook 
 


Laurens Albers
Replied On January 3, 2019 12:15 PM UTC

Hi,

Thank you for the example!

But there is a issue and two questions that i have based on the example:
1. Your sample using a 'class' disables the field, but does not prevent the user from typing data into the column. It needs to be blocked from editing.
2. the field needs to be blocked (by default)upon initialization of editing, since the initial dropdown is empty as well.
3. I've been trying to to adjust the type in the HtmlInputElement, but this.inputElem.type = 'number'; does not work. Any idea?

Thanks in advance!

greetings,

Laurens

sample:
 inputElem: HTMLInputElement;
  typeElem: HTMLElement;
  typeObj: DropDownList;
  formatElem: HTMLElement;
  formatObj: DropDownList;
  typeParams: IEditCell = {
    create: () => {
      this.typeElem = document.createElement('input');
      return this.typeElem;
    },
    read: () => {
      return this.typeObj.text;
    },
    destroy: () => {
      this.typeObj.destroy();
    },
    write: () => {
      this.typeObj = new DropDownList({
        dataSource: this.myTypes,
        fields: { value: 'id', text: 'type' },
        change: () => {
          this.inputElem = document.getElementById(this.grid2.element.id + "decimals").parentNode;
          if (this.typeObj.text === "Decimal" || this.typeObj.text === "Double") {
            this.inputElem.classList.add("e-disabled");
          } else {
            this.inputElem.classList.remove("e-disabled");
          }
          this.formatObj.enabled = true;
          const tempQuery = new Query().where('id', 'equal', this.typeObj.value);
          this.formatObj.query = tempQuery;
          this.formatObj.dataBind();
        },
        placeholder: 'Select a Type',
        floatLabelType: "Never"
      });
      this.typeObj.appendTo(this.typeElem);
    }
  };
  formatParams: IEditCell = {
    create: () => {
      this.formatElem = document.createElement('input');
      return this.formatElem;
    },
    read: () => {
      return this.formatObj.text;
    },
    destroy: () => {
      this.formatObj.destroy();
    },
    write: () => {
      this.formatObj = new DropDownList({
        dataSource: this.myFormat,
        fields: { value: 'idFormat', text: 'format' },
        enabled: false,
        placeholder: 'Select a Format',
        floatLabelType: 'Never'
      });
      this.formatObj.appendTo(this.formatElem);
    }
  };


Pavithra Subramaniyam [Syncfusion]
Replied On January 4, 2019 09:43 AM UTC

Hi Laurens, 
 
Query #1 &2:  Your sample using a 'class' disables the field, but does not prevent the user from typing data into the column. It needs to be blocked from editing. 
 the field needs to be blocked (by default)upon initialization of editing, since the initial dropdown is empty as well. 
 
We have analyzed the above queries and we suspect that you would like to keep the column in disabled state initially when editing. So we suggest to set the allowEditing property to false for that column and it will be changed to editable state only when a required value is selected from the dropdown. Please refer to the below sample for your reference, 
 
Code Example:  
 
[.ts] 
... 
write:()=>{ 
                  this.countryObj = new DropDownList({ 
                  dataSource: this.country, 
                  fields: { value: 'countryId', text: 'countryName' }, 
                  change: (args:any) => { 
                    let inputelem: any = document.getElementById(this.grid.element.id + "CustomerID").parentNode; 
                    if(this.countryObj.text == "Australia") { 
                    inputelem.classList.add("e-disabled") 
                    } 
                    else if(this.countryObj.text == "United States" && inputelem.classList.contains("e-disabled")) { 
                    inputelem.classList.remove("e-disabled"); 
                    inputelem.firstElementChild.classList.remove("e-disabled"); 
                    inputelem.firstElementChild.removeAttribute("disabled"); 
                    inputelem.firstElementChild.type = 'number'; 
                    } 
                  this.stateObj.enabled = true; 
                  let tempQuery: Query = new Query().where('countryId', 'equal', this.countryObj.value); 
                  this.stateObj.query = tempQuery; 
                  this.stateObj.text = null; 
                  this.stateObj.dataBind(); 
              }, 
              placeholder: 'Select a country', 
              floatLabelType: 'Never' 
              }); 
              this.countryObj.appendTo(this.countryElem); 
          } 
... 
 
Query #2:  I've been trying to to adjust the type in the HtmlInputElement, but this.inputElem.type = 'number'; does not work. Any idea? 
 
We have analyzed your query and we suggest to set the type property to the input element. Please refer to the below sample for your reference, 
 
Code Example:  
 
[.ts] 
... 
if(this.countryObj.text == "Australia") { 
                    inputelem.classList.add("e-disabled") 
                    } 
                    else if(this.countryObj.text == "United States" && inputelem.classList.contains("e-disabled")) { 
                    ... 
                    inputelem.firstElementChild.type = 'number';   //set type to the input element 
                    } 
... 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 
 


Laurens Albers
Replied On January 4, 2019 10:26 AM UTC

Hi,

Thank you for your feedback, It helped!

greetings,

Laurens Albers

Pavithra Subramaniyam [Syncfusion]
Replied On January 4, 2019 11:28 AM UTC

Hi Laurens, 
 
Thanks for your update. 
 
We are happy to hear that the provided solution helps you. 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 
 


Laurens Albers
Replied On April 9, 2019 08:07 AM UTC

Hi,

1. Do you have any suggestion on how to set the existing value(if there is any) into the column type & format each with editType: dropdownedit(see .ts), instead of the "placeholder".
example: if type had the value "varchar", it should show value that in the editdialog instead of the placeholder.

2. I would also like if possible to sync both grids(in a mat-tab-group) using the scrollbars, but i don't think you guys support this, right? So i tried selecting the row,
-> https://ej2.syncfusion.com/angular/documentation/grid/scrolling/#scroll-to-selected-row, but this does not trigger the scrollbar to correct position, even though the selection is correct.
example: selecting bottom row in grid1 in tab1 should select the bottomrow in grid2(does work) in tab2 and set the scrollbar to the to the correct position(does not work).

.HTML
<mat-tab-group>
          <!--TAB INPUT-->
          <mat-tab label="Input">
            <div class="flex-row" style="margin-top: 10px">
              <div class="flex-content">
                <ejs-grid #grid1 id="grid1" height="375px"
                          [columns]='columns1'
                          [dataSource]='dataSource1'
                          [selectedRowIndex]="rowIndex1"
                          [rowHeight]='30'
                          [selectionSettings]='selectionOptions'>
                </ejs-grid>
              </div>
            </div>
          </mat-tab>
          <!--TAB OUTPUT-->
          <mat-tab label="Output">
            <div class="flex-row" style="margin-top: 10px">
              <div class="flex-content">
                <ejs-grid #grid2 id="grid2" height="310px"
                          [columns]='columns2'
                          [selectedRowIndex]="rowIndex2"
                          [dataSource]='dataSource2'
                          [rowHeight]='30'
                          [editSettings]='editSettings'
                          (actionComplete)="change($event)"
                          [selectionSettings]='selectionOptions'>
                </ejs-grid>
              </div>
            </div>
            <div class="flex-row" style="margin-top: 10px">
              <div class="flex-column" style="margin-right: 10px">
                <button mat-stroked-button color="primary" (click)="stripTable()">STRIP TABLE NAME</button>
              </div>
              <div class="flex-column">
                <mat-form-field>
                  <input type="text" matInput placeholder="Row sequence column name:" formControlName="columnName" />
                </mat-form-field>
              </div>
            </div>
          </mat-tab>
        </mat-tab-group> 


.TS
  editSettings: object = { allowEditing: true, mode: 'Dialog' };

  columns1: object[] = [
    { field: 'name', headerText: 'Name', textAlign: 'Left', width: 40 },
    { field: 'type', headerText: 'Type', textAlign: 'Left', width: 20 },
    { field: 'length', format: 'N', headerText: 'Length', textAlign: 'Center', width: 15 },
    { field: 'decimals', headerText: 'Decimals', textAlign: 'Center', width: 15 },
    { field: 'format', headerText: 'Format', textAlign: 'Left', width: 25 }
  ];
  columns2: object[] = [
    { field: 'id', visible: false, isPrimaryKey: true },
    { field: 'name', headerText: 'Name', textAlign: 'Left', width: 40, validationRules: { required: true } },
    { field: 'type', headerText: 'Type', textAlign: 'Left', width: 20, editType: 'dropdownedit', edit: this.typeParams, validationRules: { required: true } },
    { field: 'length', headerText: 'Length', format: 'N', textAlign: 'Center', width: 15, validationRules: { required: true, number: true } },
    { field: 'decimals', allowEditing: false, headerText: 'Decimals', textAlign: 'Center', width: 15, validationRules: { number: true } },
    { field: 'format', headerText: 'Format', textAlign: 'Left', width: 20, editType: 'dropdownedit', edit: this.formatParams },
    { field: 'change', headerText: 'Changed', textAlign: 'Left', headerTemplate: "${headerText}", width: 15, isIdentity: true }
  ];

typeElem: HTMLElement;
  typeObj: DropDownList;
  formatElem: HTMLElement;
  formatObj: DropDownList;
  typeParams: IEditCell = {
    create: () => {
      this.typeElem = document.createElement('input');
      return this.typeElem;
    },
    read: () => {
      return this.typeObj.text;
      },
    destroy: () => {
      this.typeObj.destroy();
    },
    write: () => {
      this.typeObj = new DropDownList({
        dataSource: this.myTypes,
        fields: { value: 'id', text: 'type' },
        change: (args: any) => {
          let inputElem: any = document.getElementById(this.grid2.element.id + "decimals").parentNode;
          if (this.typeObj.text === "Decimal" || this.typeObj.text === "Double") {
            inputElem.classList.remove("e-disabled");
            inputElem.firstElementChild.classList.remove("e-disabled");
            inputElem.firstElementChild.removeAttribute("disabled");
            inputElem.firstElementChild.type = 'number';
          } else {
            inputElem.classList.add("e-disabled");
            inputElem.firstElementChild.classList.add("e-disabled");
            inputElem.firstElementChild.disabled = true;
            inputElem.firstElementChild.type = 'number';
          }
          this.formatObj.enabled = true;
          const tempQuery = new Query().where('id', 'equal', this.typeObj.value);
          this.formatObj.query = tempQuery;
          this.formatObj.dataBind();
        },
        placeholder: 'Select a Type',
        floatLabelType: "Never"
      });
      this.typeObj.appendTo(this.typeElem);
    }
  };
  formatParams: IEditCell = {
    create: () => {
      this.formatElem = document.createElement('input');
      return this.formatElem;
    },
    read: () => {
      return this.formatObj.text;
    },
    destroy: () => {
      this.formatObj.destroy();
    },
    write: () => {
      this.formatObj = new DropDownList({
        dataSource: this.myFormat,
        fields: { value: 'idFormat', text: 'format' },
        enabled: false,
        placeholder: 'Select a Format',
        floatLabelType: 'Never'
      });
      this.formatObj.appendTo(this.formatElem);
    }
  };

 this.dataSource1 = this.data;
    //Need a seperate clone of data in dataSource1
    var clone = JSON.parse(JSON.stringify(this.data));
    this.dataSource2 = this.checkExisting(clone);

Pavithra Subramaniyam [Syncfusion]
Replied On April 12, 2019 09:21 AM UTC

Hi Laurens, 
 
Query#1: Do you have any suggestion on how to set the existing value(if there is any) into the column type & format each with editType: dropdownedit(see .ts), instead of the "placeholder". example: if type had the value "varchar", it should show value that in the editdialog instead of the placeholder. 
 
Yes, You can set value property for customer dropDownlist component inside the  edit.write” method to achieve your requirement. 
 
 
Query#2: selecting bottom row in grid1 in tab1 should select the bottom row in grid2(does work) in tab2 and set the scrollbar to the to the correct position(does not work). 
 
We have validated your query and you can achieve your requirement by rendering Grid into ng-template. Please find the below sample for your reference. 
 
[group.html] 
<mat-tab-group> 
              <mat-tab label='tab1'> 
    <ng-template matTabContent> 
                             <default1-content></default1-content> 
    </ng-template> 
              </mat-tab> 
              <mat-tab label='tab2'> 
    <ng-template matTabContent> 
                             <default2-content> </default2-content> 
    </ng-template> 
              </mat-tab> 
</mat-tab-group> 
 
[default1.html] 
<ejs-grid #grid height="400" id="grid"  
                [columns]='columns1' 
                [selectedRowIndex]="20" 
                [dataSource]='dataSource1' 
                [allowSelection]='true'> 
      </ejs-grid> 
 
[default2.html] 
<ejs-grid #grid1 height="400" id="grid1"  
                [columns]='columns3' 
                [selectedRowIndex]="20" 
                [dataSource]='dataSource3' 
                [allowSelection]='true'> 
      </ejs-grid> 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Laurens Albers
Replied On April 12, 2019 10:00 AM UTC

Query#1: Do you have any suggestion on how to set the existing value(if there is any) into the column type & format each with editType: dropdownedit(see .ts), instead of the "placeholder". example: if type had the value "varchar", it should show value that in the editdialog instead of the placeholder. 
 
Yes, You can set value property for customer dropDownlist component inside the  edit.write” method to achieve your requirement. 
 
 
Your example does not work/is broken in the demo(see zip and your own url (above -> preview tab), the field is empty. I also tried setting value in my own code, but it doesn't do anything. See below for my example.


Does not work, even though value is passed to the edit.write -> value
write: (args) => {
      console.log(args),
        this.typeObj = new DropDownList({
          value: args.rowData.type,
          dataSource: this.myTypes,
          fields: { value: 'id', text: 'type' },
          change: (args: any) => {
//etc etc



Attachment: demo_example_37e52cf7.zip

Pavithra Subramaniyam [Syncfusion]
Replied On April 15, 2019 06:49 AM UTC

Hi Laurens, 
 
Sorry for the inconvenience caused. 
 
We have already logged a task for documentation correction and it will be refreshed in any of our upcoming release. Also We have validated your requirement and By default dropDownList will not show the value that is not its dataSource. So we suggest you use the below way to achieve your requirement. 
 
App.component.ts 
 
write: (args) => { 
      this.dropData.push(args.rowData.ShipCountry);    // push the value to the dropdownlist datasource 
      this.formatObj = new DropDownList({ 
        dataSource: this.dropData, 
        fields: { value: 'idFormat', text: 'format' }, 
        value: args.rowData.ShipCountry,  //assigned the value to the dropdownList 
      }); 
 
 
In the above code snippet we have pushed the edited row’s  ShipCountry value to the dropDownList’s datasource. 
We have prepared a sample based on your requirement. 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Laurens Albers
Replied On April 15, 2019 11:50 AM UTC

I changed my personal datasource from object[] with its values to string[] and it works fine without pushing data. 
Im guessing the dropdownlist obj with its property dataSource  isnt too happy working with objects[], when using value.

As long as the value args.rowdata."whatever" exists in datasource this will work.
dataSource: string[] = ["somestring"];
/////////
write: (args) => {
    this.typeObj = new DropDownList({
        dataSource: this.myTypes,
        fields: { value: 'id', text: 'type' },
        value: args.rowData.whatever, //"somestring"
        change: (args: any) => {
////////////etc


Thanks for your stackblitz example.
greetings and have a nice day!

Laurens

Pavithra Subramaniyam [Syncfusion]
Replied On April 15, 2019 12:27 PM UTC

Hi Laurens, 
 
Thanks for sharing the details with us. 
 
We are happy to hear that you have found a solution to achieve your requirement. 
 
Please get back to us if you need any further assistance on this.  
 
Regards, 
Pavithra S. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

;