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.

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.

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.

 

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>

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.

I want the ability to be able to select multiple items and drag them in to another sortable component. Is this possible? I am using [kendoSortableBinding] to bind my data.

hi,

 

We have downloaded a basic virtual scroll grid from kendo’s official website (https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/) to make sure custom code is not causing it. Additional columns (25+) +) were added to it and applied coloring to alternate rows with different colors using the rowClass method that is mentioned in the documentation.

Issue was present in the kendo grid for this scenario.

Please suggest if this is expected behavior or we are missing some configuration here.

PFA the code used for this.

Regards,

Jaspreet

 

 

I want to prevent the uploading of an existing file name with kendo-upload, **so when the user uploads a document with a name which already exists, a message is shown "Try again".**

This is the component.ts :

    addedfiles : Array<any> = [];
    fileRestrictions: FileRestrictions = {
    allowedExtensions: ['.jpg', '.png', '.jpeg', '.doc', '.docx','.pdf'],
    maxFileSize: 5000000
    };
    filesNames : Array<String> = [];
    isValidFile : boolean = false;

    public onSelect(ev: any): void {
     ev.files.forEach((file: FileInfo) => {
      let existFileName = this.filesNames.find(f => f == file.name)
      if (!existFileName) // if a file with the same name doesn't exist{
        if (file.rawFile) {
          const reader = new FileReader();
          if (this.fileRestrictions.allowedExtensions.includes(file.extension.toLowerCase())) {
            reader.addEventListener('loadend', () => {
              this.addedfiles.push({ ...file, src: reader.result as string });
              this.filesNames.push(file.name);
              this.isValidFile = false;
            }
            );
            reader.readAsDataURL(file.rawFile);
          }
        }
      }
      else // if a file with the same name exist 
       {
        console.log("added files", this.addedfiles)
        this.isValidFile = true;
      }
    });
    }

      public onRemove(ev: RemoveEvent): void {
       ev.files.forEach((file: FileInfo) => {
        this.addedfiles = this.addedfiles.filter(f => f.uid !== file.uid);
       });
      }
The component.html : 

      <kendo-upload class="mobile-max-height-240" style="margin-top:2%;" 
              (select)="onSelect($event)"
              (remove)="onRemove($event)" [restrictions]="fileRestrictions"
              [(ngModel)]="addedfiles"> 
      </kendo-upload>
      <p *ngIf="isValidFile">try again</p>
The list of addedFiles contain only files with different names. But a file with same name is showen in the kendo-upload zone like that :

Hi,

I saw number of working examples where floatingLabel is working well. In my case also it is working very well.

If my textbox is empty and I'm trying to enter any data it is working fine without any issue. Following is my code

 

 

 

 

 

Same is not working when I use the same code for edit mode means I fetched the data from API and tries to edit the record at that time my data is present is the form but in that case my textbox value overlapping with floatingLabel.

I attached the screenshot of it for the reference.

Once again I want to say, I tried all the available and suggested option like placehoder="''", binding with kendo-lable, binding with [for] and so many others.

 

 

 

 

Hi Team,
We have a requirement to develop a kendo-grid in which few columns will be fix (static) and the rest of the columns will be rendered based on the response of an API call.

It  would be great if you could provide me any suggestion/hints to proceed.

We have implemented a complete dynamic editable kendo grid.

 

Thanks.