Telerik Forums
Kendo UI for Angular Forum
0 answers
14 views
hi, I have a column with multiple object values ​​and I need to bind each id to default filter menu but kendo only allows me to bind an unique id via input (fieldName).
Is there a way to send multiple ids? or i have to create a custom component and add my logic there
marc
Top achievements
Rank 1
 asked on 09 Jan 2024
2 answers
32 views

Hey everyone, 

Hope this message finds you well. 

I'm creating a grid table with Add/Edit/Delete features. Currently running into a blocker when clicking on a checkbox during an Add procedure. This action completely resets the values from the dropdown menus I've previously selected from. Any ideas as to why this behavior might be occurring? Thanks! 

TS: 

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';

@Component({
  selector: 'app-client',
  templateUrl: './client.component.html',
  styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
  clients: Item[] = [];
  anotherItems: string[] = [];
  differentItems: string[] = [];
  someItems: string[] = [];
  moreItems: string[] = [];
  parentItems: string[] = [];

  constructor(
    private errorHandlerService: ErrorHandlerService,
    private dataService: DataService,
    private anotherService: AnotherService,
    private differentService: DifferentService,
    private someService: SomeService,
    private formBuilder: FormBuilder,
  ) {
    this.createFormGroup = this.createFormGroup.bind(this);
  }

  public formGroup: FormGroup = this.formBuilder.group({
    Id: 0,
    ClientName: '',
    ClientKey: '',
    ParentClientName: '',
    IsParent: false,
    MarketVertical: '',
    Region: '',
    Inactive: false,
    Locale: ''
  });

  public createFormGroup = (args: any): FormGroup => {
    const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;

    return this.formBuilder.group({
      Id: item.Id,
      ClientName: item.ClientName,
      ClientKey: item.ClientKey,
      ParentClientName: item.ParentClientName,
      IsParent: item.IsParent || false,
      MarketVertical: item.MarketVertical,
      Region: item.Region,
      Inactive: item.Inactive || false,
      Locale: item.Locale
    });
  };

  public sort: SortDescriptor[] = [
    {
      field: "Name",
      dir: "asc",
    },
  ];

  public sortChange(sort: SortDescriptor[]): void {
    this.sort = sort;
    this.getAllClients();
    this.getAnotherItems();
    this.getDifferentItems();
    this.getSomeItems();
    this.getMoreItems();
    this.getParentItems();
  }

  ngOnInit(): void {
    this.getAllClients();
    this.getAnotherItems();
    this.getDifferentItems();
    this.getSomeItems();
    this.getMoreItems();
    this.getParentItems();
  };

  login() {
    //Implementation for login
  };

  showError() {
    this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
  }

  getClient(): void {
    this.dataService.get(1).subscribe();
  }

  getAllClients(): void {
    this.dataService.getAll().subscribe((data) => {
      this.clients = data;
    });
  }

  getAnotherItems(): void {
    this.anotherService.getAll().subscribe((data) => {
      this.anotherItems = data.map((anotherItem) => anotherItem.Name);
    });
  }

  getDifferentItems(): void {
    this.differentService.getAll().subscribe((data) => {
      this.differentItems = data.map((differentItem) => differentItem.Description);
    });
  }

  // Similar functions for other services

  saveHandler(args: SaveEvent): void {
    if (args.isNew) {
      this.dataService.create(args.dataItem).subscribe((createdData) => {
        const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
        updateItem.Id = createdData.Id;
      });
    }
    else {
      this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
        const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
        updateItem.ClientName = updatedData.ClientName;
        updateItem.ClientKey = updatedData.ClientKey;
        // Similar updates for other properties
      });
    }
    args.sender.closeRow(args.rowIndex);
  }

  removeHandler(args: RemoveEvent): void {
    this.dataService.delete(args.dataItem).subscribe();
  }
}


------------------------------

HTML:

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default/dist/all.css" />
<app-page-layout [workingArea]="body" [footer]="footer">
  <ng-template #body>
    <h1>Clients</h1>
    <kendo-grid [kendoGridReactiveEditing]="createFormGroup"
                [kendoGridBinding]="clients"
                [pageable]="true"
                [sortable]="true"
                [navigable]="true"
                [filterable]="true"
                [sort]="sort"
                (sortChange)="sortChange($event)"
                [pageSize]="10"
                (save)="saveHandler($event)"
                (remove)="removeHandler($event)">
      <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand themeColor="success">Add</button>
      </ng-template>
      <kendo-grid-column field="ClientName" title="Client Name"> </kendo-grid-column>


      <kendo-grid-column [filterable]="false" field="ClientKey" title="Client Key">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem">
          <kendo-dropdownlist [data]="clientKeys" [(ngModel)]="dataItem.ClientKey" name="ClientKey"></kendo-dropdownlist>
        </ng-template>
      </kendo-grid-column>

      <!-- Other columns-->

      <kendo-grid-column [filterable]="true" filter="boolean" field="IsParent" title="Is Parent" editor="boolean">
        <ng-template kendoGridCellTemplate let-dataItem="dataItem">
          <input kendoCheckBox id="isParentCheckbox" type="checkbox" [checked]="dataItem.IsParent" disabled />
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
        <ng-template kendoGridCellTemplate let-dataItem="dataItem">
          <input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-command-column title="Actions" [width]="220">
        <ng-template kendoGridCellTemplate let-isNew="isNew">
          <button kendoGridEditCommand themeColor="info">
            Edit
          </button>
          <button kendoGridRemoveCommand themeColor="error">Remove</button>
          <button kendoGridSaveCommand themeColor="success">
            {{ isNew ? "Add" : "Update" }}
          </button>
          <button kendoGridCancelCommand themeColor="warning">
            {{ isNew ? "Discard changes" : "Cancel" }}
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>
  </ng-template>

  <ng-template #footer>
    <app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
    <app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
  </ng-template>
</app-page-layout>
1 answer
111 views

Hello,

How can we use dropdown buttons to show export to excel and export to pdf options in grid's header? I'm not able to visualize how to use kendoGridExcelCommand and kendoGridPdfCommand in dropdown button.

 

Hetali
Telerik team
 updated answer on 17 Oct 2023
1 answer
45 views

i want to hide some of the filter operators can this be possible ?

i want to hide any one or two of these filters is it possible with Kendo UI Angular ?

 

 

Yanmario
Telerik team
 answered on 01 Dec 2021
2 answers
66 views

Hi,

 

Could you correct this

https://stackblitz.com/edit/angular-zmsedq?file=app/app.component.ts

Regards

Dimiter Topalov
Telerik team
 answered on 17 Sep 2021
3 answers
277 views

After updating to Angular 9, none of the dropdown buttons are working. 

I have the simple example:

<kendo-dropdownbutton [data]="data">
User Settings
</kendo-dropdownbutton>

 

And when the page renders the console shows:

core.js:6189 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at DropDownButtonComponent.get focused [as focused] (index.js:2688)
    at DropDownButtonComponent_HostBindings (index.js:2905)
    at setHostBindingsByExecutingExpandoInstructions (core.js:11535)
    at refreshView (core.js:11904)
    at refreshComponent (core.js:13295)
    at refreshChildComponents (core.js:11586)
    at refreshView (core.js:11909)
    at renderComponentOrTemplate (core.js:11983)
    at tickRootContext (core.js:13457)
    at detectChangesInRootView (core.js:13491)
    at RootViewRef.detectChanges (core.js:15182)
    at ApplicationRef.tick (core.js:42907)
    at ApplicationRef._loadComponent (core.js:42957)
    at ApplicationRef.bootstrap (core.js:42883)
    at core.js:42475

When I click the button, just a small empty popup shows.

I am using:

"@progress/kendo-angular-dropdowns": "^4.2.6",

"@progress/kendo-angular-buttons": "^5.4.0",

 

Does anyone know what might be the issue here? 
Thanks.

Martin
Telerik team
 answered on 14 Apr 2020
3 answers
376 views

Is there a way to have a selected state on a dropdown button? Bonus points if the dropdown button is inside a kendo-toolbar.

 

Like a dropdown with 5 options, and I set option 1 to selected or active, or add class.

Martin
Telerik team
 answered on 13 Feb 2020
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?