Telerik Forums
Kendo UI for Angular Forum
1 answer
266 views

Hi

just a quick question - I need to make a multi-language application and am basing it off the coffee demo application. What I have is working perfectly but I am missing the German translations for the component messages? If I look in the /messages folder there are files for en, fr and en... I know how to implement the function and have it working for MY components, I just don't really want to have to do the German translations for the Kendo elements myself. Is there somewhere I can download the from?

thank you

ursus

Yanmario
Telerik team
 answered on 26 May 2022
1 answer
2.2K+ views

Hi there, I have migrated my project from Angular 11 to Angular 13 using v7.0.0 of the DialogModule. 

If I define an abstract class like so:

@Directive()
export abstract class MyAbstractDialog extends DialogContentBase {

}

Then I define a concrete implementation of this class like so

@Component(...)

export class MyConcreteDialog extends MyAbstractDialog {

}

This ran happily using Angular 11. But with Angular 13, at runtime I see the following exception:

 

Directives cannot inherit Components. DirectiveMyAbstractDialog  is attempting to extend component DialogContentBase 

ERROR Error: Uncaught (in promise): Error: NG0903
Error: NG0903
    at ɵɵInheritDefinitionFeature (core.mjs:12388:23)
    at core.mjs:926:48
    at Array.forEach (<anonymous>)
    at Object.toString (core.mjs:926:32)
    at noSideEffects (core.mjs:592:29)
    at Module.ɵɵdefineComponent (core.mjs:882:12)

 

Do you know why this might be? Does DialogContentBase need a Directive() decorator to get this working? The work around I have found is to duplicate the common code in the base class into each of it's descendants and remove the abstract class. But I don't really want to be duplicating code!

 

 

Thanks

 

Dimiter Madjarov
Telerik team
 answered on 25 May 2022
1 answer
174 views

Hi I need to create an image Gallery view to display different size images and orientations , I have try few components but I have some questions, 

 Do you have a Gallery Component ?  

if not can the stacklayout wrap items or can you define the number of items per row ? and what is the best way to implement a lightbox to view images full screen .

 

Thanks for your help .

 

 

 
Yanmario
Telerik team
 answered on 25 May 2022
1 answer
264 views

Hi there,

I have a dropdownlist with some item and I am trying to put different background colors. I achieved to change the color of all the list elements adding this on the css:

  .k-popup .k-list .k-item {
      background-color: aqua;
  }

 

So, is there any way to apply a different background-color for each item in the dropdown?

Regards,

Jose

Hetali
Telerik team
 updated answer on 24 May 2022
1 answer
65 views

what is actual behavior
Default kendo UI behavior is like we need to render all the grid data once to activate pagination functionality if pageSize <= actual records then and then the only pagination will active but if we got pageSize > actual records the pagination won't work.

what is expected behavior
I need to set pageSize = 50 and API return me 50 records with total records field so, for now, we can assume that API return total 50 records and it has fields to indicate total records which let's say 200 so pagination will set accordingly [ 200 (total) / 50 (pageSize) = 4 page ] and pagination will active also with the pageSize <= actual logic and we can call separate API call for next 50 records after we click on next button which is been created on total records.

 

constructor( private router:Router,private httpclient:HttpClient,private EncrDecr:EncrDecrServiceService) {
    this.GetUserList();
   }
    modeldata:any={
    UserName:'',
    UserEmail:'',
    IsActive:'',
    sortable:true,
    PageSize:this.pageSize,
    PageNumber:this.pageNumber,
    SortParam:this.sortColumn,
    sortType: this.sortType
   };
   GetUserList(){
     
    this.httpclient.post(this.baseUrl+'UserDetail/GetAllGridData',this.modeldata).subscribe(res=>{
      this.gridList = res;
      this.gridData=this.gridList['Result'];
      this.items= this.gridData;
    },(error)=>{
      const err= error.error;
    })
   }
  breadCumb(){
    this.router.navigate(['/Home']);
  }
  newUser(){
    this.router.navigate(['/ManageUser']);
  }
 
  pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadItems();
  }
  loadItems(): void {
    this.gridData = {
      data: this.items.slice(this.skip, this.skip + this.pageSize),
      total: this.items.length,
    };
  }
  public sort: SortDescriptor[] = [
    {
      field: "UserName",
      dir: "asc",
    },
  ];
  public sortChange(sort: SortDescriptor[]): void {
    this.sort = sort;
    this.modeldata.sortType= sort[0].dir;
    this.modeldata.SortParam=sort[0].field;
    this.GetUserList();
    this.loadProducts();
  }
 
 
   loadProducts(): void {
    this.gridData = {
      data: orderBy(this.gridData, this.sort),
      total: this.gridData.length,
    };
  }
 
  ngOnInit(): void {
    this.gridData = this.loadItems();;
   
   
  }
Georgi
Telerik team
 answered on 24 May 2022
0 answers
168 views

Hi,

We are using Angular editor for content management and content may contains handlebars/razor syntax including HTML. I have tried custom schema option and include handlebars code inside a custom tag however we have an issue if the handlebars code contains iteration syntax. 

Could you please provide a solution/suggestion on this?

Rajesh
Top achievements
Rank 1
 asked on 24 May 2022
1 answer
436 views

using the Kendo UI for Angular, after the DatePicker control has focus, or a date is entered or selected from pop-up, the mouse wheel move changes the date. The numeric input control has the property, [changeValueOnScroll], that you can set to false, but I do not see one for the kendo-datapicker. 

I also tried creating a directive and added to the datepicker control which tried adding event listener via HostListener and addEventListener to no avail as well as finding the associated input and added the listener to that input, which also did not work.

 

Any thoughts?

Martin Bechev
Telerik team
 answered on 23 May 2022
1 answer
172 views

I have an Angular Reactive form with a kendo grid. When I double click a record in the grid I have a kendo window popping up to allow the user to edit the details of the selected record. I am able correctly  load the values of some of the other controls like the textbox and dropdown lists, but the masked textbox value does not want to display. I'n not sure what I'm doing wrong. Here is my html markup and component code. If I use interpolation then its showing me the value in the div. As you can see in the screenshot

                  <div class="col">
                    <kendo-formfield>
                      <kendo-label [for]="Mobile" text="Mobile"></kendo-label>
                      <kendo-maskedtextbox
                      formControlName="Mobile"
                      #Mobile
                      [includeLiterals]="false"
                      [(value)]="mobileValue"
                      [maskOnFocus]="true"
                      [mask]="telephoneMask"
                    ></kendo-maskedtextbox>                      
                    </kendo-formfield>        
                 

</div>

 

   
Martin Bechev
Telerik team
 answered on 23 May 2022
0 answers
52 views
Hi! Could you help with it? Maybe you have idea how to fix this. Please create example
https://github.com/telerik/kendo-angular/issues/2738
https://github.com/telerik/kendo-angular/issues/2387
Ali
Top achievements
Rank 1
Iron
 asked on 20 May 2022
1 answer
1.9K+ views

I'm getting the above error.  I've tried npm i @progress/kendo-angular-treeview

I try npm start and then I get a slightly different error and I might have to do npm i @progress/kendo-angular-label

The errors end up taking ages to get because each npm start takes a few min to get to the error.

I've tried deleting node modules and npm install but the same errors keep cropping up. I recently merged code and perhaps that's the cause but I want to fix it.  Any suggestions?

Martin Bechev
Telerik team
 answered on 18 May 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?