Telerik Forums
Kendo UI for Angular Forum
9 answers
6.2K+ views

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

Martin Bechev
Telerik team
 answered on 12 Apr 2021
2 answers
559 views
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= [];
    }
Martin Bechev
Telerik team
 answered on 09 Apr 2021
2 answers
337 views

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 

Felix
Top achievements
Rank 1
 answered on 09 Apr 2021
3 answers
328 views
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!
Jordan
Top achievements
Rank 1
 answered on 06 Apr 2021
2 answers
188 views
I want the text in the editor to be initially of a specified font size and bold. How can I achieve that?
Ewgenij
Top achievements
Rank 1
Veteran
 answered on 06 Apr 2021
0 answers
385 views

Hi, 
I have implemented kendo grid using angular. In the same I have virtual scrolling implemented. I want auto fix columns width as per row data. i.e. if any column have data like "testing data for width- should be in one row." it should place in one row. right now it is showing the data into the two lines. for auto fix width - I have added following code
on html page

<kendo-grid #dataTable [data]="query | async" (dataStateChange)="dataStateChange($event)" [resizable]="true" [autoSize]="true">
  </kendo-grid>

on component.ts 

 

export class ListComponent extends AppComponentBase implements OnInit, AfterViewInit {

@ViewChild(GridComponent) public grid: GridComponent | undefined;

 

 public constructor( private ngZone: NgZone ) {
        super(injector);
    }

 

    public ngAfterViewInit(): void {
        this.fitColumns();
    }

public dataStateChange(state: State): void {
        this.fitColumns();
    }

   private fitColumns(): void {
        this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
            this.grid.autoFitColumns();
        });
    }

}

above code set width as per column's name. I required autofix column width on both column name as well as on row data. 

Thanks.

archana
Top achievements
Rank 1
 asked on 06 Apr 2021
4 answers
1.1K+ views

The Tree View component is incredibly frustrating to work with.

How do I establish an indeterminate check box?

Here is my TreeView and below is my isChecked method.

I have attached a snagit capture of the problem I'm having.

<kendo-treeview #actionPermissions
    [nodes]="treeNodes"
    kendoTreeViewCheckable
    [hasChildren]="hasChildren"
    textField="displayName"
    childrenField="children"
    [(checkedKeys)]="checkedKeys"
    [isChecked]="isChecked"
    kendoTreeViewHierarchyBinding
    kendoTreeViewExpandable
    [(expandedKeys)]="expandedKeys"
    (checkedChange)="handleChecking($event)">
public isChecked = (dataItem: NcActionDto): CheckedState => {
 
  let checkedNode = _.find(this.checkedKeys, m => m === dataItem.id);
  if (checkedNode) {
    if (dataItem.children.length > 0) {
      dataItem.children.forEach((item) => {
        if (!_.find(this.checkedKeys, m => m === item.id)) {
          return 'indeterminate';
        }
      });
    } else {
      return 'checked';
    }
  } else {
    return 'none';
  }
}

 

I have to say I am a member of many forums and this is without doubt the worst of all for posting information.  It's ancient and every difficult to work with.

 

Dimitar
Telerik team
 answered on 05 Apr 2021
8 answers
3.1K+ views

I used the dropdownlist component outside of <kendo-grid> and by adding the [popupSettings]="{appendTo: 'component'}", I got the selection list displayed right under the dropdown control.

I tried to do the same thing for a dropdownlist of a column inside <kendo-grid>, and the popup did not display right under the dropdown, but over it (see attached image, I selected the dropdown for the 'Hospital C' row).

The HTML for that column is:

<kendo-grid-column field="FileId" title="File Lists" [width]="140">
                                    <ng-template kendoGridCellTemplate
                                                 let-dataItem="dataItem"                                                 
                                                 let-formGroup="formGroup">
                                        <kendo-dropdownlist [data]="fileLists"
                                                            #ddl_filelists
                                                            [textField]="'description'"
                                                            [valueField]="'key'"
                                                            [valuePrimitive]="true"
                                                            [popupSettings]="{appendTo: 'root'}"
                                                            [(ngModel)]="dataItem.FileId">
                                        </kendo-dropdownlist>                                       
                                    </ng-template>
                                </kendo-grid-column>

Thanks for any suggestion.

 

Dimiter Topalov
Telerik team
 answered on 05 Apr 2021
4 answers
1.3K+ views
Hello,
We are integrating kendo scheduler angular which is having issue for data rendering.
We are calling an api and pushing the data to array for first time when page load it is not showing any data. I debug the code data is going into binded events just need to render when it loads for first time.
When we are clicking to week or month at that time it shows data. (anything for refreshing the scheduler).
We are using kendo scheduler, Facing an issue that data items (events) are being binded in the kendoSchedulerBinding. But its not rendering in UI, when we swap between MonthView or Week View or Day View it's automatically rendering in UI.
Providing image after click on week view.

<kendo-scheduler [kendoSchedulerBinding]="schedulerEvent"
                                         [modelFields]="editService.fields"
                                         [slotDuration]="60"
                                         [editable]="true"
                                         [selectedDate]="selectedDate"
                                         (slotDblClick)="slotDblClickHandler($event)"
                                         (eventDblClick)="eventDblClickHandler($event)"
                                         (remove)="removeHandler($event)"
                                         (drop)="onDrop($event)"
                                         style="height: 800px;">
                            <kendo-scheduler-day-view>
                            </kendo-scheduler-day-view>
                            <kendo-scheduler-week-view>
                            </kendo-scheduler-week-view>
                            <kendo-scheduler-month-view>
                            </kendo-scheduler-month-view>
                        </kendo-scheduler>
                        <scheduler-edit-form [event]="editedEvent" #remindermodal
                                             [editMode]="editMode"
                                             [isNew]="isNew"
                                             (save)="saveHandler($event)"
                                             (cancel)="cancelHandler()"
                                             style="display: block; margin-top: 20px;">
                        </scheduler-edit-form>
Martin Bechev
Telerik team
 answered on 01 Apr 2021
1 answer
907 views

Hey,

I have implemented datetimepicker in my project. So I want to disable past times in datetimepicker and I have tried [min] but I dont want that way.

I want a way where previous time shoudl be disabled but should not be disappered.

So please guide if any other way possible.

Yanmario
Telerik team
 answered on 31 Mar 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?