Questions on Kendo UI for Angular Forum

1 answer

20 views

Dropdown and Grid filter icon - Both have same style classes (k-picker-solid)

I have been trying to use kendo-dropdown-list and kendo-grid in the same page. If I change the styles of k-picker-solid along with dropdown list, filter icon template is also getting affected.

DropDownList

Grid

answered on 20 Feb 2024

0 answers

61 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

34 views

Focun on clear button in textbox and combobox

Hi. i have some questions about focus on clear button

If click on kendo-textbox and input value, clear button will appear on the left side of the field. if you press the tab button, the focus will shift to this clear button.

<kendo-textbox
  [style.width.px]="200"
  [clearButton]="true"
></kendo-textbox>

If select value in kendo-combobox, clear button will appear on the left side of the field, before button show\hide list. But if press tab button, focus will shift to next DOM element

<kendo-combobox
  [data]="listItems"
>

Please, tell me why there is such a different behavior when pressing tab. Why doesn't the focus shift to the clear button in kendo-combobox.

Thanks.

ComboBox

TextBox

asked on 15 Feb 2024

0 answers

20 views

Unable to override progress-bar styles

Hi,

I've been trying to override the progress bar style for kendo-stepper. For some reason, i'm getting a scroll bar across the application in the bottom, which follows all the way across the stepper steps.

From dev tools, i can override this overflow to hidden (Previously it was visible). But when i apply them in my style sheet, it's not getting overridden. Help please.

::ng-deep .k-stepper .k-progressbar {
    pointer-events: none;
    z-index: 0;
    overflow: hidden !important;
}

ProgressBar

Stepper

asked on 15 Feb 2024

1 answer

47 views

Add breakline to the tooltip content

Kendo tooltip not recognizing the <br> tag so whatever we pass it is taking in a string format. Even if we pass the content with break line still it is take as a single string value. Tried different ways to alter the existing logic still didn't work.

Actual output: "First<br>Second<br>Third"

Expected output:

First

Second

Third

HTML:

<kendo-grid [data]="rowData" style="height:300px" [resizable]="true">
<kendo-grid-columnfield="charge_Desc"title="Filed Charges"[width]="150"[headerStyle]="{'font-weight': 'bold'}">
      <span kendoTooltip [title]="dataItem.victims">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div [innerHTML]="formatDescription(dataItem.charge_Desc)"></div>
        </ng-template>
      </span>
</kendo-grid-column>
</kendo-grid>
 
 
TS:
import { Component,OnInit, Input } from '@angular/core';
import { bailBondTabRowData } from 'src/app/models/constants';
import { ConsolidateSubjectService } from 'src/app/services/consolidate-subject.service';
@Component({
  selector: 'app-bail-bond-tab',
  templateUrl: './bail-bond-tab.component.html',
  styleUrls: ['./bail-bond-tab.component.scss']
})
export class BailBondTabComponent implements OnInit {
  columnDefs: any[] = [];
  rowData:any;
  public tooltipShowDelay = 0;
  public tooltipHideDelay = 2000;
  @Input() bailBondData:any;
  toolTipContent: any;
  constructor(public ConsolidateSubjectService:ConsolidateSubjectService) {
    this.columnDefs = bailBondTabRowData;
   
  }
  ngOnInit() {
      console.log(this.bailBondData,"Notes_Text");
      this.rowData = this.bailBondData.map((item:any) => ({
        ...item,
        Event_Date:this.ConsolidateSubjectService.convertDateFormat(item.Event_Date)
      }));
  }
  formatDescription(charge_Desc: string): string {
    return charge_Desc.replace(/(?:\r\n|\r|\n)/g, '<br>');
  }
}
 
 

Grid

Tooltip

answered on 13 Feb 2024

1 answer

18 views

Multiline button text

Is it possible to create a button with two lines of text?

I have a grid with a column for uniqueIDs. As these are usually 32 chars long I would like to display them over two lines within a button (the button will link to a page that displays a log of the end 2 end processing for that id). I have created a pipe to transform the given uniqueID into two lines of text. My pipe is:

export class HexSplitPipe implements PipeTransform {
  transform(value: string): string {
    // will take given sting and split into two lines
    const length = value.length;
    const halfLength = Math.floor(length / 2);
    // If the length is even, split evenly into two lines
    if (length % 2 === 0) {
      const firstHalf = value.substring(0, halfLength);
      const secondHalf = value.substring(halfLength);
      return `${firstHalf}&#13;&#10${secondHalf}`;
    } else {
      // If the length is odd, add one more character to the first line
      const firstHalf = value.substring(0, halfLength + 1);
      const secondHalf = value.substring(halfLength + 1);
      return `${firstHalf}&#13;&#10${secondHalf}`;
    }
  }
}
My component has the following in the uniqueID grid-column:
<kendo-grid-column field="uniqueID" title="UID" [width]="240">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoButton (click)="btnE2EHistoryClick(dataItem.uniqueID)" 
title="Click to see full processing history">{{dataItem.uniqueID | hexSplit}}</button>
        </ng-template>
</kendo-grid-column>
If my UniqueID = 028F88D7E5D26C5CE063588E680A7E9E
If want to get:
028F88D7E5D26C5C
E063588E680A7E9E
Instead I get: 028F88D7E5D26C5C&#13;&#10;E063588E680A7E9E
 
How can I render the string over two lines in a kendo button
 

Button

answered on 12 Feb 2024

1 answer

23 views

Grid content with virtual scrollable disappears when changing to another tab/pane/view and back.

Hi,

Description - When I scroll to the middle of the grid on virtual scroll mode and move to another tab within app (DOM gets changed but component doesn’t destroy) and back, grid content is blank/disappears and scrollbar resets to top position.

Grid

answered on 12 Feb 2024

1 answer

21 views

Sort reset is not working.

On the grid the sort seems to be working fine.
But when I am doing the next search after clearing the results in the grid the sort function is not resetting.

  clear() {
    this.firstName = "";
    this.lastName = "";
    localStorage.removeItem("firstName");
    localStorage.removeItem("lastName");
    this.orgName = "";
    this.rowData = [];
    this.filteredRowCount = 0;
    // this.grid.filterService.clear();
    this.grid.filter = undefined;
    this.grid.sort = [];
    this.state.sort = [];
    const emptySortState: DataStateChangeEvent = {
      sort: [],
      skip: 0,
      take: this.pageSize
    };
    this.onDataStateChange(emptySortState);
    this.grid.data = this.rowData;
    this.grid.columns.forEach((column: ColumnComponent) => {
      column.filter = undefined;
    })
    this.filter = { logic: 'and', filters: [] };
  }

Grid

Sortable

answered on 08 Feb 2024

0 answers

19 views

Any plans turn SelectionDirective standalone ?

Hi, I'm working on building a custom grid based on Kendo Grid. In my case, I'm using the Composition API, but I cannot import the SelectionDirective. I can't use it because it isn't standalone.

Any Plans to move to standalone ?

Grid

asked on 08 Feb 2024

2 answers

1.0K+ views

When I double click, the entire grid is affected rather than just the row -double click bug

When I click on a row, the incoming data opens automatically when I click anywhere in the grid.

I did a debug, before clicking nowhere I clicked on an empty pane on the grid and down into my dbClickWorkFlow() method.

Is it possible to put the dbClickWorkFlow() method in another part of the Grid Html? It didn't work when I tried it. Or do you have any good suggestions to fix it? For instance, only one row should be affected.

I had researched a lot of questions and found similar problems but it is not helpful.

It does not allow any good experience.