Telerik Forums
Kendo UI for Angular Forum
1 answer
12 views

I am already using other Kendo components in my application currently. I can access the normal dropdown controls (autocomplete, multi-select, etc). When trying to use either the MultiSelectTree or the DropDownTree I get a build error saying that it is not a known element. 

I have double checked the imports and installed modules. I even ran grep against the @progress folder in node_modules. It returns 0 results when searching for selector:"kendo-dropdowntree".

Any help in figuring what's going on would be greatly appreciated.

Yanmario
Telerik team
 answered on 27 May 2022
1 answer
8 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
51 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
10 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
18 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
18 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
6 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
15 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
Telerik team
 answered on 23 May 2022
1 answer
12 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
Telerik team
 answered on 23 May 2022
0 answers
3 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
 asked on 20 May 2022
Top users last month
sun
Top achievements
Rank 2
Iron
Iron
Iron
Alan
Top achievements
Rank 2
Iron
Iron
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Ohad
Top achievements
Rank 2
Iron
Iron
Iron
arkan
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?