Telerik Forums
Kendo UI for Angular Forum
2 answers
55 views

                  <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.

Zornitsa
Telerik team
 answered on 20 Dec 2024
0 answers
59 views

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").
How to fix this issue?
Robert
Top achievements
Rank 2
 asked on 20 Dec 2024
1 answer
92 views

I use an in-line editing Grid. On one column I have defined a tooltip like so:

<ng-template #templateVMReq let-anchor>
  <span>PAY = négatif, COL=Positif</span>
</ng-template>
<div class="grid" id="repoCompenseGrid"
      kendoTooltip
      showOn="none"
      [tooltipTemplate]="templateVMReq"
      filter=".k-grid td"
      (mouseover)="showTooltip($event)">

*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. 

 <kendo-grid-column
        title="VM Requirement"
        field="miVmRequirement"
        [width]="75"
        [headerClass]="'customHeader gridHeaderDefault'"
        [headerStyle]="{ 'white-space': 'pre-wrap' }"
        [editable]="false"
        [filter]="'numeric'"
        [editable]="editable"
        [class]="{ vmReqColumn: true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <app-format-number-red [value]="dataItem.miVmRequirement" />
        </ng-template>
       
      </kendo-grid-column>

*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.

 

 

Zornitsa
Telerik team
 answered on 20 Dec 2024
1 answer
88 views

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

Martin Bechev
Telerik team
 answered on 19 Dec 2024
1 answer
43 views

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 ? 


Zornitsa
Telerik team
 answered on 19 Dec 2024
1 answer
39 views

Hello,

Is batch editing available in Kendo UI for Angular? If so, could you provide guidance or resources on how to implement it?

Martin Bechev
Telerik team
 answered on 19 Dec 2024
1 answer
64 views

I am attempting to implement a custom filter for the Grid using the example found here: 

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu#multi-checkbox-menu-filtering

I have taken this example and removed some of the unnecessary items. Here's a link to the example which works:

WORKING: https://stackblitz.com/edit/angular-xldwansq?file=src%2Fapp%2Fapp.component.ts

This creates a custom filter component that is a multi-checkbox filter. It correctly filters the products. I can see when selecting that the local `filter` variable is updates as I select options, and when I click "Filter" it's applied to the grid and I can see the grid's filter at the top. When I open the filter menu again, I can still see the product filters that I originally applied selected.

However, or my purposes, I do not wish to filter on the name itself, but rather on the ID. Since I'm selecting from a finite list with IDs, this will be more performant when getting data from the database. 

To accomplish this, I set the component to use the products list directly, and tie in the textField and valueField. I then set the isPrimitive to false. Here is a link to the example:

NOT WORKING https://stackblitz.com/edit/angular-i3fyq6hp-n9nbqzrz?file=src%2Fapp%2Fapp.component.ts

The filter does indeed work, however when opening the filter menu again, it does NOT retain the previous set filters. Setting another set of filters appends the new set with the old set with AND logic. Clearing also doesn't seem to work.

Looking for any help or direction here. Thanks!

Yanmario
Telerik team
 answered on 13 Dec 2024
1 answer
92 views
Hello

Using Kendo Grid for Angular

I have a weid behaviour where the last right filter popup menu will push to hole page to the left, because of its fixed positioning :

Here is the view while no filter is opened :





What can fix that ? Does the kendo grid have the hability to keep its popup items into its area ?



Thanks in advance
Martin Bechev
Telerik team
 answered on 12 Dec 2024
1 answer
35 views

I have a Kendo Grid that displays a date. I wish to make it inline-editable.

The kicker here is that I'm also using ngrx for immutable state management / redux pattern. So, the array that is used for the data in KendoGird, as is each individual object is immutable. Unfortunately, it looks like when I use Kendo Grid's editor functions, it attempts to apply the changes to the dataItem (which is read-only and produces an error and prevents moving forward)

I've produced an example that shows this. It doesn't use ngrx just to avoid having to set that up for the example, but it makes the object that is used for the dataItem immutable using Object.defineProperties().

https://stackblitz.com/edit/angular-cdgpy4-y8jhnhyj?file=src%2Fapp%2Fapp.component.ts

You can see trying to update the date causes an error in the application.

I was hoping to prevent the save on Kendos's side using sender.cancelCell();  but that doesn't seem to work.

Any ideas?

Martin Bechev
Telerik team
 answered on 12 Dec 2024
0 answers
85 views

Right now in my company we are trying to fix an issue were if we have a grid with with some locked columns in the left side of the grid, if we try to reorder some of the columns (not locked) from the right side to the grid the horizontal scroll doesn't move when we try to drag and drop the column.

I took code from one of your demos and made a small change jus to show the behavior:

 <kendo-grid [kendoGridBinding]="gridData" [height]="410" [reorderable]="true">
      <kendo-grid-column field="ProductID" title="ID" [width]="100" [locked]="true">
      </kendo-grid-column>
      <kendo-grid-column
        field="ProductName"
        title="Name"
        [locked]="true"
        [width]="250"
      >
      </kendo-grid-column>
      <kendo-grid-column
        field="Category.CategoryName"
        title="Category"
        [width]="250"
      >
      </kendo-grid-column>
      <kendo-grid-column
        field="UnitPrice"
        title="Price"
        [width]="150"
      >
      </kendo-grid-column>
      <kendo-grid-column field="UnitsInStock" title="In stock" [width]="150">
      </kendo-grid-column>
      <kendo-grid-column field="UnitsOnOrder" title="On order" [width]="150">
      </kendo-grid-column>
      <kendo-grid-column
        field="QuantityPerUnit"
        title="Quantity"
        [width]="150"
      >
      </kendo-grid-column>
      <kendo-grid-column
        field="Discontinued"
        title="Discontinued"
        [width]="150"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>

 

In this image you can see that the horizontal scrollbar is not moving.

Even removing the locked columns the auto horizontal scroll doesn't work.

This functionality seems like works fine on the React version of the grid.

Is there a way to make the horizontal scrollbar to move?

Omar
Top achievements
Rank 1
 updated question on 11 Dec 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?