Questions on Kendo UI for Angular Forum

3 answers

3.3K+ views

How to add ComboBox in Grid for inline editing

Hi,

Generally add Dropdownlist in grid for inline editing.

Can I add ComboBox instead of Dropdownlist.

Actual reason of requirement of ComboBox in inline editing is as following:

1. I can filter the list as I type which is not possible with Dropdownlist

2. I can fetch the data and render the list items as user type.

Exmple:

HTML

<kendo-textbox-container style="text-align: left;">

<kendo-label text="Manufacturer">

<kendo-combobox formControlName="manufacturerId" [data]="ddlManufacturerId | async" [textField]="'name'"

[valueField]="'id'" [valuePrimitive]="true" [filterable]="true"

(filterChange)="onSearchManufacturerId($event)" required>

</kendo-combobox>

</kendo-label>

</kendo-textbox-container>

Typescript:

onSearchManufacturerId (value) {

const pSearch: ACSelectModel = {

SearchText: value,

SearchColumn: 'Manufacturer',

TableName: 'vwTXManufacturerList',

DisplayColumns: 'Manufacturer',

IndexColumn: 'MTXManufacturerId',

WhereClause: 'CompanyId=' + this.auth.getLoggedInCompanyId(),

OrderByClause: 'name',

IsNoneRecordRequired: true

};

this.ddlManufacturerId = this.mySelect.acSelect(pSearch).pipe(

map((results: SelectModel[]) => {

return results;

})

);

}

Definitely "kendo-textbox-container" and "kendo-label" I'm not going to use in grid but just running sample code I attached here for reference.

I hope my requirement is clear.

Grid

answered on 30 Mar 2021

7 answers

444 views

Same days are displaying in month view

We are integrating Kendo Scheduler month view but having issue.

Issue: Same week days are displaying line ['Thursday, Thursday, Thursday, Thursday, Thursday, Thursday, Thursday] instead of ['Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday'].

Need your response on urgent basis.

Scheduler

answered on 30 Mar 2021

1 answer

283 views

Kendo UI Grid Angular - scroll to random row

Hi,
I am having a large grid and I have a random row(changed based on my require data) of the grid which is not a selected row.
But if the row is out of the viewport of the current view I would like to have the grid scroll down/up to the row, so the user can see the selected row automatically.
How do I accomplish in the angular grid?
Thanks for your help in advance.
Best regards

Saswat

General Discussions

answered on 29 Mar 2021

1 answer

503 views

Treeview arrow style

Hello,

I'm trying to create an UI just like Kendo jQuery Filter based on the Angular TreeView.

And I'd like to have lines other than the default arrows that represent the hierarchy like the screenshot.

How can I do this?

I created a stackblitz, and it would be greatly appreciated if could give me the solution based on this.

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

TreeView

answered on 26 Mar 2021

3 answers

1.2K+ views

Dynamically adding a node

Hello,

I'm trying to dynamically add a child node to a treeview, but adding a child node to the selected dataitem does not refresh the treeview.

When I inspect the dataitem that I add a child node to, it has that child node.

Interestingly remove works fine.

I created a stackblitz, so that you can see the problem I'm having.

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

Click the buttons I highlighted in the screenshot, and this will call onAddGroupClick() or onAddClick() where I'm adding a child node.

How can I make it so that the treeview understands that a node is added?

Below is the code.

import { Component } from "@angular/core";

@Component({

selector: "my-app",

template: `

<kendo-treeview

[nodes]="instructionJson.items"

textField="text"

kendoTreeViewExpandable

kendoTreeViewHierarchyBinding

childrenField="items"

[isExpanded]="isExpanded"

>

<ng-template kendoTreeViewNodeTemplate let-dataItem>

<ng-container *ngIf="dataItem.isHeader">

<kendo-buttongroup selection="single">

<button

kendoButton

[toggleable]="true"

(selectedChange)="

onOperatorSelectionChange($event, 'And', dataItem)

"

[primary]="dataItem.operator == 'And'"

>

And

</button>

<button

kendoButton

[toggleable]="true"

(selectedChange)="

onOperatorSelectionChange($event, 'Or', dataItem)

"

[primary]="dataItem.operator == 'Or'"

>

Or

</button>

</kendo-buttongroup>

<kendo-buttongroup>

<button

kendoButton

icon="k-icon k-i-filter-add-expression"

(click)="onAddGroupClick(dataItem)"

></button>

<button

kendoButton

icon="k-icon k-i-filter-add-group"

(click)="onAddClick(dataItem)"

></button>

</kendo-buttongroup>

<kendo-buttongroup>

<button

kendoButton

icon="k-icon k-i-close"

(click)="onDeleteClick(dataItem)"

></button>

</kendo-buttongroup>

</ng-container>

<ng-container *ngIf="!dataItem.isHeader">

<div>

<button

kendoButton

icon="k-icon k-i-close"

(click)="onDeleteClick(dataItem)"

></button>

</div>

</ng-container>

</ng-template>

</kendo-treeview>

`

})

export class AppComponent {

public instructionJson: any = {

triggerType: null,

url: null,

items: [

{

isHeader: true,

operator: "And",

items: [

{

isHeader: true,

operator: "Or",

items: []

},

{

isHeader: false,

items: []

},

{

isHeader: false,

items: []

}

]

}

]

};

public isExpanded = (dataItem: any, index: string) => {

return true;

};

public onOperatorSelectionChange(event, operator: string, dataItem: any) {

dataItem.operator = operator;

}

public onDeleteClick(dataItem: any) {

let parentDataItem = this.getParentDataItem(this.instructionJson, dataItem);

if (parentDataItem) {

if (dataItem.isHeader == true) parentDataItem.items = [];

else this.remove(parentDataItem, dataItem);

}

private getParentDataItem(currentParentDataItem, dataItemToFind) {

if (

currentParentDataItem &&

currentParentDataItem.items &&

currentParentDataItem.items.length > 0

) {

for (let childItem of currentParentDataItem.items) {

if (childItem == dataItemToFind) {

return currentParentDataItem;

} else {

let parentDataItem = this.getParentDataItem(

childItem,

dataItemToFind

);

if (parentDataItem != null) return parentDataItem;

}

return null;

}

private remove(parentDataItem, dataItemToDelete) {

const index = parentDataItem.items.indexOf(dataItemToDelete);

if (index > -1) {

parentDataItem.items.splice(index, 1);

}

public onAddGroupClick(dataItem: any) {

dataItem.items.push({

isHeader: true,

operator: "And",

items: []

});

}

public onAddClick(dataItem: any) {

dataItem.items.push({

isHeader: false,

items: []

});

}

TreeView

answered on 26 Mar 2021

1 answer

4.7K+ views

Is there a way for percentage column widths?

I would like to distribute the columns on a percentage basis on the grid. Is there any way to do that?

I managed to do that using CSS. However, this no longer works as soon as "grouping" is used. A "colgroup" element is inserted, whose "col" elements also need a width. Is it possible to give these "col" elements a style somehow?

I have created a small example of this. It looks good at first sight. As soon as I arrange the columns differently or use a second grouping level, the distribution is no longer correct.

https://stackblitz.com/edit/angular-y8y55s

Grid

answered on 25 Mar 2021

3 answers

620 views

Retain previous value on error check

Hello,

I'm trying to retain the value of the combobox on action error. After the user selects an option from the combobox, I run a database query to check if the option selected is valid, if not, I want the previous option to stay selected. Example: Combobox value = "N/A", user selects "COMPLETED", db check fails, combobox value should be 'N/A". I add the code below, hope to get some help with this.

Thanks,

Carla

<kendo-combobox id="complete-button"

(click)="$event.stopImmediatePropagation()"

[data]="stateListDictionary[task.id]"

[value]="stateListComboDefaultDict[task.id]"

[placeholder]="'Change State...'"

(valueChange)="updateTaskStatePerExperiment($event, task, experiment)"

[disabled]="stateListComboDisabledDict[task.id]">

</kendo-combobox>

if (taskId === 17) { // Pre Review task needs an extra check

this.checklistApiService.getPreReviewTrackValue(this.expId).subscribe(data => {

let dataLength = data.length;

if (dataLength != 0) { //there is a track value set, so it's ok to change

this.updateTaskHelper(taskId, status, taskItem, experimentItem);

} else { //there is no track value

if (status != 'COMPLETED') { //setting status other than Completed is ok

this.updateTaskHelper(taskId, status, taskItem, experimentItem);

} else { //status is 'Completed' so throw error

this.stateListComboDefaultDict[taskItem.id] = "TEST";

// this.populateCategoryChildren(this.gateId); // @TODO find a better way to clear 'COMPLETED' and keep the previous value that should not change

let toast:Toast = {

type: 'error',

title: 'Task status could not be updated',

body: 'The task could not be updated. Please select a Review Track in the Pre Review tab',

showCloseButton: true

};

this.toasterService.pop(toast);

}

}, err =>{

console.log("Request Service Error => [getPreReviewTrackValue in gate-checklist page] generated while getting review track  " + err);

return false;

});

} else {

this.updateTaskHelper(taskId, status, taskItem, experimentItem);

}

ComboBox

answered on 24 Mar 2021

1 answer

232 views

Grid with virtual columns and reorderable

Hi,

I have problem with grids and treelists where is virtualColumns set to true and with enabled column reordering. After reorder data in rows stays in old columns, only headers are in new places. Is there any workaround for this issue? Reloading data does not fix this problem.

General Discussions

answered on 22 Mar 2021

3 answers

191 views

Editor deleting spaces.

Greetings,

we are having a problem with the Angular Editor. While typing text, the editor is deleting spaces. You can see the space disappear. Typing the phrase "This is a Test" results in "Thisis a test".

I built a stackblitz that contains a simple of our editor page and most of our package.json.

https://stackblitz.com/edit/angular-z3v6s8

Please help.

Brad

Editor

answered on 19 Mar 2021

1 answer

179 views

radialgauge custom labels

this is my custom implementation of the labels:

<kendo-radialgauge-scale-labels

//what is the syntax to call my function ???
content="getGaugeLabels(val)"

position="outside">
</kendo-radialgauge-scale-labels>

how can I set custom labels ??

in the api documentation =>

content?
(e: any) => string
The function which returns the label content.
The available fields in the function argument are:
value—The value of the label.

how can I use that in angular 9 ????

Gauges

answered on 19 Mar 2021