Questions on Kendo UI for Angular Forum

1 answer

161 views

100% Stacked Bar chart - assign same colour every time

hi,

I have a 100% Stacked Bar chart that displays various 'States'. I would like to assign same colour to those states even when toggled. For example, green should assigned only to 'Complete' state. Having 'SeriesColor' at 'kendo-chart' component level doesn't work. Any idea how to achieve this?

Please see stackblitz example in the link below
https://stackblitz.com/edit/angular-10-thmpbt-bfoybs?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

With Toggle On - green is assigned to 'Complete' state

With toggle off - orange is assigned to Complete state. But I need green to remain for Complete

Regards
Karthik

Charts

answered on 15 Dec 2022

0 answers

997 views

Kendo UI: KENDO_UI_LICENSE environment variable not set - even though it's set

I run Windows 11 Pro N system with EV set in cmd.exe

set KENDO_UI_LICENSE=keyFromLicenseFile

When listing variables I can see that my variable is set correctly.

I run this command in my Angular 14 project:

npx kendo-ui-license activate

I get this response:

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set
(INFO) Kendo UI: Reading license from "(...)\ClientApp\kendo-ui-license.txt"...
(INFO) Kendo UI: License imported successfully.

I do not plan to include .txt file in repository and want to use environment variable in my CI solution.

Any idea why I get such (INFO) about variable not set?

General Discussions

Licensing

asked on 14 Dec 2022

0 answers

104 views

Prevent default behavior on scheluder save event

Hi,
I am working on adding a custom scheduler form modal and what I want is to keep the modal open when I click on the save button, but the modal closes automatically. Is there a way to prevent this behavior?

Scheduler

updated question on 14 Dec 2022

1 answer

4.8K+ views

SassError: Can't find stylesheet to import - getting error while taking the build in Angular15

Getting below error after updated to angular15, and also using Kendo UI for the ui controls. It seems that due to the tilde key depreciated, is there any workaround for this issue?

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
3 │ @import "~@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\assets\kendo-theme\kendo-imports.scss 3:9  @import
  src\styles.scss 3:9                            root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
3 │ @import "~@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\assets\kendo-theme\kendo-imports.scss 3:9  @import
  src\styles.scss 3:9                            root stylesheet

General Discussions

Styling

answered on 12 Dec 2022

0 answers

66 views

Show all dates in the StockChart's x-axis (categoryAxis) and the Navigator axis (Kendo StockChart Angular)

Hi,

Currently, the Stockchart renders some dates and skips few dates automatically. Usually, the x-axis has 3 days gap between dates and the navigator axis has 1 day gap. We want the chart to display all dates from the dataset.

Please refer this link for the POC app: https://stackblitz.com/edit/kendo-stockchart-v2?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Kindly help. Thank you.

Charts

asked on 10 Dec 2022

1 answer

146 views

Is kendo ui fully supported in angular 15?

I was looking for compatibility across the web and couldn't find whether or not kendo is supported for latest angular

Accessibility

answered on 09 Dec 2022

1 answer

426 views

Peer dependency issue for kendo-angular-icons package

When I run install on package.json, I get this:

@progress/kendo-angular-icons@2.0.1 requires a peer of @progress/kendo-svg-icons@^0.1.2 but none is installed.

I have "@progress/kendo-svg-icons": "~0.6.0", which is the latest version.

Icon

answered on 09 Dec 2022

1 answer

215 views

Rounded Column Chart

Hello, i need to add a cornerRadius at the top for a column chart.

You can find attached a picture of what i need.

Best regards,

Charts

answered on 07 Dec 2022

1 answer

229 views

Filter does not work on the data which has columns special Characters.

I am using "filterBy" function from Kendo-data-grid in my Angular app.

I have a data where column names consists of special characters such as 'Product. Name'. I able to filter all the columns(which has names without special characters). I am not able to filter the columns(which has name with special characters).

How can i filter the columns even with specialcharactes in its names.

Example: Example

Please help me regarding this.

Data Query

Filter

answered on 06 Dec 2022

0 answers

128 views

kendoGridDetailTemplate only show the [+] signe when there is something to show

[RESOLVED]

Hello,

I have integrated kendo grid with some details-grid using the KendoGridDetailTemplate.
Everything works great, but I can't find a way of hiding the [+] sign when there is nothing to show in the details component.

I am already using the [KendoGridDetailTemplateShowIf]="ShowDetailsCondition" but the problem i'm facing is that when the directive is called, I don't have access to the methods in my component, since "this" changes and represents the directive itself.

              <ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showDetailsCondition">
                <app-cash-register-main-cash-register-action-form-details
                  [invoiceHeaders]="invoiceHeaders"
                  [quoteHeaders]="quoteHeaders"
                  [shipmentHeaders]="shipmentHeaders"
                  [subscriptionHeaders]="subscriptionHeaders"
                  [orderHeaders]="orderHeaders"
                  [creditNoteHeaders]="creditNoteHeaders"
                  [document]="dataItem">
                </app-cash-register-main-cash-register-action-form-details>
              </ng-template>

  hasHeaders(dataItem): boolean {
    console.log(dataItem);
    let document = dataItem;
    const type = document.SourceEntity;
    const id = document.EntityId;
    let documentFound = [];
    switch (type) {
      case 'InvoiceHeader':
        console.log('InvoiceHeader');
        const InvoiceHeader = this.invoiceHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(InvoiceHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(InvoiceHeader?.Lines, type));
        break;
      case 'QuoteHeader':
        console.log('QuoteHeader');
        const selectedQuoteHeader = this.quoteHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedQuoteHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedQuoteHeader?.Lines, type));
        break;
      case 'SubscriptionHeader':
        console.log('SubscriptionHeader');
        const selectedSubscription = this.subscriptionHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedSubscription, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedSubscription?.Lines, type));
        break;
      case 'OrderHeader':
        console.log('OrderHeader');
        const selectedOrderHeader = this.orderHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedOrderHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedOrderHeader?.Lines, type));
        break;
      case 'CreditNoteHeader':
        console.log('CreditNoteHeader');
        const selectedCreditNoteHeader = this.creditNoteHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedCreditNoteHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedCreditNoteHeader?.Lines, type));
        break;
      case 'ShipmentHeader':
        console.log('ShipmentHeader');
        const selectedShipmentHeader = this.shipmentHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedShipmentHeader, type));
        break;
    }
    if (documentFound.length > 0) {
      return true;
    }
    return false;
  }

here is my condition function:

  public showDetailsCondition(dataItem: MovementDocumentCustomer): boolean {
    console.log(dataItem);
    return (
      (dataItem.SourceEntity === 'InvoiceHeader' ||
        dataItem.SourceEntity === 'ShipmentHeader' ||
        dataItem.SourceEntity === 'OrderHeader') &&
      this.hasHeaders(dataItem)
    );
  }