Telerik Forums
Kendo UI for Angular Forum
1 answer
256 views

Hi,

I am trying to decrease package count in my project to speed up the angular build.

I spotted @progress/kendo-angular-l10n package and wonder if it is possible not to add that package since we are not using localization?

 

Regards

Serdar

Svet
Telerik team
 answered on 02 Jul 2020
2 answers
286 views
I need to have ngModel in chip component because my list is updated from backend and accordingly I want to remove/add chips on UI. So basically every time my list is updated the chip component should show the items which are there in that list.
Maitri
Top achievements
Rank 1
Veteran
 answered on 02 Jul 2020
1 answer
187 views

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

Svet
Telerik team
 answered on 01 Jul 2020
2 answers
144 views

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:

<ng-container *ngSwitchCase="'mulitselect'">
    <kendo-multiselect [formControlName]="col.ControlName"
                       [data]="col.Extras.Data"
                       [textField]="col.Extras.TextField"
                       [valueField]="col.Extras.ValueField"
                       [valuePrimitive]="true"
                       [autoClose]="false">
        <ng-template kendoMultiSelectItemTemplate
                     let-dataItem>
            <input type="checkbox"
                   class="k-checkbox"
                   [checked]="isItemSelected(col.Extras.Data, dataItem, col.Extras.ValueField)">
            <label class="k-checkbox-label">{{ dataItem[col.Extras.TextField] }}</label>
        </ng-template>
      </kendo-multiselect>
</ng-container>

 

This is my isItemSelected method:

isItemSelected(data: any, dataItem: any, valueField) {
    return data.indexOf(item => item[valueField] === dataItem[valueField]) > -1;
}

 

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

showEditForm(record?: ITestInterface) {
    this.form.disable();
    this.form.reset(record); // Patch in new value
 
    if (record) {
        this.form.get('Foo').setValue([1, 3]);
    }
}

 

Attached is a screenshot demonstrating what I mean.

Georgi
Telerik team
 answered on 30 Jun 2020
3 answers
361 views

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

Dimiter Topalov
Telerik team
 answered on 30 Jun 2020
9 answers
1.8K+ views

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?

 

 

 

Steven
Top achievements
Rank 1
 answered on 29 Jun 2020
1 answer
1.0K+ views

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);
  }
}

Dimiter Topalov
Telerik team
 answered on 29 Jun 2020
1 answer
689 views

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

 

 

 

Dimiter Topalov
Telerik team
 answered on 29 Jun 2020
1 answer
248 views

Hi,

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

On the page I found only a solution for jQuery.

 

Nencho
Telerik team
 answered on 29 Jun 2020
5 answers
973 views

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!

Charles
Top achievements
Rank 1
Veteran
 answered on 26 Jun 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?