Telerik Forums
Kendo UI for Angular Forum
1 answer
19 views

Hi,

I have a grid with a datasource, where I have a year field (date) and set it's value like this (this is just a sample data):


year: new Date(2021, 0, 1)


On this column I have this filtering:


<kendo-grid-column field="year" title="Év" format="yyyy">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-date-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter"
          activeView="decade"
          bottomView="decade"
          format="yyyy"
        >
        </kendo-grid-date-filter-cell>
      </ng-template>
    </kendo-grid-column>

As you see, the filter component is limited to year view/selection.  If I select in the filter 2021, I get no record:

But if I type the value in the editor, I get the right results:

How could I get this working with the filter selection too? Why is this behaviour?

 

Thanks.

 

Hetali
Telerik team
 updated answer on 22 Oct 2021
0 answers
2 views

How to set the position of the chart tooltip. the problem is that the tooltip is shown by default next the cursor (on the right), so when we move to the right the mouse will be on the tooltip thus the value will not be changed

Thanks

<kendo-chart>

...

<kendo-chart-tooltip >
<ng-template kendoChartSharedTooltipTemplate>

..
</ng-template>
</kendo-chart-tooltip>

</kendo-chart>

 

Smail
Top achievements
Rank 1
 asked on 22 Oct 2021
1 answer
4 views

I am opening a popup window using kendo window service to display a component,

I want to implement resolver so I will have data before displaying the component.

How can I do this with kendo window service?

Thanks!

Dimiter Topalov
Telerik team
 answered on 22 Oct 2021
0 answers
2 views

Hello Team,

We are using the Kendo drawing library(drawDom and exportPDF methods) for PDF export in Angular 12. We can have multiple charts and grids that can be dynamically added to be downloaded as PDF and these charts and grids can be further customized by end user. So this has to be handled from client-side only. 

When we are trying to export to PDF, the process is very slow. On debugging, we observed that the exportPDF method is taking a lot of time to complete its execution.

Please suggest if there are any ways/work-arounds by which we can achieve some performance improvement in the PDF export.

Soumalya
Top achievements
Rank 1
Iron
 asked on 22 Oct 2021
1 answer
5 views

Hi

I have tried without succes to define column witdth in % ? Could you help me ?

Regards


  <kendo-grid-column field="date" title="{{'page.column.date' | translate | titlecase}}" [width]="25%"></kendo-grid-column>

Hetali
Telerik team
 answered on 21 Oct 2021
0 answers
2 views

Hello!
I've checked Scheduler docs + forum but couldn't find the answer for my question.

Does Month View support:
1) indicating/styling current day
2) indicating/styling days that are out of current month

Thanks in advance!

Mykhailo
Top achievements
Rank 1
 asked on 21 Oct 2021
1 answer
4 views

Hello everyone, I'm having troubles understanding how to change the background color of a row when one of the (required) values of its cells is invalid

Code:

<kendo-grid
        #grid
        [kendoGridBinding]="kgData"
        [sortable]="true"
        [pageable]="!kgHasOrdernumField"
        [pageSize]="kgHasOrdernumField ? 1000 : 5"
        [rowClass]="kgRowCallback"
        (add)="kgAddHandler($event)"


        (cancel)="kgCancelHandler($event)"
        (save)="kgSaveHandler($event)"
        >
        <!-- BUTTONS -->
        <ng-template kendoGridToolbarTemplate>
          <button kendoGridAddCommand [hidden]="kgTemplateButtonsHidden">
            Add
          </button>
          <!-- Button disabled when there's no data to send OR one of them contains an invalid value -->
          <button class="k-button" [hidden]="kgTemplateButtonsHidden" [disabled]="kgDataToSend.length == 0 || (kgDataToSend.length != 0 && kgInvalidFields.length != 0)" (click)="kgSendData()">
            Save
          </button>
          <span style="width:10px"></span> <b>*</b> fields are mandatory
 
        </ng-template>

        <!-- HEADERS -->
        <kendo-grid-column *ngFor="let col of columnInfoArray" [field]="col.fieldname" [title]="col.mandatory ? col.description + '*' : col.description" [hidden]="col.fieldname === 'id'">
          <ng-template
            kendoGridCellTemplate
            let-dataItem
            let-rowIndex="rowIndex">
              <!--! NUMBER  -->
              <!--
                decimals: do not allow the user to type , and . when focused
                format n0: do not put commas when the input is not focused
                autocorrect: prevent insertion of invalid values
                disabled: disable ordernum
              -->
              <kendo-numerictextbox
                *ngIf="col.configtype === 'int'"
                [disabled]="col.fieldname=='ordernum'"
                kendoGridFocusable
                [decimals]="0"
                format="n0"
                [min]="1"
                [autoCorrect]="kgAutoCorrect"
                [value]="dataItem[col.fieldname]"
                (valueChange)="kgUpdateValue(col,rowIndex,dataItem,$event)"
                ></kendo-numerictextbox>
              <!--! SELECT  -->
              <!--
                [data]: the array of options, textField and valueField access the properties of the objects contained inside the array
                [value]: gets the default value based on the fieldname and the value
              -->
              <kendo-dropdownlist
                *ngIf="col.configtype === 'combo'"
                kendoGridFocusable
                [data]='kgSelectOptions[col.fieldname]'
                textField='label'
                valueField='value'
                [value]='kgGetDefaultOption(col.fieldname,dataItem[col.fieldname])'
                (valueChange)="kgUpdateValue(col,rowIndex,dataItem,$event)"
                ></kendo-dropdownlist>
              <!--! CHECKBOX  -->
              <input
                *ngIf="col.configtype === 'bool'"
                type="checkbox"
                kendoGridFocusable
                kendoCheckBox
                [checked]="dataItem.deleted"
                (input)="kgUpdateValue(col,rowIndex,dataItem,$event)"/>
              <!--! STRING  -->
              <input
                *ngIf="col.configtype === 'string'"
                kendoGridFocusable
                [value]="kgGetValue(dataItem[col.fieldname])"
                (input)="kgUpdateValue(col,rowIndex,dataItem,$event)"/>
          </ng-template>
        </kendo-grid-column>
        <!--# COMANDI NUOVA RIGA -->
        <kendo-grid-command-column title="Comandi" [hidden]="!kgTemplateButtonsHidden">
          <ng-template kendoGridCellTemplate let-isNew="isNew">
            <button *ngIf="isNew" kendoGridSaveCommand [disabled]="!kgNewRowValid" class="k-button">Confirm</button>
            <button *ngIf="isNew" kendoGridCancelCommand class="k-button">Cancel</button>
          </ng-template>
        </kendo-grid-command-column>
      </kendo-grid>

 Using the suggested rowClass method doesn't work as intended


kgRowCallback = (context: RowClassArgs) => {
    return { invalid: !this.kgValidateValue(context.dataItem) }
  }


I get different results based on the css selector, but none of them modifies ONLY the affected row
tr.invalid, tr.invalid:hover {
  background-color: rgba(255, 99, 88, 0.2);
}

Gives me this: 


Whereas this (which was suggested here: https://stackoverflow.com/questions/54553443/)

.k-grid tr.invalid, .k-grid tr.invalid:hover {
  background-color: rgba(255, 99, 88, 0.2);
}

Gives me this

 

What did I do wrong?

Marco
Top achievements
Rank 1
Iron
 answered on 21 Oct 2021
1 answer
4 views

I want to handle what happens after this REMOVE URL is called... I want to then get the file list and re bind it to the upload control..

How do I do this ?

 

 deleteAttachmentKendo(e: RemoveEvent): void {
    console.log(`Removing ${e.files[0].name}`);
    const myFile: MyFileInfo = <MyFileInfo>e.files[0];
    e.data = {
      attachmentIdPost: myFile.attachmentId
    };
    this.getFiles(this.currentOrder.id);
  }
Martin
Telerik team
 answered on 21 Oct 2021
1 answer
7 views

Hi,

 

I look for converting an Kendo AngularJS application with "theme_withe.css" to Angular12 with bootstrap5 and scss files.

Which is best bootstrap5 theme to converting application

 

Regards

Missing User
 answered on 20 Oct 2021
1 answer
8 views

I have a donut chart with rounded ends in Kendo UI for jQuery running exactly as the client wants. However, I need this to be using Kendo UI for Angular instead. I believe this is supported if I use Drawing Visuals, but I can't figure out how to port over what I have for my jQuery version into the Angular version.

My working stackblitz of the jQuery donut is here: https://stackblitz.com/edit/web-platform-szmuv9

My Angular version that I am trying to work on is here:

https://stackblitz.com/edit/angular-bi2dsw

My app.component.ts:


@Component({
selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate
                       let-value="value" let-category="category" let-series="series">
              {{ category }} ({{ series.name }}): {{ value }}%
          </ng-template>
        </kendo-chart-tooltip>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor="let series of model; let outermost = last;"
                                   type="donut" [startAngle]="90"
                                   [holeSize]="60" [margin]="10"
                                   [name]="series.name" [data]="series.data"
                                   field="value" categoryField="category" colorField="color">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `,
})

the tempdata.ts file:


export const tempdata = [
  {
    data: [
      {
        category: 'demand',
        value: '75%',
        color: '#009a8c',
      },
      {
        category: 'late',
        value: '25%',
        color: '#e31b23',
      },
    ],
  },
  {
    data: [
      {
        category: 'All',
        value: 500,
        color: '#065aa3',
      },
    ],
  },
];

I am going through your API references as well (https://www.telerik.com/kendo-angular-ui/components/drawing/api/), but haven't had much luck.  Can anyone help point me in the right direction?


Yanmario
Telerik team
 answered on 20 Oct 2021
Top users last month
JG
Top achievements
Rank 2
Iron
ixen
Top achievements
Rank 1
Iron
Iron
Iron
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Roland
Top achievements
Rank 1
Veteran
Iron
SK
Top achievements
Rank 1
Iron