Custom html and grid.refresh

[Rafael]

Hello,

I am using the integration of grid with query builder and its working nice, but sometimes I need to customize the content of a cell. I am doing that with templates:

<e-column headerText='Assinado' textAlign='center' width="150" [template]="templateStatus">
</e-column>

And the result is:

And its working, but when I filter something with query builder, I need to execute this:

this.grid.refresh();

And after refresh, the template loses the data of let- variable. In my case is "contrato":

<ng-template #templateStatus let-contrato>
    <span class="badge badge-mantis" [ngClass]="{'badge-mantis': contrato.status == 'Assinado', 'badge-crusta': contrato.status == 'Aguardando assinatura', 'badge-cranberry': contrato.status == 'Bloqueado', 'badge-danger': contrato.status == 'Cancelado'}">{{contrato.status}}</span>
</ng-template>

There's something that I am missing? Thank you

[Sujith Kumar Rajkumar]

Hi Rafael, 

Greetings from Syncfusion support. 

We checked your reported problem but unfortunately were unable to reproduce it from our end as the template was properly restored on Grid refresh. Please check the below sample for your reference, 

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

It would be helpful to identify your problem better if you could share the following information, 

• Grid and Query builder code file.
• Syncfusion package version used.
• If possible provide us a simple sample to replicate the problem or try reproducing it in the above provided sample. It would be helpful to narrow down the problem scenario and provide a proper solution based on that.

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Rafael]

Hello Sujith,

Sorry, I thought the problem was the refresh but I realize that the problem is when I filter something with query builder. I am filtering doing that:

updateRule(args: RuleChangeEventArgs): void {
  const predicate: Predicate = this.qryBldrObj.getPredicate(args.rule);
  const fltrDataSource: Object[] = [];
  let dataManagerQuery: Query;
  if (isNullOrUndefined(predicate)) {
    //dataManagerQuery = new Query().select(['OrderID', 'CustomerID', 'Freight', 'OrderDate', 'ShipCountry', 'ShipCity', 'ativo']);
    dataManagerQuery = new Query().select(['numero', 'descricao', 'clienteCnpjCpf', 'clienteNomeRazaoSocial', 'parcelaAtual', 'dataInicio', 'dataFim', 'dataReajuste', 'dataBaixa']);
  } else {
    //dataManagerQuery = new Query().select(['OrderID', 'CustomerID', 'Freight', 'OrderDate', 'ShipCountry', 'ShipCity', 'ativo']).where(predicate);
    dataManagerQuery = new Query().select(['numero', 'descricao', 'clienteCnpjCpf', 'clienteNomeRazaoSocial', 'parcelaAtual', 'dataInicio', 'dataFim', 'dataReajuste', 'dataBaixa']).where(predicate);
  }
  new DataManager(this.contratos)
      .executeQuery(dataManagerQuery)
      .then((e: ReturnOption) => {
        (<Object[]> e.result).forEach((data: Object) => {
          fltrDataSource.push(data);
        });
      });
  this.gridDataSource = fltrDataSource;
  console.log(this.grid);
  //this.grid.refresh();
}

After run this line:

this.gridDataSource = fltrDataSource;

My column "Assinado" loses the content:

The versions of Syncfusion:

"@syncfusion/ej2-angular-calendars": "^18.2.44",
"@syncfusion/ej2-angular-dropdowns": "^18.2.44",
"@syncfusion/ej2-angular-grids": "^18.2.44",
"@syncfusion/ej2-angular-navigations": "^18.2.44",
"@syncfusion/ej2-angular-querybuilder": "^18.2.44",
"@syncfusion/ej2-angular-splitbuttons": "^18.2.44",

Thank you

[Rafael]

Hello Sujith,

I am so sorry :(

I just realized that the problem was that I was notting selecting the field name in the line:

dataManagerQuery = new Query().select(['numero', 'descricao', 'clienteCnpjCpf', 'clienteNomeRazaoSocial', 'parcelaAtual', 'dataInicio', 'dataFim', 'dataReajuste', 'dataBaixa', 'status']).where(predicate);

Thank you very much

[Sujith Kumar Rajkumar]

Hi Rafael, 

It is not a problem. We are glad to hear that your problem has been resolved. 

Please get back to us if you require further assistance. 

Regards, 

Sujith R