Unable to use multiple class name in the CssClass propriety.

[marc antoine pelletier]

Whenever we add multiple class name (custom class name) to a control, list, grid, card etc...

We have a problem on Destroy of the component.

Indeed the class name is treated as one entry and couldn't be found in the array 'ClassName'.

Unhandled rejection InvalidCharacterError: Failed to execute 'remove' on 'DOMTokenList': The token provided ('e-list-template grid-all-col bottom-line') contains HTML space characters, which are not valid in tokens.

[John Rajaram]

Hi Marc, 

Greetings from Syncfusion. 

Please find the below details for listed components. 

 

ListView: 

We are able to reproduce the reported issue in our EJ2 listview component. We have logged an issue report regrading this and the fix for this issue will be available in our next patch release which is expected to be out at 16^th October 2018. 

Grid: 

Grid component don’t have CssClass property and also we have tried to reproduce the issue by manually adding class names and destroying the grid but the issue was not reproduced. Please share us more details such as screenshot or call stack of the issue related to Grid component to proceed further. 

Card: 

Since Card component is a pure CSS component and so it don’t have any CssClass property. Hence we request you to share the replication procedure for reproducing this issue in Card component. 

Dropdown & RTE: 

We have checked our DropDown components and RTE component regarding this scenario. We are able to get the custom class name in ClassList and ClassName. Also after destroying the control, css classes are removed.   

Sample: https://stackblitz.com/edit/wjaqaa?file=index.ts 

Dialog: 

We have checked the reported issue in Dialog and textbox component. Dialog is working properly when adding multiple css class and remove it on destroy the control 

Textbox: 

We have confirmed this as a bug in our Textbox component. The fix for this issue will be included in our upcoming weekly patch release (16th October, 2018). 

 

Please let us know if you have concerns. 

Regards, 

John R 

[John Rajaram]

Hi Marc,  

Thanks for the patience. 

We have fixed the reported issue [“multiple class name in CssClass property”] in our EJ2 ListView and Textbox components and the patch for this issue is published in the NPM package with version 16.3.25. 

Please update to this latest package and let us know if you have any queries. 

Regards, 

John R  

[marc antoine pelletier]

The multi class in the CSSClass property isn't working either in the MultiSelect Component

i.e. if the 

css class = "class_custom-1"; Works! 

css class = "class_custom-1 class_2"; Fails

same error as before in the ListView

you can fix it easily in the MultiSelectPrototype by doing the same fix as the one you did in ListView.

- MAP

MultiSelect.prototype.updateCssClass = function () {

        if (this.cssClass) {

            this.popupWrapper.classList.add(this.cssClass);

            this.overAllWrapper.classList.add(this.cssClass);

        }

    };

ListView.prototype.setCSSClass = function (oldCSSClass) {

        if (this.cssClass) {

            addClass([this.element], this.cssClass.split(' ').filter(function (css) { return css; }));

        }

        if (oldCSSClass) {

            removeClass([this.element], oldCSSClass.split(' ').filter(function (css) { return css; }));

        }

    };

[Vinoth Kumar Sundara Moorthy]

Hi Marc, 

  

Good day to you. 

  

We have checked your reported issue and confirmed it as defect and created the defect report “Not able to add multiple cssClass values in MultiSelect”. You can track the status of this defect using below link from our feedback portal, 

  

https://www.syncfusion.com/feedback/9015/not-able-to-add-multiple-cssclass-values-in-multiselect-component 

  

The fix will be included in our Essential Studio 2019 Volume 3 release tentatively scheduled in the end of September 2019. We appreciate your patience until then. 

  

Regards, 

Vinoth Kumar S

[Milou]

I have this same problem in the DropDownListComponent. As soon as I enter a space in the cssClass (this is ofcourse needed to add multiple classes), the component crashes with an error: "Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty."

[Sureshkumar P]

Hi Milou, 

 

Thanks for your update. 

 

We have prepared the sample based on your requirement. but we cannot replicate the issue from our end. please find the sample below. 

 

Sample: https://stackblitz.com/edit/xl9dbw-swmdqb?file=index.ts  

 

If still you have facing the issue, then please provide the below details to proceed further  

1.     Share your exact Syncfusion package version. 

2.     If possible, please replicate the issue in the above attached sample and revert us with detailed issue replication procedure. 

Regards, 

Sureshkumar P 

[Massé Matthieu]

Hi,

I have same issue on RTE (VueJS).

I reproduced this error applying changes to your stackblitz : https://stackblitz.com/edit/xl9dbw-svfqfm?file=index.ts

Failed to execute 'add' on 'DOMTokenList': The token provided ('class_custom-1 class_4 class_3') contains HTML space characters, which are not valid in tokens.

Any solution we can apply as a "common use" for all components ?

[Indrajith Srinivasan]

Hi Masse,    

   

Greetings from Syncfusion support,  

     

Currently, we can't achieve the scenario from application end. We have considered “Configuring multiple css classes for the Rich Text cssClass property doesn't work" as a bug from our end  and logged the report for the same, and the fix will be included with our patch release on 1^st Week of December.  

       

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/19901/   

  

Regards,  

Indrajith 

[Indrajith Srinivasan]

Hi Masse,

Thanks for your patience,  

We have resolved the reported issue “Configuring multiple css classes for the Rich Text cssClass property doesn't work ” with the package version 18.3.52. 

 

Release Notes: https://ej2.syncfusion.com/documentation/release-notes/18.3.52/?type=all#richtexteditor  

 

Can you please upgrade your package to this version to resolve the reported issue? 

Regards,
Indrajith

[Dimitar]

I am having the same issue with Combo Box control in ASP.NET Core. Initially cssClass is set to "class1 class2". Then in Javascript I try to set it to "class1" and at that point I get "Uncaught DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided ('class1 class2') contains HTML space characters, which are not valid in tokens.".

<ejs-combobox id="cbxTest" dataSource="ViewBag.Groups" popupHeight="220px"

                              ejs-for="@Model.GroupName" cssClass="class1 class2" enabled="false">

</ejs-combobox>

<script>

function test() {

 var cbx1 = document.getElementById("cbxTest").ej2_instances[0];

 cbx1.cssClass = "class1"; <--------------------Error is thrown

}

</script>

[Ponmani Murugaiyan]

Hi Dimitar, 

Thanks for the update. 

We would like to inform you that we have resolved the reported issue in our end. We suggest you to upgrade to latest version 18.4.41 to get rid of this issue in your application. Please find the attached sample below for reference.  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_Combobox-764261390 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Matthieu]

Hi, I'm having the same problem on Accordion component in angular:

Failed to execute 'add' on 'DOMTokenList': The token provided ('formblock-simple with-chooseform') contains HTML space characters, which are not valid in tokens.

Regards,

Matt Richard

[Sureshkumar P]

Hi Matthieu,

We have created a branched forum under your account for the new issue in the Accordion component # 177760. Please follow the ticket for further technical assistance.

Regards,

Sureshkumar P