Hello - I want to style the dropdowns that are inside the Kendo Angular filter component without overriding Kendo dropdown styles. For example, I'd like to increase the width and set font size. Is there a way to do this?

When move item between sections, then it creates the duplicate as well active item remains as it is in dragged item section even after drop the item. Can you please suggest give workaround?

Here is the reproducible example.

app.component.ts - nodebox - CodeSandbox

I'm creating a target line for a 100% stacked column chart. But the target line is not what I want. 

Here is what want: the target is about at 80%.

Here is what I'm getting:

One point:

Two points:

Here is the code:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="column"
          [stack]="{ type: '100%' }"
          [data]="[20]"
          [color]="'#FFD100'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="column"
          [data]="[30]"
          [color]="'#FFEAB1'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="column"
          [stack]="{ type: '100%' }"
          [data]="[40]"
          [color]="'#FFF8E0'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="line"
          [data]="[{ category: 0, value: 0.8 }, { category: 1, value: 0.8 }]"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [visible]="false"></kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [visible]="false"></kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
      <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
    </kendo-chart>
  `
})
export class AppComponent {
  
}

Hello,

How can we disable toolbar buttons for the Angular Listbox?  There's an example of this in the jQuery version:

https://demos.telerik.com/kendo-ui/listbox/index

Thanks!

Hello,

Currently I have a Kendo Filter in which I'm passing in a CompositeFilterDescriptor (dslFilter) as a value, as such:

<kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter" // <=== THIS ONE
      (valueChange)="onFilterChange($event)"
    >
...

As I understand it, the filter will turn a CompositeFilterDescriptor into a bunch of generated input forms, such as this:

Problem is, I implemented Kendo Autocomplete in those fields (full HTML below), but the generated input forms aren't generated as Autocomplete input forms.  I only get Autocomplete forms if I (1) edit the field in one of the forms, or (2) I add a filter.  In both cases, the input form will have to deviate from the generated (from the CompositeFilterDescriptor) form in order to become Autocomplete.  Otherwise, it's just a textbox.

How do I get the generated input forms to be Autocomplete?  Edit:  A more general question, how can I modify the generated input forms?  Say if I want the generated textbox to be wider...

Full HTML is below:

  <div>
    <kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter"
      (valueChange)="onFilterChange($event)"
    >
      <ng-container *ngFor="let fl of filters">
        <kendo-filter-field [field]="fl.field" [editor]="fl.editor">
          <ng-template kendoFilterValueEditorTemplate let-currentItem>
            <ng-container *ngFor="let field of autocompleteFields">
              <ng-container *ngIf="currentItem.field === field">
                <kendo-autocomplete
                  [data]="getUniqueValues(currentItem.field)"
                  [value]="currentItem.value"
                  [suggest]="true"
                  [virtual]="{itemHeight: 28}"
                  (valueChange)="editorValueChange($event, currentItem, filter.value)"
                >
                </kendo-autocomplete>
              </ng-container>
            </ng-container>

          </ng-template>
        </kendo-filter-field>
      </ng-container>
    </kendo-filter>
  </div>

I am trying to create a heirarchial drawer, I have pasted her my html, ts and scss files as they are.

I have set up the items for the drawer in the ts file and used id and parent id. If I don't use template in html then they all appear fine and nested as they should be but I am unable to apply mouse over or active/selected css styles to the drawer items. If I use template then I am able to apply css mouse over and active styles but then I don't know how to get the drawer subitems to work. Can you please help me with this? The help online shows only setting up in ts file and does not show, how you can apply mouse over etc to custom svg icons or the text. This is very urgent.

Regards,

Adeel

This is my html:

<kendo-drawer-container class="side-bar-container-drawer-container">

      <kendo-drawer #drawer [items]="drawerItems" [mini]="isV6Enabled"  mode="push" [autoCollapse]="false"

        [(expanded)]="expanded" (select)="onSelect($event)" [isItemExpanded]="isItemExpanded">

        <ng-template kendoDrawerItemTemplate let-item let-level="level" let-hasChildren="hasChildren"

        let-isItemExpeanded="isItemExpanded">

          <ng-container>

              <kendo-svgicon [icon]="item.svgIcon"></kendo-svgicon>  

              <span class="drawerspan">{{ item.text }}</span>


          </ng-container>

        </ng-template>

      </kendo-drawer>

      <kendo-drawer-content>

        <router-outlet></router-outlet>

      </kendo-drawer-content>

    </kendo-drawer-container>

and this imy ts file:

export class SideBarComponent implements AfterViewInit {

  public expandedIndices = [0];

  public selected = "Home";

  public drawerItems: Array<DrawerItem> = [

    {text: "Home", svgIcon: DrawerHome, cssClass: "drawerspan", selected: true, id: 0 },

    {text: "Monitor", svgIcon: bellIcon, cssClass: "drawerspan",  id: 1 },

    {text: "Review", svgIcon: calendarIcon, cssClass: "svg-icon-hover",  id: 2 },  

    {text: "Analyse", svgIcon: envelopeLinkIcon, cssClass: "drawerspan", id: 3 },

    {text: "Line Operations", id: 4, parentId: 3},

    {text: "Line Engineering", id: 5, parentId: 3 },

    {text: "Site Operations", id: 6, parentId: 3 },

    {text: "Site Engineering", id: 7, parentId: 3 },

    {text: "Planning", id: 8, parentId: 3 },

    {text: "Waste", id: 9, parentId: 3 },

    {text: "KPIs", id: 10, parentId: 3 },

    {text: "Activity", svgIcon: starOutlineIcon, id: 11 },

    {text: "Search", svgIcon: envelopeLinkIcon, id: 12 },

    {text: "Help", svgIcon: starOutlineIcon, id: 13 },

  ]

  @Input() items: MenuItemModel[];

  @Input() isV6Enabled: boolean;

  @Input() expanded: boolean;

  @Input() autoCollapse: boolean;

  @Input() updateBadgeVisibility$: BehaviorSubject<boolean>;

  @Input() refreshDefaultPage$: BehaviorSubject<boolean>;

  @Input() toggleDrawer$ : BehaviorSubject<boolean>;

  @Input() userIsAuthenticated: boolean;

  @Input() logo: string;

  @ViewChild('drawer') public drawer: DrawerComponent;

  selectedItem: any;

  constructor(private route: ActivatedRoute,

              private router: Router) {

  }

  ngAfterViewInit(): void {

    this.toggleDrawer$?.subscribe(result => {

      if (result) {

        this.drawer.toggle();

      }

    });

  }

  public isItemExpanded: DrawerItemExpandedFn = (item): boolean => {

    return this.expandedIndices.indexOf(item.id) >= 0;

  };

  isSelected(item: any): boolean {

    return this.selectedItem === item;

    }

    getIconClasses(level: number, item: any): any {

      const classes = {};

      classes['k-level-' + level] = !this.isSelected(item);

      classes['k-level-' + level + '-selected'] = this.isSelected(item);

      return classes;

    }

  getItemIcon(item: any, isItemExpanded: boolean): string {

    const iconMap: { [key: string]: string } = {

      'traceability': 'categorizeIcon',

      'lineview admin': 'gearsIcon',

      'customer admin': 'userIcon'

    };

    const lowerCaseText = item.text.toLowerCase();

    if (iconMap.hasOwnProperty(lowerCaseText)) {

      return iconMap[lowerCaseText];

    } if (isItemExpanded) {

      return 'folderOpenIcon';

    } else if (!isItemExpanded) {

      return 'folderIcon';

    } else {

      return item.icon;

    }

  }

  public refreshDefaultPage() {

    this.refreshDefaultPage$?.next(true);

  }

  public onMouseOver(ev: DrawerSelectEvent): void {

    ev.item.svgIcon = bellIcon;

  }

  public onSelect(ev: DrawerSelectEvent): void {

    this.selected = ev.item.text;

    const current = ev.item.id;

    if (ev.item.id == 0)

    {

      ev.item.svgIcon = DrawerHomeActive;

    }

    else {

      this.drawerItems[0].svgIcon = DrawerHome;

    }

    if (this.expandedIndices.indexOf(current) >=0)

    {

      this.expandedIndices = this.expandedIndices.filter(

        (id) => id !== current);

    }

    else

    {

        this.expandedIndices.push(current);

    }

  }

}

and this is my page scss: