We have an application we are developing and are using the Kendo Dialog to wrap some of our screens. You can see it in action at https://tropicos.org. Many of our users are using Safari 13 on a Mac and have reported problems where the dialogs are clipping off the bottom when the view it overlays is smaller than the dialog itself. We are also experiencing problems where the dialog gets "tucked" under the header of the app cutting off the top of the dialog. One of the dialogs in question is the login dialog. I know we can use the service to control much of the features of the dialog however do not see why we should have to go back and refactor all of the screens that use dialogs to do so. They do behave correctly on chrome on the Mac and  I would expect the behavior that works on chrome to also work the same for Safari on the Mac machine. Is anyone else having the problem or is there an easier solution for this than refactoring all of our dialogs to use a service so we can control the position and what it container it appends to? 

I do not have access to a Mac to test all of my changes so it is very frustrating when the expected behavior would be the same across browsers.

Today I upgrading my project, using the command npx npm-check-updates -u -f /.*@progress.*/

My project compiles the theme from SCSS source files. 

After the upgrade, some SCSS variables are not defined. This is one of the errors I get from the terminal:

ERROR in ./src/assets/styles/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/assets/styles/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
25 │ $checkbox-hovered-border: $input-hovered-border !default;
   │                           ^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@progress\kendo-theme-material\scss\checkbox\_variables.scss 25:27  @import
  node_modules\@progress\kendo-theme-material\scss\checkbox\_index.scss 9:9        @import
  node_modules\@progress\kendo-theme-material\scss\adaptive\_index.scss 7:9        @import
  node_modules\@progress\kendo-theme-material\scss\grid\_index.scss 7:9            @import
  src\assets\styles\_kendo-components.scss 12:9                                    @import
  src\assets\styles\styles.scss 5:9                                                root stylesheet

=================================================================================

I was able to recreate the issue by

1. create a new angular project
2. install the inputs package:  ng add @progress/kendo-angular-inputs
3. install material theme: npm install --save @progress/kendo-theme-material
4. remove the following styles in angular.json
       "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
5. add the following import for inputs in styles.scss
       @import '~@progress/kendo-theme-default/scss/input/_index.scss';
6. build the project: ng build

Error in the terminal: 
---------------------------

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
42 │ $input-border: $button-border !default;
   │                ^^^^^^^^^^^^^^
   ╵
  node_modules\@progress\kendo-theme-default\scss\input\_variables.scss 42:16  @import
  node_modules\@progress\kendo-theme-default\scss\input\_index.scss 10:9       @import
  src\styles.scss 2:9                                                          root stylesheet

This is my package.json

  "dependencies": {
    "@angular/animations": "~10.1.1",
    "@angular/common": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/forms": "~10.1.1",
    "@angular/localize": "~10.1.1",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "@progress/kendo-angular-common": "^1.0.0",
    "@progress/kendo-angular-inputs": "^6.7.2",
    "@progress/kendo-angular-intl": "^2.0.0",
    "@progress/kendo-angular-l10n": "^2.0.0",
    "@progress/kendo-angular-popup": "^3.0.0",
    "@progress/kendo-drawing": "^1.5.12",
    "@progress/kendo-theme-default": "latest",
    "@progress/kendo-theme-material": "^3.21.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },

Are there more files or dependencies required? What else do I need to import in the styles. I prefer not to import all the styles since we are only using a selection of the components.

We have a parent and child grid setup within our app.  Everything works fine except that the headers in the child grid are somehow inheriting CSS that underline the headers.

Here is the code in the parent:

    <kendo-grid-column field="ReportID">
      <ng-template kendoGridCellTemplate let-dataItem>
        <div class="k-icon k-i-plus-circle" style="color: limegreen; cursor:pointer;" title="Add" (click)="addToFavorite(dataItem.ReportAssociationID)"></div>
      </ng-template>
    </kendo-grid-column>
    <ng-template kendoGridDetailTemplate let-dataItem>
      <reportDocumentGrid>CHILD GRID IS IN HERE</reportDocumentGrid>
    </ng-template>

For some reason the headers in the child grid are getting the following style applied:

.k-grid tbody tr td:not(.k-hierarchy-cell) a {
text-decoration: underline;
}

Really stuck here, thanks in advance!

The editor is not showing all of the html content when assigned as value to it. The same html when opened in browser shows all content.


Here is the stackblitz link where it can be replicated 

https://stackblitz.com/edit/angular-odcrkl?file=app/app.component.ts

     i think that the grid component , and the tree grid, or treeview, or other components that have arrays of data, should have a FormArray property to be as transparent as possible in the reactive form scenario.

There is a blog post about this, but there is too much code to implement it , and it should be easier

We have a requirement to group by date then by resources in the terlerik scheduler in the week view.

We know this functionaility exists in the ASP.NET AJAX version, our question is whether it is possible to replicate the same behavior in the angular version?

Please find attached image as a reference

Here is the context:

We are using the Grid expandRow() and collapseRow() methods for expanding/collapsing a master Grid row programmatically.

We are also using paging and grouping functionalities of the Grid.

And we are currently implementing the feature where the user can just select/focus the record and that record will automatically expanded.

The user is also able to navigate/focus the record by using the up and down arrow keys.

Here are the features that we need to add on top of the above features:

If the user is on the last record of the page and the user presses the down arrow key:

1. The grid will automatically go to the next page (if there is). - Already implemented

2. And expand the first row of that page. - Not yet implemented 

If the user is on the first record of the page and the user presses the up arrow key:

3. The grid will automatically go to the previous page (if there is). - Already implemented

4. And expand the last row of that page. - Not yet implemented

I'm currently using the focusCell(rowIndex, cellIndex) method to programmatically get the instance of NavigationCell.

According to your documentation the rowIndex is based on the logical structure of the Grid and does not correspond to the data item index.

Can someone help us to properly get the rowIndex of the first and last row of the page specially if the grid is grouped by multiple columns?

Thanks in advance.

I have a treeview where some parent nodes are disabled on certain criteria, however, the children are enabled, but I can't expand disabled parents.

Example https://stackblitz.com/edit/angular-gxqjsq

Is that scenario supportable or is there any workaround to achieve it?

Hi team,

My company purchased two licenses for KendoUI angular and I am one of the senior software engineers. My question is how should I apply license for KendoUI angular version because I am using KendoUI component by installing packages from NPM which is publicly accessible for everyone. Is there any special build or something we missed? How do you guys validate licensing for KendoUI angular version? 

Looking forward to your reply. 

Thank you
Hadi