
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

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
<kendo-textbox-container floatingLabel="Warehouse"> <kendo-textbox type="text" formControlName="warehouse" placeholder="Enter Warehouse" name="warehouse" [showSuccessIcon]="'initial'" [showErrorIcon]="'initial'" required maxlength="100"></kendo-textbox></kendo-textbox-container>
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.

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
<!-- Select Drop Down List - Manufacturer --><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><!-- Select Drop Down List - Manufacturer -->
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.
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.

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

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

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: [] }); }}