Telerik Forums
Kendo UI for Angular Forum
0 answers
2 views
We are facing performance issue for textbox control.
While typing the text if we load multiple controls like 5 grids in a single page, the entered text in a textbox taking too much time to appear. 
the above-mentioned performance issue is only with textbox and text area not with other controls like dropdown, checkbox, grid etc..
 
Thanks in Advance
Thimmappa
Top achievements
Rank 1
 asked on 29 Nov 2022
0 answers
2 views

How could I change DateTime parameter format? 

How could I change Preview button text?

I am use telerik-report-viewer in Angular project. 

 


Erdem
Top achievements
Rank 1
 asked on 29 Nov 2022
0 answers
3 views

Hi, 

The grid does not seem to obey date sorting ever since I changed it to the template showed a formatted date string.

Would have thought the sorting would be on the field which is a valid Date type. 

 <kendo-grid-column width="160" field="queuedTime" title="Queued" [filterable]="false" filter="date">
        <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.queuedTimeString }}</ng-template>
      

</kendo-grid-column>

Jeremy
Top achievements
Rank 1
 asked on 29 Nov 2022
1 answer
4 views

After running this it selects "Mike" but It does not expand. Am I missing anything!!

 

<kendo-treeview
  [nodes]="data"
  textField="text"
  kendoTreeViewHierarchyBinding
  childrenField="items"
  [filterable]="true"
  kendoTreeViewExpandable
  [expandedKeys]="expandedKeys"
  kendoTreeViewCheckable
  [(checkedKeys)]="checkedKeys"
>
</kendo-treeview>



import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'kendo-appx';

  public fetchChildren(node: any): Observable<any[]> {
    //Return the items collection of the parent node as children.
    return of(node.items);
  }

  public hasChildren(node: any): boolean {
    //Check if the parent node has children.
    return node.items && node.items.length > 0;
  }

  public expandedKeys: any[] = ['2', '0', '1', '3'];

  public checkedKeys: any[] = ['2_0_0_1'];

  public data: any[] = [
    {
      text: 'Furniture',
      items: [{ text: 'Tables' }, { text: 'Sofas', items: [{ text: 'Red' }] }],
    },
    {
      text: 'Decor',
      items: [{ text: 'Curtains' }, { text: 'Carpets' }],
    },
    {
      text: 'RH',
      items: [
        {
          text: 'Magdelena',
          items: [
            {
              text: 'Joel',
              items: [
                {
                  text: 'Ashish',
                },
                {
                  text: 'Mike',
                },
              ],
            },
          ],
        },
      ],
    },
  ];
}


Hetali
Telerik team
 answered on 28 Nov 2022
1 answer
11 views

I have the following:

@Component({

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(
  [...]
    private internationalization: IntlService,
    public translateService: TranslateService,
 
  ) {
    this.translateService.setDefaultLang('fr');

    (this.internationalizationasCldrIntlService).localeId = this.translateService.currentLang;

 

My question is how do I UNIT-TEST such a component, knowing that actually my test gives me the following

TypeError: Cannot read properties of undefined (reading 'replace')
TypeError: Cannot read properties of undefined (reading 'replace') at CldrIntlService.set localeId [as localeId] (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@progress/kendo-angular-intl/__ivy_ngcc__/dist/fesm2015/index.js:196:30) at new AppComponent (http://localhost:9877/_karma_webpack_/webpack:/Client/app/app.component.ts:89:6) at NodeInjectorFactory.factory (ng:///AppComponent/ɵfac.js:4:10) at getNodeInjectable (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:3520:44) at instantiateRootComponent (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12587:23) at createRootComponent (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:14090:23) at ComponentFactory.create (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13967:25)

 

and the test is like this:

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { HttpClient } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { KendoModule } from './shared/kendo.module';
import { AppModule } from './app.module';
import '@progress/kendo-angular-intl/locales/fr/all';
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [
        HttpClientTestingModule,
        ReactiveFormsModule,
        RouterTestingModule,
        NoopAnimationsModule,
        CoreModule,
        LayoutModule,
        KendoModule,
        AppModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: (http: HttpClient) => new TranslateHttpLoader(http, '/assets/i18n/', `.json?v=${new Date().getTime()}`),
            deps: [HttpClient]
          }
        })        
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
Martin
Telerik team
 answered on 28 Nov 2022
1 answer
9 views

Hi Team,

I am working on the kendo-grid and implement export to excel but issue is that after excel data is visible but button not render on the excel can  you please tell me why button not visible on excel,check below attached stackblitz for reference.i am stuck above issue in last 3 days.please  help me regarding this issue?

 

https://stackblitz.com/edit/angular-ko29cm?file=src%2Fapp%2Fapp.component.ts

 

 

Martin
Telerik team
 answered on 28 Nov 2022
1 answer
5 views

So I have a grid where only certain rows are selectable via checkbox selection, so only certain rows have checkboxes. With the default styling, when I click on the Select All checkbox, ALL the rows, both those with checkboxes and those without get the highlighted style applied.  Is there any way to only apply the highlight to the checkbox rows?

Svet
Telerik team
 answered on 25 Nov 2022
0 answers
4 views

I have two templates but I need optimize it to one template, the only different of that templates is that one kendo datepicker has more viewing atributes. Is there any way to get one template and for example for one button the kendo datepiker has some atributes and for another clicking button the datepiker has different atributes and everything is on one template? With two templates everything is working fine.

 

 

 


<ul class="list-group">
    <li class="list-group-item flex-fill border-0">  
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'pdf')">PDF</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'csv')">CSV</button>          
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'xlsx')">XLSX</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'txt')">TXT</button>   
    </li>
</ul>

<ul class="list-group">
    <li class="list-group-item flex-fill border-0">
       
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'pdf')">PDF</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'csv')">CSV</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'xlsx')">XLSX</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'txt')">TXT</button>
    </li>
</ul>

<ng-template #itemListRef kendoCalendarMonthCellTemplate let-context="cellContext">
    <form>
        
        <div>
            <kendo-datepicker
            [(ngModel)]="reportStartEnd"
            [ngModelOptions]="{standalone: true}">
            </kendo-datepicker>
        </div>
     
        <div>
            <kendo-datepicker
            [(ngModel)]="reportEndDate"
            [ngModelOptions]="{standalone: true}"> 
            </kendo-datepicker> 
        </div>
    </form>
</ng-template>

<ng-template #itemListRef1 kendoCalendarMonthCellTemplate let-context="cellContext">
    <form>
        
        <div>
            <kendo-datepicker
            [(ngModel)]="reportStartDate"
            [ngModelOptions]="{standalone: true}"
            bottomView="year"
            topView="decade"
            format="MMMM yyyy"
            >
            </kendo-datepicker>
        </div>
       
        <div>
            <kendo-datepicker
            [(ngModel)]="reportEndDate"
            [ngModelOptions]="{standalone: true}"
            bottomView="year"
            topView="decade"
            format="MMMM yyyy">
            </kendo-datepicker>
        </div>
    </form>
</ng-template>
Marek
Top achievements
Rank 1
 asked on 24 Nov 2022
0 answers
13 views

Hi Team , 

In our use case we wanted a tabular view inside spanned columns cell value.

Example Structure Inside Spanned columns:

<kendo-grid-span-column [style]="{ 'padding': '0px'}">
  <!-- CAPA NAME -->
        <kendo-grid-column field="cName" title="CName" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="cDescription" title="CDescription" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="cCategory" title="CCategory" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="pName" title="pName" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="pValue" title="pValue" [width]="180">
        </kendo-grid-column>

  <ng-template kendoGridCellTemplate let-dataItem>

          <tr style="height:200px"class="border-tr" *ngFor="let item of dataItem.capability">
            <td class="border-td column-style-class" width=19.9%>
              <p>{{ item?.cName }}</p>
            </td>
            <td class="border-td column-style-class" width=20.2%>
              <p>{{ item?.cDescription }}</p>
            </td>
            <td class="border-td column-style-class" width=20%>{{ item?.cCategory }}
              <span><button (click)="removeCapability(item)" kendoGridRemoveCommand>Remove</button></span>
            </td>
            <td style="padding:0px" >
              <div style="height:300px !important;overflow-y:scroll;">
          <tr *ngFor="let itemParam of item.parameters" >
            <td width=50.1% class="border-td column-style-class">{{itemParam.pName}}</td>
            <td [width]="460" class="border-td column-style-class">
              <kendo-textbox *ngIf="itemParam.pName == 'Name' || itemParam.pName == 'InterfaceIndex' "
                [style.width]="460" (change)="updateCapabilityParameters($event,itemParam,item)"
                placeholder="Type your message here" [clearButton]="true" [value]=itemParam.pValue>
              </kendo-textbox>
              <kendo-dropdownlist [style.width]="460"
                *ngIf="itemParam.pName == 'Ingress' || itemParam.pName == 'Egress'"
                [data]="listItemsIngressEgress" [value]=itemParam.pValue> </kendo-dropdownlist>
              <button kendoButton [style.width]="460" *ngIf="!openedDialog && itemParam.pName == 'Alias'"
                (click)="open(itemParam.pName )">Details</button>
            </td>
          </tr>
          </div>
          </td>
          </tr>

        </ng-template>

      </kendo-grid-span-column>

 

 

But with this customization we are not able to achieve proper stylings and filters provided by kendo-grid.

                    
Akshata
Top achievements
Rank 1
 asked on 22 Nov 2022
0 answers
19 views
<div class="container" style="min-height: 50px; margin-top: 0px;">
    <div class="col-md-12">
      <div class="statistics">
        <div id="myRoleItemsAll" >
          <button [ngClass]="{'selected' : totalMySupportVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayTotalVarianceMyAwaitingSupport()">
          <p class="countnumber countnumber-purple">{{totalMySupportVarianceCount}}</p>
          <label>Total</label>
        </button>
        </div>
        <div id="myRoleItemsActive" >
          <button [ngClass]="{'selected' : pendingByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayPendingByMeVarianceMyAwaitingSupport()">
          <p class="countnumber countnumber-green">{{pendingByMeVarianceCount}}</p>
          <label>Pending on Me</label>
        </button>
        </div>
        <div id="myRoleItemsExpired" >
          <button [ngClass]="{'selected' : doneByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayDoneByMeVarianceMyAwaitingSupport()">
          <p class="countnumber countnumber-red">{{doneByMeVarianceCount}}</p>
          <label>Done by Me</label>
        </button>
        </div>
        <div class="clearfix"></div>
      </div>
     
    </div>
  </div>
  <div class="panelGridContainer">
    <ng-template #template let-anchor>
      <span>{{ anchor.nativeElement.innerText }}</span>
  </ng-template>
  <div kendoTooltip
      showOn="none"
      [tooltipTemplate]="template"
      filter=".k-grid td"
      (mouseover)="showTooltip($event)"
      position="right"
  >
    <kendo-grid
    [data]="viewMySupport"
    [columnMenu]="false"
    filterable='menu'
    [filter]="gridState.filter"
    [resizable]="true"
    [sort]="gridState.sort"
    [sortable]="true"    
    (filterChange)="filterChange($event)"
    (dataStateChange)="onStateChange($event)"      
    [navigable]="true"      
    [style.height.%]="300"
  >
    <ng-template kendoGridToolbarTemplate>          
      <button type="button" kendoGridExcelCommand icon="file-excel">
        Export to Excel
      </button>
    </ng-template>
    <kendo-grid-column
      field="varianceID"
      title=" Variance ID"
      >
    <ng-template  kendoGridCellTemplate let-dataItem>
      <a style="color:#337ab7"  [routerLink]="['/variance/edit/'+dataItem.varianceID]">{{dataItem.varianceID}}</a>
</ng-template>
  </kendo-grid-column>
    <kendo-grid-column
      field="varianceTitle"
      title="Variance Title"
    >
    <ng-template kendoGridCellTemplate let-dataItem>
      <span style="overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;"
         >
        {{ dataItem.varianceTitle }}
      </span>
  </ng-template>  
  </kendo-grid-column>
    <kendo-grid-column field="expirationDate"  title="Expiration Date"
    format="MM/dd/yyyy"
    filter="date"
    >
      <ng-template kendoGridCellTemplate let-dataItem>
          {{dataItem.expirationDate | date: 'MM/dd/yyyy'}}
      </ng-template>
  </kendo-grid-column>
  <kendo-grid-column
  field="status"
  title="Status"      
></kendo-grid-column>
    <kendo-grid-excel fileName="VarianceAwaitingSupportList.xlsx"></kendo-grid-excel>
  </kendo-grid>

</div>

 

 

 

 

import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { filter, map, Observable } from 'rxjs';
import { GridDataResult, DataStateChangeEvent, GridComponent } from "@progress/kendo-angular-grid";
import { State, process, FilterDescriptor, FilterOperator, CompositeFilterDescriptor, DataSourceRequestState } from "@progress/kendo-data-query";
import { TooltipDirective } from '@progress/kendo-angular-tooltip';
import { AuthService } from 'src/app/services/general-app-services/auth/auth.service';
import { AwaitingSupportDashboardDataService } from 'src/app/admin/services/awaiting-support-dashboard-data.service';
@Component({
  selector: 'app-supportawaitingitems',
  templateUrl: './supportawaitingitems.component.html',
  styleUrls: ['./supportawaitingitems.component.css']
})
export class SupportawaitingitemsComponent implements OnInit {
  @ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;
  currentUserId: string;
  public viewMySupportData: Observable<GridDataResult> | any;
  public viewMySupport: Observable<GridDataResult> | any;
  public gridState: State = {
    sort: [],
    //  // Initial filter descriptor
     filter: {
      logic: 'and',
      filters: []
    }
  };
  public totalMySupportVarianceCount: number | undefined;
  public pendingByMeVarianceCount: number | undefined;
  public doneByMeVarianceCount: number | undefined;
  totalMySupportVarianceSelected: boolean | undefined = true;
  pendingByMeVarianceSelected: boolean | undefined = false;
  doneByMeVarianceSelected: boolean | undefined = false;
  private awaitingSupportService: AwaitingSupportDashboardDataService;
  pendingState: string = "ActionPending";
  doneState: string = "ActionDone";
  constructor(@Inject(AwaitingSupportDashboardDataService) AwaitingSupportDashboardDataServiceFactory: () => AwaitingSupportDashboardDataService,
    private authService: AuthService) {
    this.awaitingSupportService = AwaitingSupportDashboardDataServiceFactory();
    this.currentUserId = authService.getUserId();
  }
  public ngOnInit() {
    this.awaitingSupportService.fetchCountOfVarianceAwaitingSupport(this.currentUserId).subscribe((val: any) => {
      this.totalMySupportVarianceCount = val[0].totalVarianceCountForSupporter;
      this.pendingByMeVarianceCount = val[0].pendingSupporterAction;
      this.doneByMeVarianceCount = val[0].completedSupporterAction;
    });
    this.viewMySupportData = this.awaitingSupportService.pipe(
      map((data) => process(data, this.gridState))
    );
    this.viewMySupport = this.viewMySupportData.subscribe(val => {
      this.viewMySupport = val;
    });
    this.awaitingSupportService.read(this.currentUserId);
  }
  public onStateChange(state: DataSourceRequestState): void {
    this.gridState = state;
    this.awaitingSupportService.read(this.currentUserId);
  }
  public displayTotalVarianceMyAwaitingSupport() {
    this.totalMySupportVarianceSelected = true;
    this.pendingByMeVarianceSelected = false;
    this.doneByMeVarianceSelected = false;
    this.loadVariaceByStatus('All',true);
  }
  public filterChange(filter: CompositeFilterDescriptor): void
  {
      this.gridState.filter = filter;
      //this.logs = filterBy(sampleProducts, filter);
  }
  public displayPendingByMeVarianceMyAwaitingSupport() {
    this.totalMySupportVarianceSelected = false;
    this.pendingByMeVarianceSelected = true;
    this.doneByMeVarianceSelected = false;
    this.loadVariaceByStatus(this.pendingState,false);
  }
  public displayDoneByMeVarianceMyAwaitingSupport() {
    this.totalMySupportVarianceSelected = false;
    this.pendingByMeVarianceSelected = false;
    this.doneByMeVarianceSelected = true;
    this.loadVariaceByStatus(this.doneState,false);
  }
  loadVariaceByStatus(statusCall: string, isTotalCall: boolean) {
    if (isTotalCall) {
      this.viewMySupportData = this.awaitingSupportService.pipe(
        map((data) => process(data, this.gridState))
      );
      this.viewMySupport = this.viewMySupportData.subscribe(val => {
        this.viewMySupport = val;
      });
    } else {
      this.viewMySupportData = this.awaitingSupportService.pipe(
        map((data) => process(data.filter(x => x.state === statusCall), this.gridState))
      );
      this.viewMySupport = this.viewMySupportData.subscribe(val => {
        this.viewMySupport = val;
      });
    }
    this.awaitingSupportService.read(this.currentUserId);
  }
  public showTooltip(e: MouseEvent): void {
    const element = e.target as HTMLElement;
    if ((element.nodeName === 'TD' || element.nodeName === 'TH')
      && element.offsetWidth < element.scrollWidth) {
      this.tooltipDir.toggle(element);
    } else {
      this.tooltipDir.hide();
    }
  }
}
Jyoti
Top achievements
Rank 1
 asked on 21 Nov 2022
Top users last month
Paul
Top achievements
Rank 1
Patrick
Top achievements
Rank 1
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Sandro
Top achievements
Rank 1
Jure
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?