Hello,

Using the angular material theme you can set the appearance of form controls to "outline".

As you can see in the official documentation here:

https://material.angular.io/components/form-field/overview

Under "Form field appearance variants"

I can't seem to find this option in kendo ui.

Is there any way we can style the kendo-formfield with the same look as the angular material outline appearance?

Kind regards,

Nick Vergauwen

I am following the Rendering Item Checkboxes documentation. But I'm running into a problem where when I try to reuse the form and existing controls, the multiselect displays the correct tags and the correct items are highlighted when you open it, but the checkbox inputs are not checked.

This is my HTML:

This is my isItemSelected method:

This how I'm reusing the form, where control named Foo represents the multiselect:

Attached is a screenshot demonstrating what I mean.

Hi Team,We are planing to use Kendo Conversation UI to provide messaging feature to the user. 

We have an existing application which is built in angular 8 and uses Web API for any CRUD operation which is written in C#. 

Here, I am looking for some code sample / snippet / example which can explain how a user can participate in chat sessions with other users (not with any bot etc.) 

and would like to see how the message will be send to another user in a chat session or how the message will broadcast to multiple users.

Any help in this regard will be very much appreciated.

Regards,

Mahesh

I tried adding a class to the kendo-dropdownlist but it does not seem to do anything.

.hide-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 99%;
}

<kendo-dropdownlist [class]="'hide-overflow'".... 

What is best way to show ellipses or alternately do word wrap?

I have created a light and dark theme from the kendo theme builder tool. I would like to switch the themes on the fly in my angular app. I managed to do that, however, the charts dont seem to like the new theme. Other controls seem to work fine.  I am switching href of the link tag on the fly. Below is a snippet of the code I used.

@Component({
  selector: 'css-loader',
  template: `<link rel="stylesheet" type="text/css" [href]="path" />`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CssLoaderComponent {
  public theme: string = environment.theme;
  cssPath: any;
  constructor(
    public sanitizer: DomSanitizer,
    private themeService: SidenavService,
    private cd: ChangeDetectorRef,
    private router: Router
  ) {

    this.themeService.toggleState$.subscribe((val) => {
      this.theme = this.theme === 'light-theme' ? 'dark-theme' : 'light-theme';
      this.cssPath = `assets/themes/${this.theme}/${this.theme}.css`;
      this.cd.markForCheck();
    });
  }
  set path(path) {
    this.cssPath = path;
  }
  get path() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.cssPath);
  }
}

Can I group the grid with Date, but ignore the time part?

Hi,

how can I localize (change language) my scheduler in AngularJS?

On the page I found only a solution for jQuery.

I want to edit the Kendo Pager Info such that the items counts is properly represented by its locale. Ex. 1025 ---> 1,025

Here's the approach I did:

I converted the total of the PagerInfoComponent from number to any, and applied this to a lifecycle hook:

this.pagerInfoComponent.total = this.pagerInfoComponent.total.toLocaleString();
this.pagerInfoComponent.ngOnInit();

This is causing a problem as it's resulting to this: 1 - n of 1025 items.

Another way I could do this is to directly edit it via DOM, but then I would have to update the values constantly for any change I make in a grid.

How can I properly best approach this? Please see link here: https://stackblitz.com/edit/angular-mejm68

Thanks in advance!

I'm trying to use Kendo Angular Upload but when I check the data being sent to the server in Google Chrome DevTools, the property rawFile, which I beleive is the one responsible to actually retrieve the file data, is always empty as the attachment indicates.

Here's my HTML:

Here's my angular component: