Need to combine two fields in display text

[Dileep gagan R]

Hi ,

We have a requirement where in text field we have to display combined values of two fields from a object array. How can we achieve it?

Example: I have a array of object with Code, Description, Id. and i want to display both Code and description in the dropdown with Code - Description and also must be able to filter either of them. 

Thanks,

Dileep gagan R

[Sevvandhi Nagulan]

Hi Dileep, 

Greetings from Syncfusion support. 

Query 1:   I have a array of object with Code, Description, Id. and i want to display both Code and description in the dropdown with Code 

 

Solution:  

 

You can achieve the requested requirement using itemTemplate property in the DropDownList component. Refer to the code below, 

 

[app.component.html] 

 

            <ejs-dropdownlist id='games' #sample [dataSource]='countries' [fields]='fields' allowFiltering='true' [placeholder]='waterMark' (filtering)='onFiltering($event)'  [popupHeight]='height'> 

              <ng-template #itemTemplate let-data> 

                <div> 

                    <div class="name"> {{data.Description}}- {{data.Code}} </div> 

                </div> 

            </ng-template> 

            </ejs-dropdownlist> 

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#item-template 

If you want to customize the selected value that displayed in the input element then, it can be achieved using valueTemplate property. Refer to the ug link below. 

  

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#value-template 

Query 2: also must be able to filter either of them 

 

 

Solution: 

 

If you want to filter the items based on multiple fields, we suggest using the ‘Predicate’ of dataManager in the filtering event. Refer to the code below, 

      public onFiltering(e) { 

        let predicate = new Predicate('Description', 'startswith', e.text, true);  

        predicate = predicate.or('Code', 'startswith', e.text,true); 

        let query: Query = new Query(); 

        //frame the query based on search string with filter type. 

        query = (e.text !== '' ) ? query.where(predicate) : query; 

        //pass the filter data source, filter query to updateData method. 

        e.updateData(this.countries, query); 

    } 

Please find the sample below, 

https://stackblitz.com/edit/angular-ju3lyw-xgushk?file=app.component.ts 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Sevvandhi N 

[Dileep gagan R]

Hi Dileep, 

Greetings from Syncfusion support. 

Query 1:   I have a array of object with Code, Description, Id. and i want to display both Code and description in the dropdown with Code 

 

Solution:  

 

You can achieve the requested requirement using itemTemplate property in the DropDownList component. Refer to the code below, 

 

[app.component.html] 

 

            <ejs-dropdownlist id='games' #sample [dataSource]='countries' [fields]='fields' allowFiltering='true' [placeholder]='waterMark' (filtering)='onFiltering($event)'  [popupHeight]='height'> 

              <ng-template #itemTemplate let-data> 

                <div> 

                    <div class="name"> {{data.Description}}- {{data.Code}} </div> 

                </div> 

            </ng-template> 

            </ejs-dropdownlist> 

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#item-template 

If you want to customize the selected value that displayed in the input element then, it can be achieved using valueTemplate property. Refer to the ug link below. 

  

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#value-template 

Query 2: also must be able to filter either of them 

 

 

Solution: 

 

If you want to filter the items based on multiple fields, we suggest using the ‘Predicate’ of dataManager in the filtering event. Refer to the code below, 

      public onFiltering(e) { 

        let predicate = new Predicate('Description', 'startswith', e.text, true);  

        predicate = predicate.or('Code', 'startswith', e.text,true); 

        let query: Query = new Query(); 

        //frame the query based on search string with filter type. 

        query = (e.text !== '' ) ? query.where(predicate) : query; 

        //pass the filter data source, filter query to updateData method. 

        e.updateData(this.countries, query); 

    } 

Please find the sample below, 

https://stackblitz.com/edit/angular-ju3lyw-xgushk?file=app.component.ts 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Sevvandhi N 

Hi,

Thanks for the reply, but we are creating dynamic dropdown in .TS file. How can i append the fields or the itemTemplate.

  dropDownListEdit = {

      create: () => {

        ele = document.createElement('input');

        return ele;

      },

      read: () => {

        return dropDownList.text;

      },

      destroy: () => {

        dropDownList.destroy();

      },

      write: (args: { rowData: object, column: Column }) => {

        dropDownList = new DropDownList({

          dataSource: idx === 0 ? this.parentDdlData : [],

          allowFiltering: true,

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

          itemTemplate: ,

          // itemTemplate: this.dropDownDisplay.elementRef.nativeElement ,

          change: () => {

            let tempQuery: Query = new Query().where('id', 'equal', dropDownList.value);

            this.getGridDropdownData(tempQuery.queries[0].e.value).pipe(takeUntil(this.unSubscribe)).subscribe(res => {

              this.validationData = res.data;

              if (this.editDropDowns[idx + 1]) {

                this.editDropDowns[idx + 1].enabled = true;

                this.editDropDowns[idx + 1].text = null;

                this.editDropDowns[idx + 1].dataSource = res.data;

                this.editDropDowns[idx + 1].dataBind();

              }

            });

          },

          actionComplete: () => false,

          enabled: idx !== 0 ? false : true,

          placeholder: 'Select ' + ctrl,

          floatLabelType: 'Never'

        });

        dropDownList.appendTo(ele);

        this.editDropDowns.push(dropDownList);

      }

    }

[Sevvandhi Nagulan]

Hi Dileep, 

Thanks for the update. 

Can you please confirm that whether you created the dynamic dropdownlist component inside DataGrid?. ?. If so, please provide the control rendering code along with the grid component. 

Regards, 

Sevvandhi N 

[Dileep gagan R]

Hi Dileep, 

Greetings from Syncfusion support. 

Query 1:   I have a array of object with Code, Description, Id. and i want to display both Code and description in the dropdown with Code 

 

Solution:  

 

You can achieve the requested requirement using itemTemplate property in the DropDownList component. Refer to the code below, 

 

[app.component.html] 

 

            <ejs-dropdownlist id='games' #sample [dataSource]='countries' [fields]='fields' allowFiltering='true' [placeholder]='waterMark' (filtering)='onFiltering($event)'  [popupHeight]='height'> 

              <ng-template #itemTemplate let-data> 

                <div> 

                    <div class="name"> {{data.Description}}- {{data.Code}} </div> 

                </div> 

            </ng-template> 

            </ejs-dropdownlist> 

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#item-template 

If you want to customize the selected value that displayed in the input element then, it can be achieved using valueTemplate property. Refer to the ug link below. 

  

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#value-template 

Query 2: also must be able to filter either of them 

 

 

Solution: 

 

If you want to filter the items based on multiple fields, we suggest using the ‘Predicate’ of dataManager in the filtering event. Refer to the code below, 

      public onFiltering(e) { 

        let predicate = new Predicate('Description', 'startswith', e.text, true);  

        predicate = predicate.or('Code', 'startswith', e.text,true); 

        let query: Query = new Query(); 

        //frame the query based on search string with filter type. 

        query = (e.text !== '' ) ? query.where(predicate) : query; 

        //pass the filter data source, filter query to updateData method. 

        e.updateData(this.countries, query); 

    } 

Please find the sample below, 

https://stackblitz.com/edit/angular-ju3lyw-xgushk?file=app.component.ts 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Sevvandhi N 

Hi,

Thanks for the reply, but we are creating dynamic dropdown in .TS file. How can i append the fields or the itemTemplate.

  dropDownListEdit = {

      create: () => {

        ele = document.createElement('input');

        return ele;

      },

      read: () => {

        return dropDownList.text;

      },

      destroy: () => {

        dropDownList.destroy();

      },

      write: (args: { rowData: object, column: Column }) => {

        dropDownList = new DropDownList({

          dataSource: idx === 0 ? this.parentDdlData : [],

          allowFiltering: true,

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

          itemTemplate: ,

          // itemTemplate: this.dropDownDisplay.elementRef.nativeElement ,

          change: () => {

            let tempQuery: Query = new Query().where('id', 'equal', dropDownList.value);

            this.getGridDropdownData(tempQuery.queries[0].e.value).pipe(takeUntil(this.unSubscribe)).subscribe(res => {

              this.validationData = res.data;

              if (this.editDropDowns[idx + 1]) {

                this.editDropDowns[idx + 1].enabled = true;

                this.editDropDowns[idx + 1].text = null;

                this.editDropDowns[idx + 1].dataSource = res.data;

                this.editDropDowns[idx + 1].dataBind();

              }

            });

          },

          actionComplete: () => false,

          enabled: idx !== 0 ? false : true,

          placeholder: 'Select ' + ctrl,

          floatLabelType: 'Never'

        });

        dropDownList.appendTo(ele);

        this.editDropDowns.push(dropDownList);

      }

    }

Below is the code snippet.

this.initGrid(res.data.columns.map((el, i) => {

          const prop = el.replace(/\s/g, '');

          return {

            field: prop, headerText: this.titleCasePipe.transform(el),

            valueAccessor: (field: string, data: Object, column: Column) => {

              return (data[prop + 'Code'] && data[prop + 'Code'] !== '') && (data[prop] && data[prop] !== '') ?

                data[prop + 'Code'] + '|' + data[prop] : data[prop] || data[prop + 'Code']

            },

            editType: (i === (res.data.columns.length - 1) ? '' : 'dropdownedit'),

            edit: i === (res.data.columns.length - 1) ? '' : this.editRow(i, el),

            editTemplate: i === (res.data.columns.length - 1) ? this.textBox : '',

            validationRules: i === (res.data.columns.length - 1) ? '' : { required: true }

          }

        })

  private initGrid(col?) {

    this.columns = col ? col : [];

    this.filterOptions = { type: 'Excel' };

    this.toolbarOptions = ['Add', 'Update', 'Delete', 'Cancel', 'Search'];

    this.editSettings = { allowAdding: true, mode: 'Normal' };

    this.pageSettings = { pageSizes: true, pageSize: 5 };

    this.sortOptions = col ? { columns: col.map(el => { return { field: el.field, direction: 'Ascending' } }) } : {};

    this.windowHeight = window.innerHeight !== undefined ? window.innerHeight - 350 : 400;

    if (this.grid) {

      this.grid.clearFiltering();

      this.grid.refresh();

    }

  }

[Sujith Kumar Rajkumar]

Hi Dileep, 

 

Thanks for sharing the requested details. 

 

You can achieve the same requirement with item template rendered on Grid edit using cell edit template by either directly defining the template value in the itemTemplate property or define the template in html file and setting the template id to the itemTemplate property. We have demonstrated this in the below code snippet where the template is directly defined in the itemTemplate property, 

 

this.editparams = { 

        create: () => { 

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

            return this.elem; 

        }, 

        read: () => { 

            return this.dropObj.text; 

        }, 

        destroy: () => { 

            this.dropObj.destroy(); 

        }, 

        write: (args: { rowData: object; column: Column }) => { 

            this.dropObj = new DropDownList({ 

                dataSource: this.country, 

                allowFiltering: true, 

                filtering: this.onFiltering.bind(this), 

                itemTemplate: "<div><div class='name'>${CountryName}-${CountryId}</div></div>", 

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

                text: args.rowData[args.column.field] 

            }); 

            this.dropObj.appendTo(this.elem); 

        } 

}; 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-xyn6t6?file=app.component.ts  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Dileep gagan R]

Hi Dileep, 

Greetings from Syncfusion support. 

Query 1:   I have a array of object with Code, Description, Id. and i want to display both Code and description in the dropdown with Code 

 

Solution:  

 

You can achieve the requested requirement using itemTemplate property in the DropDownList component. Refer to the code below, 

 

[app.component.html] 

 

            <ejs-dropdownlist id='games' #sample [dataSource]='countries' [fields]='fields' allowFiltering='true' [placeholder]='waterMark' (filtering)='onFiltering($event)'  [popupHeight]='height'> 

              <ng-template #itemTemplate let-data> 

                <div> 

                    <div class="name"> {{data.Description}}- {{data.Code}} </div> 

                </div> 

            </ng-template> 

            </ejs-dropdownlist> 

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#item-template 

If you want to customize the selected value that displayed in the input element then, it can be achieved using valueTemplate property. Refer to the ug link below. 

  

Ug link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates/#value-template 

Query 2: also must be able to filter either of them 

 

 

Solution: 

 

If you want to filter the items based on multiple fields, we suggest using the ‘Predicate’ of dataManager in the filtering event. Refer to the code below, 

      public onFiltering(e) { 

        let predicate = new Predicate('Description', 'startswith', e.text, true);  

        predicate = predicate.or('Code', 'startswith', e.text,true); 

        let query: Query = new Query(); 

        //frame the query based on search string with filter type. 

        query = (e.text !== '' ) ? query.where(predicate) : query; 

        //pass the filter data source, filter query to updateData method. 

        e.updateData(this.countries, query); 

    } 

Please find the sample below, 

https://stackblitz.com/edit/angular-ju3lyw-xgushk?file=app.component.ts 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Sevvandhi N 

Hi,

Thanks for the reply, but we are creating dynamic dropdown in .TS file. How can i append the fields or the itemTemplate.

  dropDownListEdit = {

      create: () => {

        ele = document.createElement('input');

        return ele;

      },

      read: () => {

        return dropDownList.text;

      },

      destroy: () => {

        dropDownList.destroy();

      },

      write: (args: { rowData: object, column: Column }) => {

        dropDownList = new DropDownList({

          dataSource: idx === 0 ? this.parentDdlData : [],

          allowFiltering: true,

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

          itemTemplate: ,

          // itemTemplate: this.dropDownDisplay.elementRef.nativeElement ,

          change: () => {

            let tempQuery: Query = new Query().where('id', 'equal', dropDownList.value);

            this.getGridDropdownData(tempQuery.queries[0].e.value).pipe(takeUntil(this.unSubscribe)).subscribe(res => {

              this.validationData = res.data;

              if (this.editDropDowns[idx + 1]) {

                this.editDropDowns[idx + 1].enabled = true;

                this.editDropDowns[idx + 1].text = null;

                this.editDropDowns[idx + 1].dataSource = res.data;

                this.editDropDowns[idx + 1].dataBind();

              }

            });

          },

          actionComplete: () => false,

          enabled: idx !== 0 ? false : true,

          placeholder: 'Select ' + ctrl,

          floatLabelType: 'Never'

        });

        dropDownList.appendTo(ele);

        this.editDropDowns.push(dropDownList);

      }

    }

Thank you it works, However selected text is not showing both the values.

Expected: Code | Country

Actual: Country

[Sujith Kumar Rajkumar]

Hi Dileep, 

 

You’re welcome. We are glad to hear that the provided solution worked for you. 

 

As for your other query – “However selected text is not showing both the values.”, we could understand that you wish to display the same item template specified content on the selected dropdown value. You can achieve this by using the dropdown list’s valueTemplate property as demonstrated in the below code snippet, 

 

this.editparams = {  

                  . 

                  . 

        write: (args: { rowData: object; column: Column }) => {  

            this.dropObj = new DropDownList({ 

                  . 

                  . 

                itemTemplate: "<div><div class='name'>${CountryName}-${CountryId}</div></div>", 

                valueTemplate: "<span>${CountryName}-${CountryId}</span>" 

            });  

            this.dropObj.appendTo(this.elem);  

        }  

};  

  

We have modified the previously provided sample based on this for your reference. You can find it below,  

  

Sample: https://stackblitz.com/edit/angular-xyn6t6-1mb8cg?file=app.component.ts  

 

More details on the dropdown list’s value template property can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/documentation/drop-down-list/templates/#value-template  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R