Using TemplateColumn when Field has spaces in it throws error

[Michael Evans]

Hi,

While trying to implement field to field comparisons using query builder for our dynamic dataset, I ran into an issue. If our field name has a space character in it and we are using a custom template, an error is throw and the control in the template fails to load.

We were given the following StackBlitz to show how to use a dynamic template with query builder to change the control based on the operator: https://stackblitz.com/edit/angular-drvng3-7gs6eg?file=app.component.ts

And it worked fine with fields that did not have a space in them. However if the field name has a space in it, the following error is shown and the control to enter the value does not show:

I have modified the original StackBlitz to simply change the columns "Payment Mode" and "Transaction Type" to have a space in them and can reproduce:  https://stackblitz.com/edit/angular-drvng3-gyej6q?file=app.component.ts

Is there any way to change my template so this error does not occur? If not I would request the bug be corrected so that the query builder control does not throw the error in the same way it does if I use the default template.

Thanks,

Michael

[Mohan Kumar Ramasamy]

Hi Michael, 

 

We have checked your reported query. The Querybuilder column field property is same as dataSource field and used to generate JSON rule. So no space should be used in field property. The label value will be displayed in UI and you can set header text in label property. 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/query-builder/columns/#labels  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar 

[Michael Evans]

The query builder allows fields with spaces in it though when using the standard template, as does the data grid control. Because the data set is dynamically generated, we would prefer to continue using the field names with spaces in it so we don't have to maintain a mapping from fields with no spaces and set the labels after the data is returned, to a friendly name. Please advise if there is an alternate workaround when using the custom template or if this issue could be corrected in an upcoming release.

Thanks,

Michael

[Gayathri KarunaiAnandam]

Hi Michael, 

We have checked your reported query. We have prepared a template sample in which field value possess spaces as demonstrated in the below code snippet. 

Template-driven.html 

<ejs-querybuilder id="querybuilder" #querybuilder width="70%" [rule]="importRules" (actionBegin)="actionBegin($event)"> 

  <e-columns> 

    <e-column field="Employee ID" label="Employee ID" type="number"></e-column> 

    <e-column field="First Name" label="First Name" type="string"></e-column> 

    <e-column field="Last Name" label="Last Name" type="string"></e-column> 

   <e-column field="Age Limit" label="Age Limit" type="number"> 

<e-column field="Country" label="Country" type="string"></e-column> 

  </e-columns> 

</ejs-querybuilder> 

 

 

For your reference, we have prepared a sample based on your scenario. Please check the below link. 

Sample: https://stackblitz.com/edit/angular-9vr8dh-jucagx?file=template-driven.html 

Regards, 

Gayathri K 

[Michael Evans]

The sample provided involves columns defined ahead of time in the HTML in the collection.

The columns displayed in the grid/query builder are generated dynamically by the user, so we cannot use this approach.

I was hoping for a workaround for our specific scenario - some way to get the template to generate a css class for the control that is not "e-{field name}" since that seems to be what the issue is.

Right now the alternative is to rework our data set to return data with field names with no spaces, then change our UIs to maintain a mapping from field name to friendly name, which involves more lookups to our data. One of the benefits to the Syncfusion Grid and Pivot Grid was that it could handle dynamic data sets without much configuration. It would be a shame to have to add in the complexity and overhead of maintaining field mappings across our solution for this one specific scenario.

Please let me know our best approach going forward. 

• If you have an alternative workaround to the original StackBlitz (https://stackblitz.com/edit/angular-drvng3-gyej6q?file=app.component.ts) that changes the code of the template so the control doesn't throw that error, that would be ideal. Field names must allow spaces and only appear in the JSON of the data set.
• Next best approach would be to enter a bug for the Query Builder in your feedback page, which we understand might take some time to be released.
• If neither approach is possible, please let us know so we can make the required changes to our application. Since this is a fairly fundamental change to the structure of our application, knowing as soon as possible would be beneficial so we can complete the rework in time for our product release.

Thanks,

Michael

[Gayathri KarunaiAnandam]

Hi Michael, 

We have checked your reported query and we can be able to reproduce the issue in our end. We have logged an issue report for this, and it will be available in the immediate patch release after our 2021 Volume 1 main release which will be scheduled in the end of March 2021. 

 

We appreciate your patience until then. 

 

You can track the status of this bug using below link. 

 

Link: https://www.syncfusion.com/feedback/23017/when-field-has-space-it-throws-error 

 

Regards, 

Gayathri K