Hi there,

How do I access the CSS of the Kendo expander header? I can edit it in dev tools and the changes show up, but when I try to access the k-expander-header in my CSS files, it shows no changes.

Please see the Stackblitz here:

https://stackblitz.com/edit/angular-7tbwhs?file=src%2Fapp%2Fapp.component.ts

Thank you!

Hello everyone, I have a kendo-expansionpanel defined like this:

  <kendo-expansionpanel gdArea="filters" [title]="expandedState ? initialPannelTitle : pannelTitleFilters" [(expanded)]="expandedState">

- pannelTitleFilters is a string that consists of multiple key: values, here's an example of how it can look (style included):

EXTRA: ALL - Initial state: executed - STAINING: all - acceptance date: today - location: milan

I've been asked to make everything that specifies the filter bold, so the result would be something like:

EXTRA: ALL - INITIAL STATE: EXECUTED - STAINING: ALL - ACCEPTANCE DATE: TODAY - LOCATION: MILAN

I am struggling to find a way to do that: [innerHTML] instead of [title] breaks the component, as it removes the styles and it doesn't make possible to expand or collapse the panel.

NOTE: the string is generated using the function below, so it'd be possible for me to put some "special characters" (eg: **) to surround the parts that need to be bolded, but I didn't find any pipe that would make the text bolded without the use of innerHTML. How can I solve this?

    for (let [key, value] of Object.entries(obj)) {
      // Filter out falsey values
      if (Boolean(value)) {
        // Manage multiselect string
        if (Array.isArray(value)) {
          let tmp = value.join();
          // Truncate string if it exceeds max length
          if (tmp.length > maxStringLenght) {
            value = tmp.substring(0, maxStringLenght).concat('...');
          } else {
            value = tmp;
          }
        }
        // eg: LOCATION: MILAN - 
        title += `${key}: ${value}${separator}`
      }
    }
    // Remove last separator
    return title.trim().substring(0, title.length - 2);
  }

Hi,

I tried the ExpansionPanel by implementing the example below in my app-root component:

Interaction - ExpansionPanel - Kendo UI for Angular (telerik.com)

All panels are expanded by default, if I click on the collapse button, I see the animation to go from expanded to collapse state, but the panel resets itself immediatly to its expanded state. (see video as attachment)

I am importing this style in my styles.scss:

@import "~@progress/kendo-theme-bootstrap/scss/expansion-panel/index";

When I add the all.scss in my styles it seems to work correctly...

Any idea why this does not work?

thx!

----

My Styles.scss

My Kendo-packages.json