Adding a cssClass to e-panel

[Karel Roets]

Hello,

I am trying to add a cssClass to an e-panel element after it has already been rendered.

Changing the isFullSize prerender will give the wanted results.

I have tried to refresh the dashboardLayout but to no avail.

Is there any way to make this work?

Kind 

[LeoLavanya Dhanaraj]

Hi Karel,

 

Greetings from Syncfusion support.

 

The cssClass property only accept the string value, not a conditional operator. So we suggest you add the class dynamically by using created event in the Angular Dashboard Layout component.

 

Please refer the below code snippet.

[app.component.html]

<ejs-dashboardlayout

  (created)="created($event)">

</ejs-dashboardlayout>

 

[app.component.html]

public isFullSize: boolean = true;

 

created(event: any): void {

    for (var i = 0; i < document.querySelectorAll('.e-panel').length; i++) {

      var panels = document.querySelectorAll('.e-panel');

      if (this.isFullSize) {

        panels[i].classList.add('fullScreen');

      } else {

        panels[i].classList.remove('fullScreen');

      }

    }

  }

You can find the sample from below link.

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

Please let us know if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Karel Roets]

Hi,

I think you did not get me right.

I have made a sample (https://stackblitz.com/edit/angular-r6fhdw-eumdvf?file=app.component.ts)
I have added a button into 1 panel, when this button is clicked i need to add a class to the panel as visible in my sample.

[LeoLavanya Dhanaraj]

Hi Karel,

We have checked the shared sample. But there is no button inside the panel. Please check the below screenshot of the output of the shared sample.

Based on your shared details, we have prepared a sample where we bind the button component inside the panel. By clicking the button, we have added the class dynamically to the panels.

Please refer the below code snippet.

[app.component.html]

<e-panel>

    <ng-template #content>

      <div>

        <button

          class="e-btn e-info"

          style="margin:120px 20px 0px 80px"

          (click)="clicked($event)"

        >

          Add cssClass

        </button>

      </div>

    </ng-template>

</e-panel>

 

[app.component.ts]

public isFullSize: boolean = true;

 

clicked() {

  for (var i = 0; i < document.querySelectorAll('.e-panel').length; i++) {

    var panels = document.querySelectorAll('.e-panel');

    if (this.isFullSize) {

      panels[i].classList.add('fullScreen');

    } else {

      panels[i].classList.remove('fullScreen');

    }

  }

}

Refer the below sample link for your reference.

Sample : https://stackblitz.com/edit/angular-r6fhdw-6j2q7u?file=app.component.ts

Please let us know if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Karel Roets]

Hi,

This does nothing, you can click the button and the event will fire but the class will not be added to the panel.

Try giving the css class a property and you will see that your example does not work.

I have added a sample: https://stackblitz.com/edit/angular-r6fhdw-41nbqc?file=app.component.html

You can clearly see that the css works when it is there on load but does not seem to get added in runtime.

EDIT: I got it working

[LeoLavanya Dhanaraj]

Hi Karel,

Sorry for the inconvenience.

We were able to identify your reported query in the shared sample. By setting the below CSS style for the e-panel element you can achieve your requirement. Please refer the below code snippet.

[app.component.css]

#default_dashboard.e-dashboardlayout.e-control .e-panel.fullScreen {

    background-color: red;

}

Now by clicking on the button the class name “fullScreen” will be added to all the panels and you can able to visualize the color change in the UI. You can find the sample from below link.

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

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

Regards,

Leo Lavanya Dhanaraj

[Karel Roets]

Hi,

Thank you for this solution.

I was also able to get it working by just giving the css property !important

[Indhumathy Loganathan]

Hi Karel,

We are glad that your reported issue has been resolved. Please get back to us if you need any further assistance.

Regards,

Indhumathy L