or
1 answer
39 views
Hello!
I'm working with a grid that contains several Kendo dropdown lists. The data for these dropdowns relies on certain values within the grid, which can vary for each row. Currently, the dataset from the last row is being applied to all dropdowns in previous rows. How can I ensure that each dropdown in a row uses its own unique dataset based on the values specific to that row?
Thanks,
Balazs
UPDATE:
The functionality is operating correctly as intended. The issue only occurred on my end.
Martin Bechev
Telerik team
answered
on
23 Feb 2024
1 answer
24 views
I have been trying to use kendo-dropdown-list and kendo-grid in the same page. If I change the styles of k-picker-solid along with dropdown list, filter icon template is also getting affected.
Zornitsa
Telerik team
answered
on
20 Feb 2024
2 answers
48 views
Hi!
i want replace a input text with a dropdownlist-filter inside this default filter, i need to keep this filter: CONTAINS ... - AND / OR - CONTAINS ...
Can someone help me?
Thanks!!
Andrea
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
10 Jan 2024
2 answers
43 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();
}
}
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 /><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">
</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>
</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>
Slavena
Telerik team
answered
on
30 Nov 2023
1 answer
70 views
Hi
I have a dashboard with a grid and space is rather tight, and the user wants to see a long list of items, without covering up other parts of the grid.
Is It possible from my sample below
https://stackblitz.com/edit/angular-kggzs9?file=src%2Fapp%2Fapp.component.ts
To always have the kendo-dropdownlist popup always open just below the column header, no matter which row is being edited ?
Here's a sketch of what I'm looking for .. I want the popup to always open right below Product Name. For PopupSettings there appears to be no "Top" attribute to accomplish this position change.
Using chrome dev tools, I can modify the Top attribute to 0 to achieve the desired result.
Thanks
I have a dashboard with a grid and space is rather tight, and the user wants to see a long list of items, without covering up other parts of the grid.
Is It possible from my sample below
https://stackblitz.com/edit/angular-kggzs9?file=src%2Fapp%2Fapp.component.ts
To always have the kendo-dropdownlist popup always open just below the column header, no matter which row is being edited ?
Here's a sketch of what I'm looking for .. I want the popup to always open right below Product Name. For PopupSettings there appears to be no "Top" attribute to accomplish this position change.
Using chrome dev tools, I can modify the Top attribute to 0 to achieve the desired result.
Thanks
Yanmario
Telerik team
answered
on
20 Jun 2023
1 answer
40 views
I currently have a grid with an in-cell drop down for a customer. I saw that there is set navigation control, but can you customized it.
What I was looking for is when a user goes to edit a customer, then click the down arrow, which will commit the current customer --> go to the next record --> open up the drop down for the customer
thanks in advance
Martin Bechev
Telerik team
answered
on
24 Mar 2023
1 answer
64 views
Hello, I'm having trouble managing to create a custom component for a filter inside a grid. I've started based on the documentation with the DropdownList custom component (here) and I provided the correct data to it (filters and options) and every time I select an option it throws me an error (attached image). I replicated the exact example from the documentation and I'm encountering the same issue. Can anyone tell me what I'm doing wrong? I also provided the data I'm passing from the parent component (the first is the filter object, the second is data with the available options). Thanks in advance.
Martin Bechev
Telerik team
answered
on
30 Jun 2022
1 answer
1.2K+ views
Given this HTML, how are grid components (e.g. kendo-dropdownlist) accessed and tested?
<form [formGroup]="computedFormGroup" style="box-sizing:border-box;padding:40px;">
<div style="width:100%">
<h1>Policy</h1>
<kendo-tabstrip ...>
<kendo-tabstrip-tab ...>
<ng-template kendoTabContent>
<kendo-grid ...>
<ng-template kendoGridToolbarTemplate>
<button mat-raised-button color="primary" kendoGridAddCommand>Add new</button>
</ng-template>
<kendo-grid-command-column title="Action" [sticky]="true" [width]="290">
<ng-template kendoGridCellTemplate let-isNew="isNew">
...
</ng-template>
</kendo-grid-command-column>
<kendo-grid-column field="aip" title="AIP" width="200" class="aip_ddl">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.aip }}
</ng-template>
<ng-template kendoGridEditTemplate
let-dataItem="dataItem"
let-column="column"
let-formGroup="policyFormGroup">
<div class="aip_ddl">
<kendo-dropdownlist [defaultItem]="{ aipCode: null, aipCodeAndName: '' }"
[data]="aipModel"
[popupSettings]="{width:400}"
textField="aipCodeAndName"
valueField="aipCode"
class="aip_ddl"
[valuePrimitive]="true"
[formControl]="policyFormGroup.get('aip')">
</kendo-dropdownlist>
</div>
</ng-template>
</kendo-grid-column>
Unit test code:
it('should bind the configured value to the AIP dropdown list.', async(() =>
{
// Arrange
// Set the form group.
component.policyFormGroup = constPolicyFormGroup(data);
// Set the specific data to test.
component.policyFormGroup.controls.aip.setValue('FH');
I want to access and test the dropdownlist here:
console.log(fixture.debugElement);
const element = fixture.debugElement.query(By.css('form'));
const attr = element.nativeElement.getAttribute('aip-ddl');
//expect(element.nativeElement.getAttribute('ng-reflect-resizable')).toBe('true');
//let select: HTMLSelectElement = fixture.debugElement.query(By.css('.aip_dll')).nativeElement;
//const myComponent = fixture.debugElement.query(By.directive(DashboardComponent));
//let select: HTMLSelectElement = fixture.debugElement.nativeElement.querySelectore('aip_dll');
let p = fixture.debugElement.nativeElement.querySelector('p');
fixture.detectChanges();
//component.aipModel..aip = new FormControl(component.policyFormGroup.controls.aip);
//fixture.detectChanges();
//fixture.whenStable().then(() =>
//{
// let text = select.options[select.selectedIndex].label;
// expect(text).toBe('Manager');
// expect(p.textContent).toBe('Manager');
//});
}));
Yanmario
Telerik team
answered
on
03 Dec 2021
1 answer
50 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
196 views
My current angular project uses latest angular version with some kendo grids. We have a requirement where I need to have a kendo grid and use kendo multiselects for two of the columns -State, County. So while adding/editing data in the grid, user should be able to select multiple states and the county column should filter the data based on the selected states. I'm not sure how to achieve this.
I've added some basic code as below. State column works fine and lets me pick multiple states. I'm unable to properly filter the County column data based on selected states and bind the data.
My html code:
<kendo-grid style="height:600px" [kendoGridBinding]="statesData">
<kendo-grid-column field="capital" title="Capital City" width="140"></kendo-grid-column>
<kendo-grid-column field="stateName" title="State" width="140" id="stateColumn">
<ng-template kendoGridCellTemplate >
<kendo-multiselect [data]="statesData" textField="stateName" valueField="stateId" (valueChange)="onStateChange($event)">
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="countyName" title="County" width="140" id="countyColumn">
<ng-template kendoGridCellTemplate >
<kendo-multiselect [data]="countiesData" textField="countyName" valueField="countyId">
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
</kendo-grid>
TS code:
public statesData: IState[] = states;
public countiesData: ICounty[] = counties;
public onStateChange(values) {
const selStateIds = values.map(s => s.stateId);
const selectedCounties = this.countiesData.filter( c => selStateIds.includes( c.stateId ) );
this.countiesData = selectedCounties;
}
My states data:
export const states: IState[] =
[
{
stateId: 1,
stateName: "Delaware",
capital: "DelCaptital"
},
{
stateId: 2,
stateName: "New York",
capital: "NY Captital"
},
{
stateId: 3,
stateName: "New Jersey",
capital: "NJ Captital"
},
{
stateId: 4,
stateName: "Virginia",
capital: "VA Captital"
},
];
County Data:
export const counties: ICounty[] = [
{
countyId: 1,
stateId: 1,
countyName: "Delaware County 1"
},
{
countyId: 2,
stateId: 1,
countyName: "Delaware County 2"
},
{
countyId: 3,
stateId: 1,
countyName: "Delaware County 3"
},
{
countyId: 4,
stateId: 4,
countyName: "VA County 1"
},
{
countyId: 5,
stateId: 4,
countyName: "VA County 2"
},
{
countyId: 6,
stateId: 4,
countyName: "VA County 3"
},
];
Thank you.
Neelima
Yanmario
Telerik team
answered
on
27 Sep 2021
