i want to customize kendo-grid by own component .
i think its only taking columns and i need help to get other things except columns like kendo-grid-checkbox-column, kendo-grid-command-column
https://www.telerik.com/forums/kendo-angular-editor-content-projection-for-custom-toolbar
this comment saying "Content projection is not typically supported in the Grid" so i have problem with it.
i'm using like https://stackblitz.com/edit/angular-7qonm9-7qusje this example.
and using like this other components
>
but first thing is other than kendo-grid-column are not working.
so getting columns like this
I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/ However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.
Below my editor implementation in an own component "my-editor".
<kendo-editor #editor
[placeholder]="placeholder"
[(ngModel)]="content"
[iframe]="false"
>
<kendo-toolbar>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<ng-content></ng-content> <!-- The place where the custom buttons should be inserted -->
</kendo-toolbar>
</kendo-editor>
I inject the custom button like that
<my-editor>
<custom-button></custom-button>
</my-editor>
<kendo-multicolumncombobox [fillMode]="'flat'" [readonly]="!canEdit() || invoice().isPosted" #vendorList [data]="vendors()"
[filterable]="true" (filterChange)="handleFilter($event)" textField="display" valueField="id"
formControlName="vendor" [valuePrimitive]="true" (valueChange)="onVendorChange($event)" [popupSettings]="{width: '75em'}">
that is how it is being used. all the values being accessed with () are signals and not methods that should get endlessly called (except for the filter and value change handlers) But in 17.1.1 if you try to expand the dropdown or change the filter it grinds the whole page to a halt and the entire browser page becomes unresponsive.
Reverting to 17.1.0 fixes the issue.
After update I've arrors in console:
./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "444501037893190567" ("clear" - "kendo.timepicker.clearTitle").
./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "5837182130353517790" ("clear" - "kendo.datetimepicker.clearTitle").
./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "6401309146619618412" ("clear" - "kendo.datepicker.clearTitle").
./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "6947941843239609210" ("clear" - "kendo.dateinput.clearTitle").
./node_modules/@progress/kendo-angular-layout/fesm2020/progress-kendo-angular-layout.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "3414996632637231223" ("next" - "kendo.timeline.next").
./node_modules/@progress/kendo-angular-layout/fesm2020/progress-kendo-angular-layout.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "5733397898153231659" ("previous" - "kendo.timeline.previous").
I use an in-line editing Grid. On one column I have defined a tooltip like so:
*Template to define the tooltip and it's anchor, the reference to the directive in the grid and the template associated to it as well as the mouseover event that calls the tooltip.
*This ios the column where the tooltip needs to be displayed
*This is the showTooltip method that allows the correct cells to trigger the display of the tooltip template on its anchor.
This works when the cell contains a value, however the cell is empty by default and since it's empty there is no style attribute to the cell until it contains a value so the tooltip is never displayed when the cell is empty.
I've tried applying an id to the column, to wrap it in a div with an id but they are always empty. I cannot target the cell using something other than the classList which is null when the cell is empty.
How can I identify the correct cell despite being empty to show the tooltip?
How can I have custom text for different cells?
Why is it so complicated to just implement a simple tooltip? Wouldn't be easy if there were a tooltip directive built-in to the grid i.e. [tooltiptext]="''Simple Tooltip"
Please refrain from using jQuery I am unfamiliar with its syntax and am using the Angular version of Kendo.
**This project is on Angular 17.2 and uses the Kendo 15.1 Libraries. I am aware there is a new version but it breaks all our theme variables.
Hello,
I am trying to use virtual scroll in a drag and drop UX flow where a user drags a label element from one grid over to another grid. However, we recently ran into performance issues on the grid that holds all the drag target labels due to a large number of records in the data bound to that grid. We want to use virtual scroll to solve the performance issue on the grid because pagination does not work as well for our use-case.
Unfortunately, adding scrollable='virtual' to the grid appears to add some position attribute to the grid that breaks the drag and drop functionality. The x and y coordinates passed in the DragTargetDragStartEvent do not match the coordinates of the cursor in the window and the drag target is now bound by its container. I haven't been able to determine a workaround that doesn't include manual DOM manipulation, which I'd like to avoid.
I also noticed that this issue is a known limitation in the jquery documentation: https://docs.telerik.com/kendo-ui/controls/grid/scrolling/virtual-scrolling#known-limitations
Are there any templates available for this use-case of virtual scroll and drag and drop utility on a kendo grid, or is this combination not supported?
Thank you in advance for any assistance
On mobile resolutions, on small screen, the numbers indicating the total available pages and current selected page on the grid disappear. Is there a way to have the appear at all times ?
Hello,
Is batch editing available in Kendo UI for Angular? If so, could you provide guidance or resources on how to implement it?