System crashes when adding a space on the class attributes.

[Lucas Ruiz]

Hello and good afternoon.

I'm trying to add a simple css-only tooltip to one of the ColumnDirective components. For this, I added a .tooltip class using the customAttributes parameter. However sometimes I need to append another class here, but when I do so the system crashes. After some light debugging I realized that it crashes every time it detects a space on the class name. For example:

const   customAttributes = {};
customAttributes['class'] = 'tooltip';
if (fields.includes(col.name)){
    customAttributes.class = `${customAttributes.class} disabled`;
}

What I also realize is that the system still crashes even if I do this:

customAttributes['class'] = 'tool tip';

Do you have any idea why this could be happening? Also if you have a solution for this I'll be glad to know.

Thanks and have a good day.

[Ajith Govarthan]

Hi Lucas Ruiz, 

Thanks for contacting Syncfusion support. 

Query: Sometimes I need to append another class here, but when I do so the system crashes. After some light debugging I realized that it crashes every time it detects a space on the class name. 

Based on your query, we suspect that you want to add more than one classList using the customAttributes property in your Grid application. So, we have prepared sample in that we have taken an array of classList names and bound to the customAttributes property to apply more than one class names for the columns. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 

Index.js 

return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent dataSource={orderDetails} height="350"> 

            <ColumnsDirective> 

              <ColumnDirective 

                field="OrderID" 

                headerText="Order ID" 

                width="120" 

                textAlign="Right" 

              /> 

              <ColumnDirective 

                customAttributes={{ 

                  class: ['e-attr', 'c-fcell', 'c-newclass'] 

                }} 

                field="CustomerName" 

                headerText="Customer Name" 

                width="150" 

              /> 

              <ColumnDirective 

                field="OrderDate" 

                headerText="Order Date" 

                width="130" 

                format="yMd" 

                textAlign="Right" 

              /> 

Sample Link: https://stackblitz.com/edit/react-61t4vc 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Lucas Ruiz]

This worked exactly as intended, thank you very much for your support.

[Rajapandi Ravi]

Hi Lucas 

We are happy to hear that the provided solution works fine at your end. 

Please get back to us if you need any further assistance. 

Regards, 

Rajapandi R