itemTemplate cuts string after first whitespace

[Akcherry]

Hello,

I want to use a custom component to add a specific style to the list entries. So I specify the itemTemplate with my component like '<my component text=${Text}></my component>'. 

However, if the text contains several words separated by a whitespace, the template engine truncates after the first whitespace.

Using the unicode literal it works fine. Is there a better solution than using unicode?

Stackblitz

[Saranya Dhayalan]

Hi Tolga 

 

Thank you for contacting Syncfusion support 

 

We have checked your sample, we suggest another solution for the whitespace issue. You can set the input value in beforeItemRender. Please find the below code snippet: 

 

let listObj: ListBox = new ListBox({ 

            dataSource: (data as any).info, 

            itemTemplate: ' 

                < input ></input> ', 

    beforeItemRender: function (args: BeforeItemRenderEventArgs) { 

            (args.element.querySelector('input') as HTMLInputElement).value = args.item.text; 

        } 

}); 

 

Please find the below sample link 

 

Sample link: https://stackblitz.com/edit/fhh3ni-yj8via?file=index.ts 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D 

[Akcherry]

Hi Saranya,

thank you for the quick reply. But it should be a temporary solution. I would like to wrap the dual list field in my component. So if I want to use the component in multiple contexts, I have to specify the itemTemplate and write the function beforeItemRender for it. The best solution would be if I only need to set the itemTemplate. 

Regards, 

Tolga

[Saranya Dhayalan]

 

Hi Tolga, 

 

We were able to reproduce the issue “Template Compilation malfunctions when value have space in it” and we confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below. 

 

Link: https://www.syncfusion.com/feedback/12944/template-compilation-malfunctions-when-value-have-space-in-it  

 

The fix will be available in any of our weekly patch release after Volume 1, 2020 release which is scheduled to be rolled out at the end of this month.  

 

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

 

Regards, 

Saranya D