Questions on Kendo UI for Angular Forum

3 answers

849 views

Kendo Angular Dropdown Server Side Filter, Loading on click the result

Hello

I'm trying kendo anguar dropdown list with server side data filtering according to below url to show loading animation.
https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/filtering/

I enter filter text, it show the result then I choose one item in list.
I note that the loading animation also appear again once I click one item in result list.
It seems calling the server side again with blank filter text on click the item.
This issue can reproduce in above URL's Example of loading property.

Is it intentionally trigger the filter process again on click the item ?

Grid

answered on 15 Apr 2021

4 answers

487 views

Roadmap - Gantt chart

Hi,

I apologize if I missed answer to this somewhere, but I have to provide quick answer to my superiors.

We plan to start migrating from Kendo UI for JQuery to Angular, and one of key widgets is Gantt chart.

Is there plan to implement gantt chart to Angular at all, and if yes, what could be provisional time for this.

Thank you very much

Best regards,

Vedad

General Discussions

answered on 15 Apr 2021

3 answers

4.2K+ views

Kendo UI Angular Grid, to show Total of amount in Grid Footer

Hello,

I have the Amount column in my grid which is multiply price and quantity fields from data source.

<kendo-grid-column title="Amount" editable="false" width="120">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.Price * dataItem.Quantity}}
</ng-template>
</kendo-grid-column>

How can I add Total of this amount column to show in kendoGridFooterTemplate?
I don't have any group in my group, just want to show total Amount of the whole grid.

Grid

answered on 13 Apr 2021

3 answers

1.0K+ views

Open/Expand DropDownList on cell edit

I've implemented in-cell editing with a dropdownlist using reactive forms and a cellclick event handler. How can I also automatically open/expand the dropdownlist on cell edit? The dropdownlist has a Toggle method that will open it but I can't reference the dropdownlist to invoke it. The sender of the cellclick event only includes the grid component.

Markup:

<kendo-grid-column field="manufacturer" title="Manufacturer" width="130" [locked]="true">

<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">

<kendo-dropdownlist [data]="manufacturers" textField="text" valueField="value" [valuePrimitive]="true" [formControl]="formGroup.get('manufacturer')">

</kendo-dropdownlist>

</ng-template>

</kendo-grid-column>

Script:

public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {

if (!isEdited) {

sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));

}

Dropdownlist method I'd like to invoke on cell edit:

this.dropdownlist.toggle(true);

Grid

answered on 12 Apr 2021

1 answer

88 views

FireFox : Input inside kendo stepper

Hello,

i add an input inside kendo stepper using the 'kendoStepperStepTemplate' option, it works fine but in FireFox , you cannot select the input
exemple :

   <kendo-stepper
            [steps]="steps"
            [stepType]="'label'"
            [currentStep]="2"
            [linear]="false"
            [style.width.px]="750"
        >
            <ng-template kendoStepperStepTemplate let-step let-index="index">
                <div class='oval-step'>
                    <span class="{{step.icon}}"></span>
                </div>
                <div class='step-label'>{{step.label}}
                 <ng-container *ngIf="index === 1">
                  <input type=text value='testtt' >
                </ng-container>
                </div>
            </ng-template>
        </kendo-stepper>

Stepper

answered on 12 Apr 2021

9 answers

5.7K+ views

Grid Row Height Issue

Hi Team,

I am using the kendo grid in angular. I am facing one issue, whenever I change the row height ,the height of "k-height-container" doesn't change.
It only changes when the total rows is changed in grid. Is there a way to update the k-height-container height when the row height changes.

We are using min-height to set the row height and change the same whenever required.
Let say if the grid is initialized with 32px row height and we have 500 rows, so the container height is 16000px, now if change the row height to 28px, due to which ng-reflect-detail-row-height and ng-reflect-row-height both are set to 28px, but the container height is not reset to 12000px, instead it is still showing at 16000px.

Thanks,
Shivam

Grid

answered on 12 Apr 2021

2 answers

484 views

Kendo UI Angular Grid selection all indicator in onSelectionChange event

My setting is that i use virtual scrolling in grid with selection. My problem is I will select all entries not only the first page of virtual scrolling. But the event parameter of onSelectionChange had no indicator for selection all click. When noting is selection this example works:

public onSelectionChange(event: SelectionEvent) {

if (event.selectedCells.length === this.pageSize) {

// selected all click?

        this.selectedKeys= this.data.map(data => data.id);

}

if (event.deselectedCells.length === this.variableDataService.pageSize) {

// selected nothing click?

        this.selectedKeys= [];

}

Grid

answered on 09 Apr 2021

2 answers

239 views

Dialog with CanDeactive Guard

Hello!
I want to implement your dialog with a the CanDeactive Guard. In order to so I have implemented the CanDeactive Guard

import { CanDeactivate } from '@angular/router';

import { Observable } from 'rxjs';

import { Injectable } from '@angular/core';

export interface CanComponentDeactivate {

canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;

}

@Injectable({

providedIn: 'root',

})

export class CanDeactivateGuard

implements CanDeactivate<CanComponentDeactivate> {

canDeactivate(component: CanComponentDeactivate) {

return component.canDeactivate && component.canDeactivate();

}

and extended my component and created the following function

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {

const dialog: DialogRef = this.dialogService.open({

title: 'Please confirm',

content: 'Are you sure?',

actions: [{ text: 'No' }, { text: 'Yes', primary: true }],

width: 450,

height: 200,

minWidth: 250,

});

if (this.isInEditState) {

dialog.result.subscribe((result: any) => {

if (result.text === 'No') {

return false;

} else {

return true;

}

});

} else {

return true;

}

I get a dialog, but the result will not trigger the CanDeactive Guard (I think it is undefinied). I think he looses the scope because of the subscribe. Could you guys help me?

Best regards

Felix

Dialog

answered on 09 Apr 2021

3 answers

269 views

Possible bug using kendo-textbox with formly

I tried using kendo-textbox with formly and it returns "this.subscriptions is undefined" , i tried again using stackblitz with this result https://stackblitz.com/edit/angular-zijgem?file=app/app.module.ts

am i doing something wrong? is the error comes from kendo-textbox or formly? thx!

TextBox