Questions on Kendo UI for Angular Forum

1 answer

244 views

Angular kendo-numerictextbox does not have round property

Hey,

I am using Kendo Angular numerictextbox.

Unlike the Vue and JQuery version, Angular version does not have "round" property.

How can I prevent rounding ? Could you please add this feature to new version ?

Best Wishes.

NumericTextBox

answered on 28 Dec 2021

1 answer

418 views

kendo dialog in separate html and separate typescript file

Hi

Could i have an kendo-dialog completly separate from caller button with specific typescript file and specific html file ?

Regards

Dialog

answered on 27 Dec 2021

1 answer

110 views

Is Angular 12 support Nested grid?

Hi, All

I have one solution of angular project with Angular 7.2. It working fine with Nested Grid.

when upgrade solution to latest version as Angular 12.2.11 and Nested grid not able to view on pages.

I was only updated package.json that it.

Link for Reference : https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/

Can any one help for this

Conversational UI

Grid

answered on 27 Dec 2021

1 answer

185 views

Overlay Drawer - Only close on explicit button click and not on click outside

Is there a way to prevent the overlay drawer from closing when the user clicks in the gray overlay area and force them to click a button that fires the toggle method?

Drawer

answered on 24 Dec 2021

1 answer

88 views

Scroll issue after hiding 'all day' from kendo angular scheduler

After hiding 'all day' from kendo angular scheduler using below code, we are facing scroll issue. In week view when we scroll, only the view from Sun to Sat scrolls leaving Time bar fixed. And hence there is a mismatch in alignment of and timings in UI.

Can you please help us in fixing this scroll issue hiding 'all day' feature.

Please find the attached image for reference.

.hide-all-day .k-scheduler-table tr:nth-of-type(0),
.k-scheduler-times-all-day,
.k-scheduler-table.k-scheduler-header-all-day {
  display: none;
}

Scheduler

answered on 23 Dec 2021

0 answers

91 views

Multiple labels per item on Kendo chart

I'm trying to get multiple label per item on Kendo Column chart
Desired layout looks like on the first attached image.

I was able to get only this layout

import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';

export type TrendItem = {
  clientName: string;
  periodName: string;
  income: number;
};

@Component({
  selector: 'my-app',
  template: `
        <kendo-chart>
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [labels]="valueAxisLabels">
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
              <kendo-chart-series-item-labels [content]="labelVisual">
              </kendo-chart-series-item-labels>
           </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `,
})
export class AppComponent {
  public valueAxisLabels: ValueAxisLabels = {
    font: 'bold 16px Arial, sans-serif',
  };

  public trendItems: TrendItem[] = [
    {
      clientName: 'Client1',
      periodName: 'Q1 2020',
      income: 20,
    },
    {
      clientName: 'Client1',
      periodName: 'Q2 2020',
      income: 15,
    },
    {
      clientName: 'Client1',
      periodName: 'Q3 2020',
      income: 35,
    },
    {
      clientName: 'Client1',
      periodName: 'Q4 2020',
      income: 40,
    },
    {
      clientName: 'Client2',
      periodName: 'Q1 2020',
      income: 15,
    },
    {
      clientName: 'Client2',
      periodName: 'Q2 2020',
      income: 20,
    },
    {
      clientName: 'Client2',
      periodName: 'Q3 2020',
      income: 15,
    },
    {
      clientName: 'Client2',
      periodName: 'Q4 2020',
      income: 30,
    }
  ];

  public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
    .map((e) => e.value);

  public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];

  public labelVisual(e: { dataItem: TrendItem }) {
    return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
  }
}

You can try this code here.

My current result look like on the second attached image.

So my question is how to display multiple labels per item like on the first picture?

My current obstacles.

- I didn't find a way to add multiple `<kendo-chart-series-item-labels>` elements. Only one will be rendered, rest will be ignored.
- I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.

I asked this question on Stack Overflow as well.

Charts

Label

asked on 23 Dec 2021

1 answer

168 views

How to rebind kendo angular grid on button click?

I have grid in angular and two buttons ones bind 5 column the other bind 2 but when i click them grid always shows 5 column.... How to fix this without using js? Is there any refresh() or rebind() function or directive?

html

<button (click)="changeDataSource(1)">Data1</button>  <button (click)="changeDataSource(2)">Data2</button>

<kendo-grid [data]="gridData | async" k-grid-options="sa">
</kendo-grid>

component

  public gridData: Observable<any[]>;


  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.gridData = this.productService.getProducts();

  }

  changeDataSource(id: number) {
    console.log(id);
    if (id == 1) { this.gridData =this.productService.getProducts();}
    if (id == 2) { this.gridData =this.productService.getProductsAlternative() }

    
  }

my service

getProducts(): Observable<Products[]>{ //Returns ProductID,ProductName,CategoryName,UnitPrice,UnitsInStock
    return this.http.get<Products[]>(this.url)
  }

  getProductsAlternative(): Observable<ProductAlternative[]>{ //Returns ProductName,CategoryName
    return this.http.get<ProductAlternative[]>(this.url1)
  }

Thanks

Grid

answered on 23 Dec 2021

1 answer

119 views

Kendo Grid Filter-menu - Only 1 Filter Criteria

In the following snippet, for a single column, I am allowing only 1 filter criteria by setting [extra] to false. My goal is to restring the filter to only allow 1 criteria. Is it possible apply this for all columns in the grid without performing this action for each column?

<kendo-grid-column field="myDate" title="Title">
    <ng-template kendoGridFilterMenuTemplate
        let-filter let-column="column" let-filterService="filterService"> 

        <kendo-grid-date-filter-menu
          [column]="column" [filter]="filter" [filterService]="filterService"
          [extra]="false"
          operator="eq"
        >
        </kendo-grid-date-filter-menu>

    </ng-template>
</kendo-grid-column>

Grid