I am using Kendo Angular Charts 7.1.0 with Angular 14.0.4

Currently it displays the Stock Chart of Kendo like below...

How to move the below readings pane height wise to little bit below like 30px so that it won't overlap with date readings...?

This is because it is happening with negative values in the above chart.

Any help would be greatly appreciated.

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:

Hello everyone

I would like to persist the selection of columns in a kendo treelist, such that when a user reloads the page their selection of columns remains the same.

Is there a way of hooking into the events that take place when a selection is applied?

For example, in the picture attached, if the user were to select to display 'Description Two' and hit apply, then I would like for all three columns to be displayed on next reload. Likewise if a user were to hide both Description columns, then only the 'Name' column would be displayed on next reload. All three would still show up in the column chooser in this example, just that two of them would be turned off.

What might I do to achieve this in Angular15?

Best regards

Hi there,

I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.

Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?

Best Regards,

FirestormHell

@Component({
selector: 'my-app',
template: `
 <kendo-combobox [data]="listItems">
   <ng-template kendoComboBoxNoDataTemplate>
     <h4>No data!</h4>
   </ng-template>
 </kendo-combobox>
`
})
class AppComponent {
  public listItems: Array<string> = [];
}

 



<ng-template kendoComboBoxNoDataTemplate>
                            <kendo-textarea  placeholder="Enter text here." [rows]="4"  resizable="both"
                                formControlName="name">
                            </kendo-textarea>
                        </ng-template>

but showing like this. is this kendo-textarea can we show properly in this template.

I have seen following example https://www.telerik.com/kendo-angular-ui/components/tooltip/templates/ which shows how to use a template to render custom content for a tooltip, however it only shows very basic example of passing an "anchor" to the template, I would like to pass in a variable to the template, how do I do that?

In below example, I would like to pass the dataItem from within a ngFor to the template so that I can render custom tooltip content based on the data in dataItem,