Telerik Forums
Kendo UI for Angular Forum
1 answer
3.3K+ views

Hi,

When I build, I got following message. I use Angular 13.3 and typescript 4.6.2. Is there a way to remove these message? 

  .k-input-label:dir(rtl) -> unmatched pseudo-class :dir
  .k-form .k-form-fieldset>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')      
  .k-form>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-left+* -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-right+* -> Cannot read properties of undefined (reading 'type')
  .k-chat .k-message-list-content>*+* -> Cannot read properties of undefined (reading 'type')

Thank you.

Stoyan
Telerik team
 answered on 13 Jun 2022
4 answers
331 views

Hello,

In our application, we offer the users possibility to customize settings and save them inside MongoDB, and some of those settings are of DateTime/Time type. 

The problem is, that when the user sets a time inside the DateTime Picker (let's say 17 April 2020, 23:59), the value saved inside MongoDB is the serialized one, 2020-04-17T20:59:00.000Z  (I write the ngModel in console and I get Fri Apr 17 2020 23:59:00 GMT+0300 (Eastern European Summer Time), so the serialization is correct considering the time zone, but we need to save in database the exact date the users sets inside the DateTimePicker.

console.log(this.dateModel, JSON.stringify(this.dateModel)) writes
Fri Apr 17 2020 00:00:00 GMT+0300 (Eastern European Summer Time)
'"2020-04-16T21:00:00.000Z"'

What can be done so the DateTimePicker shows the date with the same time as when it is serialized?

PS. We have same functionality in an older application made with AngularJS, but there is no problem because the Date Picker for jQuery UI accepts strings as ng-model.

 

Thanks,

Iuliana

Iuliana Maria
Top achievements
Rank 1
Iron
 updated answer on 10 Jun 2022
1 answer
430 views

Hello

I have a question. On click of a label, I want my kendo numeric textbox to have focus, but it is not working. Following is my code.

<label for="kid">Currency</label>

<kendo-numerictextbox
  [attr.id]="'kid'"
  [format]="formatOptions"
  [min]="min"
  [max]="max"
  [step]="step"
  [autoCorrect]="true"  
  [spinners]="false"
  [formControl]="control"
  [changeValueOnScroll]="false"
>
</kendo-numerictextbox>

Issue is because, at the run time kendo generates a random ID, and appends that ID to the input box(.k-input) , instead of appending the id given by the user as above. This is causing the issue and focus is not set on input box when clicking in label. Could you please check it and suggest a solution.

"@progress/kendo-angular-inputs": "^9.0.0",

 

Thank you

Hetali
Telerik team
 answered on 08 Jun 2022
0 answers
144 views

Hello, I updated all kendo packages today (June 6, 2022) and my ThemeService and other modules do not compile, this message appears:

      Error: Module not found: Error: Unable to resolve '@progress/kendo-angular-charts/common/theme.service', before update work with @progress/kendo-angular-charts, but now the only suggestion is @ progress/kendo-angular-charts/common/theme.service

6.0.1 was working fine. but the 7.1.0 no 

i deleted node_modules and removing package-lock.json alone didn't help

Regards

Claudio

 

Claudio
Top achievements
Rank 1
 asked on 06 Jun 2022
1 answer
238 views

Hi Telerik team.

I faced an issue with multi-days events displayed one day shorter on the month view than the endDate setup. For example event start date 2022-06-06T00:00:00 and end date 2022-06-08T00:00:00. I expect this event to take 3 full days, but on a calendar view, it shows as two only. In case add to end date 1-second event will take three days.

Here you can see a code example with this issue. https://stackblitz.com/edit/angular-k7xgds?file=src%2Fapp%2Fevents-utc.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

Martin Bechev
Telerik team
 answered on 03 Jun 2022
1 answer
221 views

I am using the kendo conversational ui to create the chat feature of my application.


I am mainly using this code from this article - https://www.telerik.com/kendo-angular-ui/components/conversational-ui


I am able to use the user icon and assign a image to it by accessing the user interface through my component file-


' readonly externalUser: User = {
id: 0,
name: 'Bot',
avatarUrl:
urlForImage,
}; '


The user icon is displayed automatically through the kendo chat decorator in the html file, hence I am unable to find a way to make any changes other to it. I need to find a way to make the user icon clickable so that I am able to show the user's profile popup with info like email id, address, contact number etc through it. Any help is appreciated.

Dimiter Topalov
Telerik team
 answered on 02 Jun 2022
1 answer
548 views


<kendo-grid *ngIf="module"
    [kendoGridBinding]="module.permissions"
    kendoGridSelectBy="id"
    [pageSize]="10"
    [pageable]="true"
    [sortable]="true"
    (edit)="editPermissionHandler($event)"
    (cancel)="cancelPermissionHandler($event)"
    (save)="savePermissionHandler($event)"
    (add)="addPermissionHandler($event)"
    (remove)="removePermissionHandler($event)">
    <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand>Add new</button>
    </ng-template>
    <kendo-grid-column field="id" title="id" hidden="true"></kendo-grid-column>
    <kendo-grid-column field="code" title="Code" [width]="180"></kendo-grid-column>
    <kendo-grid-column field="description" title="Description"></kendo-grid-column>
    <kendo-grid-command-column title="" [width]="220">
        <ng-template kendoGridCellTemplate let-isNew="isNew">
            <button kendoGridEditCommand [primary]="true">Edit</button>
            <button kendoGridRemoveCommand>Remove</button>
            <button kendoGridSaveCommand [disabled]="formGroup?.invalid">
                {{ isNew ? "Add" : "Update" }}
            </button>
            <button kendoGridCancelCommand>
                {{ isNew ? "Discard changes" : "Cancel" }}
            </button>
        </ng-template>
    </kendo-grid-command-column>
</kendo-grid>

this is how I delete an item:


let indexToDel = this.module.permissions.findIndex(p => p.id == perm.id);
this.module.permissions.splice(indexToDel, 1)

//way to avoid that?
this.module.permissions = this.module.permissions.slice();

Can we avoid the last line to force the update?

Thanks

Valentin
Telerik team
 answered on 31 May 2022
1 answer
217 views

Hi

another question regarding the angular coffee example. I have made my own theme. I then added it to the drop-down in the header component link this (I also tried to change the default theme to ocean blue):

public themes: { href: string; text: string }[] = [
      {
         href: 'assets/kendo-theme-default/dist/default-ocean-blue.css',
         text: 'Kendo default (ocean blue)',
      },
      {
         href: 'assets/kendo-theme-bootstrap/dist/all.css',
         text: 'Bootstrap',
      },
      {
         href: 'assets/kendo-theme-material/dist/all.css',
         text: 'Material',
      },
      {
         href: 'assets/light-theme/dist/theme-light.css',
         text: 'My light theme',
      },
      {
         href: 'assets/dark-theme/dist/theme-dark.css',
         text: 'My dark theme',
      },
   ]

and I also updated my angular.json file to include copying the new assets:

 "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@progress/kendo-theme-default/dist",
                "output": "/assets/kendo-theme-default/dist"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@progress/kendo-theme-bootstrap/dist",
                "output": "/assets/kendo-theme-bootstrap/dist"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@progress/kendo-theme-material/dist",
                "output": "/assets/kendo-theme-material/dist"
              },
              {
                "glob": "**/*",
                "input": "src/assets/theme/dark",
                "output": "/assets/dark-theme/dist"
              },
              {
                "glob": "**/*",
                "input": "src/assets/theme/light",
                "output": "/assets/light-theme/dist"
              }
            ],

I thought this was pretty straightforward... I have double checked that the new files are in the assets folder but I am getting two errors:

1.  a **404 error** that the themes are not found...this is with my theme

2. a **The resource from ... was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).** with the default-blue-theme.

Any idea what I am missing?


Thank you for any help given

 

Ivo
Telerik team
 answered on 31 May 2022
1 answer
466 views

Hi

How to apply number format in Kendo numeric steeper in dynamically (ex, lakhs to a million & a million to lakhs)

 

Thanks & Regards

A.Thamaraikannan

Martin Bechev
Telerik team
 answered on 30 May 2022
1 answer
150 views

Hi,

I want to wrap header columns in grid , that based load data wrap format

its possible!

Thanks & Regards

A.Thamaraikannan

Martin Bechev
Telerik team
 answered on 30 May 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?