or
0 answers
366 views
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.
0 answers
147 views
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;
}
RAMAKRISHNAN
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
15 Feb 2024
1 answer
453 views
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>');
}
}
1 answer
125 views
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} 
${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} 
${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>
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 E063588E680A7E9E
How can I render the string over two lines in a kendo button
Zornitsa
Telerik team
answered
on
12 Feb 2024
1 answer
217 views
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.
Zornitsa
Telerik team
answered
on
12 Feb 2024
1 answer
174 views
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: [] };
}
0 answers
59 views
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 ?
2 answers
1.4K+ views
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.
LIKE THAT, JUST ANGULAR KENDO GRID PROBLEMhttps://www.telerik.com/forums/grid-edit-popup-double-click-event-bug
I need help!
1 answer
187 views
I'm struggling to find a way to display 2 different measures in the Angular Pivot Grid at the same time.
When I provide multiple measures, it appears to just aggregate both values together. One is supposed to represent a dollar amount, and the other is the number of hours worked.
public measures: Measure[] = [
{
name: 'Cost',
value: (item) => item.GpCosts,
aggregate: sumAggregate,
},
{
name: 'TotalHours',
value: (item) => item.TotalHours,
aggregate: sumAggregate,
},
];It looks like this behavior is available on the JQueryUI version of the grid. I'm not sure what I'm missing, configuration wise on the Angular one.
Yanmario
Telerik team
answered
on
07 Feb 2024
1 answer
67 views
Hello!
Can I to create footer for entire kendo angular data grid (not for column)?
I need to add additional control between grid 's data and grid's pager control.
Maybe I can create my own custom pager control in two lines, but I haven’t found how to do it.
<ng-template kendoPagerTemplate> - arranges controls in one line.
