Cascading DropDownList with valueTemplate

[Michael Mairegger]

Hi,

Following the steps from  How to Cascading DropDownList with Grid editing in Angular Grid component - Syncfusion I wanted to improve the display of DropDownList with Templates in Angular DropDownList component - Syncfusion .

I tried to set the value template directly in ts code and html as ng-template. But neither the one nor the one solution worked. How do I use the valueTemplate in code behind? For now only the declaration for fields are used.

Thanks,
Michael Mairegger

this.customerIdParams = {
  create: () => {
    this.customerIdElem = document.createElement('input');
    return this.customerIdElem;
  },
  read: () => {
    return this.customerIdObj.text;
  },
  destroy: () => {
    this.customerIdObj.destroy();
  },
  write: (args: { rowData: IInvoiceLine, column: Column }) => {
    this.customerIdObj = new DropDownList({
      dataSource: this.ordersDataManger,
      query: .........,
      value: args.rowData.OrderId,
      fields: {value: 'Id', text: 'Id'},
      valueTemplate: ...HOW TO ASSIGN HERE,
      change: (changeArgs: ChangeEventArgs) => {

          .......
    });
    this.customerIdObj.appendTo(this.customerIdElem);
  }
};

[Joseph Christ Nithin Issack]

Hi Micheal, 

  Greetings from Syncfusion support. 

   Based on your requirement, you want to set value template to the dropdown component in the cell edit template. Your requirement can be achieved by simply setting the html element as a string to the valueTemplate property. 

  Please refer the code example below. 

this.stateParams = { 

      create: () => { 

        this.stateElem = document.createElement('input'); 

        return this.stateElem; 

      }, 

      read: () => { 

        return this.stateObj.text; 

      }, 

      destroy: () => { 

        this.stateObj.destroy(); 

      }, 

      write: () => { 

        this.stateObj = new DropDownList({ 

          dataSource: this.state, 

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

          enabled: false, 

          placeholder: 'Select a state', 

          floatLabelType: 'Never', 

          valueTemplate: '<span>${stateId} - ${stateName}</span>', 

        }); 

        this.stateObj.appendTo(this.stateElem); 

      }, 

    }; 

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

Please get back to us for further details. 

Regards, 

Joseph I. 

[Michael Mairegger]

Hi Jeseph,

thanks, that solution works.

Now I am in a bit of struggle since I have a complex solution with arrays: I have managed to construct it with the template

${Id} ${DateOfReceipt.getFullYear()} ${RouteLocations[0].TransportDestinationAddress.Country}

But how to display every country. Is calling a local method like this.formatStr() possible. Below you find a sample json

{
  "@odata.context": "...",
  "value": [
    {
      "Id": 612,
      "DateOfReceipt": "2021-11-23T23:00:00Z",
      "RouteLocations": [
        {
          "TransportDestinationAddress": {
            "Country": "IT",
            "OtherPropertiesRemoved": "..."
          }
        },
        {
          "TransportDestinationAddress": {
            "Country": "IT",
            "OtherPropertiesRemoved": "..."
          }
        }
      ]
    }
  ]
}

Regards,
Michael M.

[Ajith Govarthan]

Hi Michael, 

Thanks for the update. 

Based on your query, you want to call local function with value Template to format the string. So, currently we are validating your requirement at our end and we will update further details on 22^nd December 2021. 

Until then we appreciate your patience. 

Regards, 

Ajith G. 

[Michael Mairegger]

Hi Ajith,

thats correct.

Regards
Michael

[Ajith Govarthan]

Hi Michael,  

Sorry for the inconvenience. 

Currently we are facing complexities in calling the local function with template string at our end. So, we need more time to validate on your requirement and we will update further details on 23^rd December 2021.  

Until then we appreciate your patience.  

Regards,  

Ajith G. 

[Rajapandi Ravi]

Hi Michael, 

Thanks for your patience 

As per your requirement, we have called the local function with value Template to format the string. Please refer the below code example and sample for more information. 

ngOnInit(): void { 

    this.stateParams = { 

      create: () => { 

        this.stateElem = document.createElement('input'); 

        return this.stateElem; 

      }, 

      read: () => { 

        return this.stateObj.text; 

      }, 

      destroy: () => { 

        this.stateObj.destroy(); 

      }, 

      write: () => { 

        this.stateObj = new DropDownList({ 

          dataSource: this.state, 

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

          enabled: false, 

          placeholder: 'Select a state', 

          floatLabelType: 'Never', 

          valueTemplate: '<span>>${customHelp(data)}</span>', 

        }); 

        this.stateObj.appendTo(this.stateElem); 

      }, 

    }; 

    (<any>window).customHelp = function(args) { 

      return args.countryId + ' ' + args.stateId; //here you can format the string by using argument 

    }; 

  } 

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

Regards, 

Rajapandi R 

[Michael Mairegger]

Hi Rajapandi,

this solution sounds promising. I will verify this after holidays. I will keep you up to date.

Regards,
Michael

[Ajith Govarthan]

Hi Michael, 

Thanks for the update. 

We will wait to hear from you. 

Regards, 

Ajith G. 

[Michael Mairegger]

Hi Ajith,

the provided solution works. Thank you for the excellent support.

Regards,
Michael

[Pavithra Subramaniyam]

Hi Michael, 

You are most welcome! 

It is great to hear that the provided solution worked. Please get back to us if you need further assistance on this. 

Regards, 

Pavithra S