Questions on Kendo UI for Angular Forum

1 answer

26 views

Angular- Material Design - customize SCSS varibales

is there any option to dynamically change SCSS variables runtime? please suggest best method

Styling

answered on 29 Apr 2024

1 answer

14 views

Styling controls inside Kendo UI for Angular filter component

Hello - I want to style the dropdowns that are inside the Kendo Angular filter component without overriding Kendo dropdown styles. For example, I'd like to increase the width and set font size. Is there a way to do this?

Filter

Styling

answered on 18 Apr 2024

0 answers

17 views

Kendo grid angular hide table cell

Hi,

I'm using kendo grid in angular. I'm trying to hide/remove the total cell from the kendo grid using *ngIf, but only content inside the cell is hiding, empty cell is showing.

How to hide the total cell from the grid,

This is the code , I have used

<kendo-grid id="antibiotic-result-view" [data]="uniqAntibioticList" [resizable]="false">
    <kendo-grid-column field="Expansion" [width]="150">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
            <div class="antibiotic-heading">{{"Antibiotic" | translate}}
                <mat-checkbox type="checkbox" [ngModel]="allCompleted" disabled="true"></mat-checkbox>
            </div>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div *ngIf="dataItem.IsSuppressed">
                <span>{{ dataItem.Expansion }}</span>
                <mat-checkbox type="checkbox" [ngModel]="dataItem.IsSuppressed" disabled="true"></mat-checkbox>
            </div>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

I have been trying for past 2 days, could someone help me on this ?

Grid

GridLayout

Styling

asked on 22 Mar 2024

1 answer

35 views

Highlight specific text in cells based on filter/search

Hi!

I implemented a filter over all columns to implement a search like the example in the Overview-section for the Grid component.

I would like to highlight all text in the columns yellow that match the entered search text.

Is that easily possible?

Best regards,

Gerald

Filter

Grid

Styling

answered on 22 Feb 2024

0 answers

75 views

Getting SassError: $color: null is not a color.

I am getting SassError while importing kendo-theme-bootstrap. I am trying with:

@import '../../../../../node_modules/@progress/kendo-theme-bootstrap/scss/grid/index';

Below is the error:

./projects/admin/src/app/shared/layout/wrapper/wrapper.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
    ╷
185 │     "r": red($color),
    │          ^^^^^^^^^^^
    ╵
  node_modules/@progress/kendo-theme-bootstrap/modules/bootstrap/scss/_functions.scss 185:10                                  luminance()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/core/functions/_colors.scss 416:12  contrast-wcag()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/button/_theme.scss 75:24            @content
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/core/mixins/_import-once.scss 12:9  exports()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/button/_theme.scss 1:1              @import
  node_modules/@progress/kendo-theme-bootstrap/scss/button/_theme.scss 1:9                                                    @import
  node_modules/@progress/kendo-theme-bootstrap/scss/button/_index.scss 15:9                                                   @import
  node_modules/@progress/kendo-theme-bootstrap/scss/toolbar/_index.scss 6:9                                                   @import
  node_modules/@progress/kendo-theme-bootstrap/scss/adaptive/_index.scss 9:9                                                  @import
  node_modules/@progress/kendo-theme-bootstrap/scss/grid/_index.scss 6:9                                                      @import
  projects/lib/src/lib/app-theme/kendo.scss 37:9                                                                              @import
  projects/admin/src/app/shared/layout/wrapper/wrapper.component.scss 6:9                                                     root stylesheet



** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **

General Discussions

Styling

asked on 15 Feb 2024

0 answers

19 views

Problem with borders in schedulers. Borders falling apart and scheduler has the difference between the header and the content borders

Good morning,
I have a problem with the scheduler and its vertical lines in the header and table.
As you can see, the lines are offset by some fraction of a millimeter. Nothing in the dimensions has been changed, the scheduler loads itself in this form. Trying to resize the cell doesn't change anything.

Sometimes it happens from the very beginning, sometimes only at a certain point do these lines stop being in the right place.

I see the same issue on your pages

so my question is whether there is any way to prevent this, because when there are many columns, the last borders are seriously damaged as you can see:

Scheduler

Styling

asked on 29 Jan 2024

0 answers

68 views

css variables will not work with .k-list-item

I'm working with my first instantiation of a light / dark theme and to do this I'm using css variables.

An example of what I mean:

input::placeholder {
color: var(--input-placeholder);
}

What I'm noticing however for the items in a dropdown list is that if I use css variables I'll only see the initial set color (I just tested this with kelly green as the default) but if the variable switches the dropdown background and text colors will not update. An example of the css that I have in my all.css file:
.k-list-item {
color: var(--input_color);
background-color: var(--k_input_background2);
}

I just tried setting the program to dark mode and then creating the component and dropdowns after that's already selected - I still get the initial / default value not the actual. To clarify I'm setting other kendo css with this such as the grids, input backgrounds and text color, all of it's working fine - this is the only place it seems to be failing.

Let me know if this sounds familiar and if so what recommendations you have to work around this issue.

asked on 04 Jan 2024

1 answer

56 views

<kendo-pdfviewer/> toolbar option search malfunction

I’m using Kendo PDFViewer ver 13.1.0, and this is what my codes look like:

<kendo-pdfviewer
[url]="url"
(load)="onLoad($event)"
[zoom]="0.75"
[saveFileName]="filename"
(pageChange)="onPageChange($event)"
(error)="onError($event)"
[ngStyle]="{ height: height + 'px' }"
></kendo-pdfviewer>

As you can see I didn’t set any toolbar on it and by default it should show all the toolbar options that is included by the package,

But the issue here is that if the user start to search using the ‘search’ from toolbar option, it is somehow broken as you can see in the picture. The detected key is not highlighted properly.

Can someone assist me with this concern?

Thanks!

answered on 16 Nov 2023

0 answers

33 views

Scheduler Mulitweek Resource Group Header width

Hello,

I have a multi-week view scheduler, in which i use the kendo kendoSchedulerGroupHeaderTemplate directive to style my groups according to some resources.

I want to impose a max-width on this, in order to make sure that the names of the groups are within proportion. (See example: Too-long.png)

I have my html code:

<ng-template kendoSchedulerGroupHeaderTemplate let-resource="resource">
  <div class="group-header-wrapper">
    <div class="group-header-main">{{ resource.text }}</div>
    <div class="group-header-alt">{{ resource.line }}</div>
  </div>      
</ng-template>

and my css:

.group-header-wrapper {
  //code
}

.group-header-main {
  width: 100%;
  text-align: left;
  background-color: $secondary-color;
  padding: 2px 4px;
}

.group-header-alt {
  width: 100%;
  text-align: left;
  color: white;
  padding: 2px 4px;
}

adding max-width to group-header-wrapper. doesn't fix this. Because the event become unaligned. (see example: unaligned.png)

How can I style this so the events are aligned with their respective slots and days?

Thanks,

Govert Jaap

asked on 17 Oct 2023

0 answers

53 views

Making Kendo-filter in a modal. Size too large, and dropdown refuses to work.

Kendo-filter has dropdowns that are not appearing in the mat-dialog modal of my angular app. I am using the boiler plate code that is provided in the kendo-filter over view page. I can See The Add Group, Add Filter, but after clicking add filter button, the filter dropdowns appear, The dropdowns themselves do not work, I tried targeting the dropdown with z-index 1000 with no luck. Has anyone seen this before?

If there was a popupSettings for kendo-filter, then all generated ui components could inherit from that setting.

                    <kendo-filter
                        #filter
                        [filters]="filters"
                        (valueChange)="onFilterChange($event)">
                    </kendo-filter>
                    <ng-template let-currentItem #template>
                        <kendo-dropdownlist
                            [popupSettings]="{ appendTo: 'component' }"
                        ></kendo-dropdownlist>
                    </ng-template>

Alternative attempted approach to set the popupSettings for dynamic kendo-dropdownlist

import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  // ...
})
export class YourComponent {
  @ViewChildren(DropDownListComponent) dropdownLists: QueryList<DropDownListComponent>;

  // ... other component properties and methods ...

  ngAfterViewInit() {
    this.dropdownLists.forEach(dropdown => {
      dropdown.popupSettings = { appendTo: 'component' };
    });
  }
}