Telerik Forums
Kendo UI for Angular Forum
1 answer
115 views

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

 

 

Svet
Telerik team
 answered on 27 Dec 2021
1 answer
229 views
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?
Yanmario
Telerik team
 answered on 24 Dec 2021
1 answer
94 views

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;
}
Hetali
Telerik team
 answered on 23 Dec 2021
0 answers
97 views
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.
Vadim
Top achievements
Rank 1
 asked on 23 Dec 2021
1 answer
171 views

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
Adil
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 23 Dec 2021
1 answer
141 views

 

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>
Valentin
Telerik team
 answered on 22 Dec 2021
1 answer
103 views

How do I style Ordered and Unordered List bullets or numbers? I can't change a bullet or number colour using Toolbar buttons.

Yanmario
Telerik team
 answered on 22 Dec 2021
0 answers
126 views

Hi,

Is there any possible way to implement more(...)  option in week view when there are more than 2 events in same time slot(similar to month view).

Please find the attached image for reference.

 

Regards,

Shabana

shabana
Top achievements
Rank 1
 asked on 22 Dec 2021
2 answers
920 views

Hi

In my use case, I'd like to have two drawers in one drawer-container, one left, one right, with different "mode". If the left one has push mode, and the right has overlay, then the right drawer doesn't work well.

 

This may be a feature request more than a bug report. Is there currently any solution for this use case? Has this kind of feature been considered for the roadmap?

 

Thanks

Xuesong

Noah
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 21 Dec 2021
3 answers
7.5K+ views

Hi,

I am grabbing my data with the grid built-in directive and all filters work fine except for the date filter.

My grid template looks something like this:

<kendo-grid
[kendoGridBinding]="data | async"
[height]="800"
[pageSize]="15"
[sortable]="true"
[pageable]="true"
[filterable]="true"
[scrollable]="true"
[resizable]="true"
>
<kendo-grid-column [hidden]="true" field="ID" title="ID" [width]="10"></kendo-grid-column>

<kendo-grid-column field="SCHEDULED_DATE" title="Scheduled Date" [width]="120" filter="date" format="{0:d}"
[headerStyle]="{'line-height': '1.5em', 'font-size':'13px', 'text-overflow': 'clip', 'overflow': 'visible',
'white-space': 'normal', 'line-height': 'normal', 'text-align': 'center'}">
</kendo-grid-column>

 

My returned data is in json and the query to get looks like this:

select id, to_char(sched_dt,'MM/DD/YYYY') as scheduled_date from tasks_table;

 

How can I make it to work?

Thanks,

Carla

 

Jan
Top achievements
Rank 1
Iron
 answered on 21 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?