Dynamic template and columns

[Manuel]

Dear Support,

I'm facing a scenario where I'm loading from remote service the column configuration of the grid. That remote service sends me the field name, type and description. Based on the type I may need to set the template of the column associating some extra parameter.  E.g.: when I receive the info that the column is of type "PrefixOutput" I need to add a prefix specified in "prefix" parameter.

DATA FROM THE SERVICE: 

{

...

{ fieldName: 'Demo', fieldDescription: 'Demo', type: 'PrefixOutput', prefix: 'DemoPrefix'},

{ fieldName: 'Demo2', fieldDescription: 'Demo 2', type: 'PrefixOutput', prefix: 'OtheTypePrefix'},

...

}

DESIRED OUPUT

for Demo field is " DemoPrefix " + data.Demo

for Demo2 field is " OtheTypePrefix " + data.Demo2

I have tried to define a column in this way:

                        let column = {

                            field: data[i].fieldName,

                            headerText: data[i]. fieldDescription ,

                            format: 'string',

                            template: "${data. prefix + data. fieldName}"

                        }

I don't know how to fix the "template" parameter to achieve my goal.

Could yo u

[Rajapandi Ravi]

Hi Manuel,

Greetings from Syncfusion support

We have checked your query and we could see that you like to add dynamic template to the Grid columns. Based on your application scenario we have prepared a sample and we suggest you use the below way to achieve your requirement.

 

export class AppComponent {

    public data: Object[];

    public columns: any;

    public initialPage: Object;

    public datas: any = [{ fieldName: 'Demo', fieldDescription: 'Demo', type: 'PrefixOutput', prefix: 'DemoPrefix'},

        { fieldName: 'Demo2', fieldDescription: 'Demo 2', type: 'PrefixOutput', prefix: 'OtheTypePrefix'}]

    public datasource: any =[{Demo: "A", Demo2: "A"},{Demo: "B", Demo2: "A"}]

 

    ngOnInit(): void {

        this.initialPage = { pageSizes: true, pageCount: 4 };

       

        this.columns = [

            { field: this.datas[0].fieldName, headerText: this.datas[0].fieldDescription, template: '<span>${customHelp(data)}</span>', },

            { field: this.datas[1].fieldName, headerText: this.datas[1].fieldDescription },

        ];

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

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

          };

     

    }

}

 

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

If you still face the issue, please share the below details that will be helpful for us to provide better solution.

1)           Share your complete Grid rendering code.

2)           Share your Grid datasource structure.

3)           Share any issue reproducible sample or try to reproduce the issue with our above attached sample.

4)           Share the issue scenario in video demonstration format.

Regards,

Rajapandi R

[Rafael]

For this specifc part:

this.columns = [

{ field: this.datas[0].fieldName, headerText: this.datas[0].fieldDescription, template: '${customHelp(data)}', },

{ field: this.datas[1].fieldName, headerText: this.datas[1].fieldDescription },

];

What if we are dynamically creating our columns from a json and not explicitly using the columns variable to like the above example. How would we set the template for columns like that?

Also what if we want to call a function inside of our current file? The current solution does not allow that.

[Rajapandi Ravi]

Manuel,

From your query we could see that you are using autogenerated columns and like to apply the template, based on your query we have prepared a sample and achieved your requirement. Please refer the below code example and sample for more information.

App.component.ts

 

@ViewChild('grid')

    public grid: any;

    @ViewChild('template')

    public template: any; 

public flag: any = false;

 

load() {

        this.flag = true;

    }

 

    dataBound() {

        if(this.flag) {

        this.flag = false;

        this.grid.columns[0].template = this.template;

        this.grid.columns[0].templateFn = templateCompiler(this.template);

        this.grid.refreshColumns();

        }

    }

 

    customHelp(args) {

        return "Custom Help"; //return your custom arguments here

    }

 

App.component.html

 

<ejs-grid #grid [dataSource]='datasource' (load)='load($event)' (dataBound)='dataBound($event)' locale='en-US' allowPaging='true' height=365 [pageSettings]='initialPage'>

    </ejs-grid>

    <ng-template let-data #template>

        <span>{{customHelp(data)}}</span>

    </ng-template>

 

Sample: https://stackblitz.com/edit/angular-cttgpi-jfhhim?file=app.component.html,app.component.ts,index.html