Telerik Forums
Kendo UI for Angular Forum
1 answer
146 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}
&#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}
&#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

 

Zornitsa
Telerik team
 answered on 12 Feb 2024
1 answer
259 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
206 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: [] };
  }

 
Zornitsa
Telerik team
 answered on 08 Feb 2024
0 answers
69 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 ?

 

danywalls
Top achievements
Rank 1
 asked on 08 Feb 2024
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!

 

 

JORGE
Top achievements
Rank 1
Iron
 answered on 07 Feb 2024
1 answer
207 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
81 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.

 

horváth
Top achievements
Rank 2
Iron
Iron
 answered on 06 Feb 2024
1 answer
566 views

Hello,
we work in angular and typescript.

I need to make a button who reset all control in the form to empty value.

How I can clear the value of kendo-datepicker ?

When we load the the form the kendo-datekiper is blank (like the sampe https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/)

A user select a date. If the user clear manually the date all work.

I need the code for reset the value kendo-datepicker to  "bank" ? null? undefined? 

I have tried woth the binding of the value properties.

variable:

dt_value!: Date;

<kendo-datepicker [(value)] = "dt_value" > </kendo-datepicker>

But if I set variable dt_value to undefined I receive an error.

Thanks for any help.

LSo

Zornitsa
Telerik team
 answered on 06 Feb 2024
1 answer
269 views
Is it possible to import/export a CSV file format with the Spreadsheet component?
Martin Bechev
Telerik team
 answered on 06 Feb 2024
0 answers
68 views

Hello,

I would like to know if this is expected behavior, if I have to possibly adjust my code, or if this is a bug.

The issue is when typing and selecting a font family or size and then selecting the left button of the color gradient or background the style will get reset to the default values for font family and style. Or, maybe this is due to the underlying ProseMirror change in node. 

 

Please see my ScreenPal for demonstration of the issue.  

https://somup.com/cZnhrjpi34

Thank you for your help.

Stephanie
Top achievements
Rank 1
 updated question on 05 Feb 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?