Telerik Forums
Kendo UI for Angular Forum
4 answers
448 views

Hello, I need to create custom filter menu for my grid with two datepickers - similar to this example.
My constructor looks like this:

constructor(private element: ElementRef,  private popupService: SinglePopupService) {
    ...
}

 

I inject the SinglePopupService as shown in the StackBlitz example, in order to be able to prevent closing the datepicker popup, but it's not working - I'm getting the following error:

NullInjectorError: R3InjectorError(MyLazyLoadedModule)[SinglePopupService -> SinglePopupService -> SinglePopupService -> SinglePopupService]: NullInjectorError: No provider for SinglePopupService!

I'm using this functionality in a lazy loaded module of my app, but I have the GridModule as well as the DateInputsModule imported.

Could you please help me with this?


Raghu
Top achievements
Rank 1
Iron
 answered on 02 Jun 2024
1 answer
5 views
Good afternoon,
Does anyone know how to disable  <kendo-filter> control?
<kendo-filter [filters]="populationCriteriaFilters"
  [value]="initialValue" (valueChange)="onFilterChange($event)"> </kendo-filter>
I have it on the card and the card is disabled and I need to disable it as well.
Any help will be greatly appreciated.
Hetali
Telerik team
 answered on 31 May 2024
0 answers
5 views

Using a Point object created with its constructor as the moveTo for a path fails when built for production but works when debugging.

    const moveTo: Point = new Point(x, y);
    path
      .moveTo(moveTo)
      .lineTo(moveTo.x + offsets[0].x, moveTo.y + offsets[0].y)
      .lineTo(moveTo.x + offsets[1].x, moveTo.y + offsets[1].y)
      .lineTo(moveTo.x + offsets[2].x, moveTo.y + offsets[2].y)
      .lineTo(moveTo)
      .fill('red');

 

If I use the code above, that path will draw just fine when built with development settings, but if I build the app for production it fails with NaN errors on the paths SVG Move step.  (the error has SVG that looks like 'M Nan')

however, if I just use the X and Y coordinates, it works... the following works in production.  I don't know if it's a bug or I'm doing something wrong, but the fact that it works in a dev build, but not an optimized production build makes me think it's a bug.

    path
      .moveTo(moveTo.x, moveTo.y)

 

Noah
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 31 May 2024
1 answer
5 views
I am using Kendo Angular grid and have a column containing multiple buttons. These buttons are custom angular components. I am using [navigable]="true". How can I make these buttons be part of the navigation?
 
Chris
Top achievements
Rank 1
 updated question on 31 May 2024
0 answers
4 views
I have the code below. The column titled "Hair Color" shows the value properly. However "Hair Color2", which uses a template, does not. Note that both versions of "Last Name" work fine. So the issue appears to be something to do with using a template and a nested field. How can I make this work?

Here is a StackBlitz demonstrating the issue: https://stackblitz.com/edit/angular-phpipy-9tnfas?file=src%2Fapp%2Fapp.component.ts

 

<kendo-grid [data]="data">

  <kendo-grid-column field="id" title="id"></kendo-grid-column>
  <kendo-grid-column field="firstName" title="First Name"></kendo-grid-column>
  <kendo-grid-column field="lastName" title="Last Name"></kendo-grid-column>
  <kendo-grid-column field="hair.color" title="Hair Color"></kendo-grid-column>

  <kendo-grid-column title="Last Name2">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem['lastName'] }}
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column title="Hair Color2">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem['hair.color'] }}
    </ng-template>
  </kendo-grid-column>

</kendo-grid>

 

  data = [

    {
      "id"101,
      "firstName""Abbi",
      "lastName""Jones",
      "email""ajones123@aol.com",
      "correctiveLens"false,
      "hair": { "color""Blond""type""Curly" },
      "birthdate""2/23/1981",
      "startTime""8:15 PM"
    },
    {
      "id"1,
      "firstName""Terry",
      "lastName""Medhurst",
      "email""atuny0@sohu.com",
      "correctiveLens"true,
      "hair": { "color""Black""type""Strands" },
      "birthdate""12/1/1981",
      "startTime""12:05 AM"
    },
    {
      "id"2,
      "firstName""Sheldon",
      "lastName""Quigley",
      "email""hbingley1@plala.or.jp",
      "correctiveLens"false,
      "hair": { "color""Blond""type""Curly" },
      "birthdate""12/1/1981",
      "startTime""12:00 AM"
    },
    {
      "id"3,
      "firstName""Terrill",
      "lastName""Hills",
      "email""rshawe2@51.la",
      "correctiveLens"true,
      "hair": { "color""Blond""type""Very curly" },
      "birthdate""12/1/1981",
      "startTime""12:00 AM"
    }
  ];

Chris
Top achievements
Rank 1
 updated question on 31 May 2024
0 answers
6 views

 

I am using Kendo Grid in Angular. I have  [navigable]="true". When I go into edit mode, I have a custom template similar to this:

   <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
    <div *ngIf="formGroup" [formGroup]="formGroup" class="edit-wrapper">
      <custom-select [data]="col.data"></custom-select>
     </div>
  </ng-template>

It works find except that I can't click in this component. The custom-select component has a search box, paging control, and other elements the user may click while making a selection. Any time any of these are clicked it closes the component. How can I avoid this.

Similarly, another column is a custom component that wraps the material date picker. This component has the same issue any time the user tries to select a different month, etc.

Here is a StackBlitz demonstrating the problem using Material Datepicker. To replicate, click the date to edit, then click the icon to open the calendar, and then click next or previous month button and see how it closes the dialog.

https://stackblitz.com/edit/angular-material-datepicker-lkmb8d?file=src%2Fapp%2Fapp.component.ts


Chris
Top achievements
Rank 1
 updated question on 31 May 2024
0 answers
3 views

Hello,

its been dealt with. But i have another issue. I have a treeview and a editService as a directive/datasource. Anyway the nodeDrop called twice. Have u any idea why nodeDrop is called twice. Best regards Nico

   

this.treeview.nodeDrop.subscribe(x=>console.log(x));

 

Nico
Top achievements
Rank 1
 asked on 31 May 2024
1 answer
4 views

Hello,

i wante to disable drag and drop in my TreeView for specific Elements.

For example, i need something like that:

<ng-template kendoTreeViewNodeTemplate
                 let-dataItem>
      <span class="bold" [disable]="dataItem.name === 'uwe' ? true: false">
        {{dataItem.name}}
      </span>
   

</ng-template>

 

Best regards Nico

Zornitsa
Telerik team
 answered on 31 May 2024
0 answers
4 views

I want to use hierarchical drawer, were in parent component i want to add extra icon (+ icon) next to the  drawer text.

expected behaviour is, when i click the (+ icon) the drawer should not get expanded, instead i have to do some other functionality like opening a window/dialog. I want restrict the drawer expansion. 

current behaviour: Drawer gets expanded wherever i click , including the (+ icon) .

Vaishaly
Top achievements
Rank 1
 asked on 30 May 2024
0 answers
4 views

We have a map tile layer and are trying to show the growth of our locations by programmatically adding makers to the array used by the bubble layer on a timed interval.  And it "works" but every time we update the array of markers, the entire map redraws or flashes or something.  Is that avoidable?  In the code below displayMarkers() is a computed signal that returns an array of markers depending on where we are in the chronological progression.

    <kendo-map-layers>
      <kendo-map-tile-layer #tileLayer [subdomains]="tileSubdomains" [urlTemplate]="tileUrl"
        attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>">
      </kendo-map-tile-layer>
      <kendo-map-bubble-layer #markerLayer [data]="displayMarkers()" locationField="latlng" valueField="size"
        [symbol]="vanguardSymbol"></kendo-map-bubble-layer>
    </kendo-map-layers>
Noah
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 30 May 2024
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?