Questions on Kendo UI for Angular Forum

0 answers

146 views

convert Kendo CSS JS/JQUERY to ANGULAR12 CSS

Hi

Could i migrate an JS/Jquery Kendo CSS to an Angular12 CSS easily ?

Could i use theme Builder to make it ?

Regards

General Discussions

Scheduler

asked on 26 Oct 2021

0 answers

117 views

Possibility to remove focus from "Select font size" option on mouse click

Hello,

I'm wondering if there is a possibility to remove focus from "Select font size" option by clicking on "Select font size" dropdown in Editor. At the same time, the focus should remain on keyboard navigation. Is there such a possibility in kendo?

Thanks in advance!

UPD: please disregard, the requirements were changed. The question is not relevant anymore.

Editor

ToolBar

updated question on 26 Oct 2021

1 answer

146 views

[Solved] Month View, current date/days out of month indication?

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!

Scheduler

answered on 25 Oct 2021

1 answer

667 views

Export to PDF too slow

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.

Drawing

PDF Export

answered on 25 Oct 2021

1 answer

1.1K+ views

filter date column with year

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.

DatePicker

Grid

updated answer on 22 Oct 2021

1 answer

177 views

Window Service and Resolver

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!

Window

answered on 22 Oct 2021

1 answer

172 views

grid column with %

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>

Grid

answered on 21 Oct 2021

1 answer

989 views

[Solved] Change row background based on validity of data

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?

Grid

answered on 21 Oct 2021

1 answer

137 views

Where is the callback event handler after a file is deleted from this.apiRemoveUrl ?

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);
  }