Questions on Kendo UI for Angular Forum

3 answers

608 views

I just upgraded our project to the latest version of Kendo UI and the Material theme. I noticed that action buttons (<kendo-dialog-actions layout="normal">) are now aligned with the left side of the dialog, when they were previously to the right. I see they are left-aligned at https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/action-buttons/ as well. It looks a little odd to me. Was this intentional (reflecting changes to Material Design), or have I missed something during the upgrade?

Button

Dialog

answered on 21 Jul 2022

0 answers

149 views

With latest update our application UI breaks

Hi,

After updating kendo angular components to latest versions. Margins, paddings and combobox colors are being changed. I suspect this could be because of the new css classes that kendo team has updated in their css. Please let us know what could be the exact reason for this and what's the best way to fix these issues. Please suggest also how these kind of issues can be avoided with future updates.

Thanks & Regards,

Ankit

General Discussions

asked on 21 Jul 2022

1 answer

612 views

Kendo Angular Grid Pager Button Title/Tooltips

Is it possible to customize the titles/tootips and look/color for a grids pagination buttons (First, Previous, Next, Last)? I'd like it ot matach the look and feel of other tooltips we have in our application.

Grid

Pager

Styling

answered on 18 Jul 2022

0 answers

140 views

Grid Data paging problem after filter

Hi,

I have grid and from outside i have texbox when i write something in textbox i can filter my grid but when i remove text in texbox i try to bind all data and i can do it but grid cannot do paging. First grid collect all data in page one when i press page number data paging works normally as expected.

Here my grid and textbox and also mt ts file for onFilter function

<kendo-grid #gridDetailDocuments [kendoGridBinding]="lines" [resizable]="true" [reorderable]="true" [selectable]="true"
            [columnMenu]="true" filterable="menu"  sortable="true"
             [autoSize]="true" height="600" scrollable="true" [pageSize]="pageSize"
            [skip]="skip" [groupable]="true" 
            [pageable]="{
                          buttonCount: buttonCount,
                          info: info,
                          type: type,
                          pageSizes: pageSizes,
                          previousNext: previousNext,
                          position: position
                        }">
            <ng-template kendoGridToolbarTemplate>
              <label class="text-primary">{{ "STRINGS.SEARCH" | translate }} : </label>
              <div class="form-group">
                <div class="col-12">
                  <input placeholder="{{ 'STRINGS.STOCK_OR_BARCODE' | translate }}"
                  (input)="onFilter($event.target.value)" class="form-control form-control-sm"/> 
                </div>
              </div>
              <kendo-grid-spacer></kendo-grid-spacer>
            </ng-template>
            <kendo-grid-column field="lineNum" width="80" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.LINE" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockCode" media="sm" width="100">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.ITEM" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockBarcode" media="sm" width="200">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.BARCODE" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockDescription" media="sm" width="120">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.DESCRIPTION" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineQuantity" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.QUANTITY" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineQuantity | number }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockUM" media="sm" width="100">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.UM" | translate }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="stockUnitPrice" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.UNIT_PRICE" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.stockUnitPrice | prxCurrency }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineAmount" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.AMOUNT" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineAmount | prxCurrency }}
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineDiscount" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.LINE_DISCOUNT" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineDiscount | number }}%
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="lineExpiryDate" media="sm" width="100" filter="numeric">
              <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                {{ "STRINGS.EXPIRY_DATE" | translate }}
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.lineExpiryDate | date:'yyyy-MM-dd' }}
              </ng-template>
            </kendo-grid-column>
          </kendo-grid>

public onFilter(inputValue: string): void {
    if(inputValue == ""){
      this.grid.data = process(this.lines.slice(this.skip, this.skip + this.pageSize), {group: this. groups}).data;
    }
    else{
      this.grid.data = process(this.lines.slice(this.skip, this.skip + this.pageSize), {
        filter: {
          logic: 'or',
          filters: [
            {
              field: 'stockCode',
              operator: 'contains',
              value: inputValue,
            },
            {
              field: 'stockBarcode',
              operator: 'contains',
              value: inputValue,
            },
            {
              field: 'stockDescription',
              operator: 'contains',
              value: inputValue,
            }
          ],
        }, group: this. groups
      }).data;
    }
  }

Grid

asked on 17 Jul 2022

0 answers

160 views

configure parse-date.js in Intl Service

Hi,

We are using the "kendo-calendar" in our application and are using IntlService.parseDate for parsing dates. This function ignores the twoDigitYearMax setting as the year 2029 is hardcoded in it. That means that any dates from 2030 and onward will be treated as 1930 and onward instead (when input using a 2-digits format mask)

Given that 2030 is soon (noticeably closer than 1930), some of our customers are already entering delivery dates for that year.

The constant TWO_DIGIT_YEAR_MAX = 2029 in kendo-intl/src/dates/parse-date.js should be made configurable instead to avoid those problems.

IS there any possible way to achieve this?

Calendar

DateInput

DatePicker

asked on 14 Jul 2022

1 answer

137 views

Telerik single page application templates/samples

Is there any Sample angular applications with login feature ,Menus and Kendo angular grid implemented ?

Grid

answered on 12 Jul 2022

0 answers

156 views

How to disable the main screen when Kendo window is opened?

Hi,

I have a feature, where when a button is clicked kendo-window will opened. Now I want to disable the main screen till the kendo-window is closed. Is there any way to achieve this?

Thanks,

Jayashree

asked on 12 Jul 2022

1 answer

285 views

Grid > Export PDF > Sticky Column malformed

When I export a PDF from a Grid component when I have the 1st column set to [sticky]="true"...

The exported PDF that is set to paperSize="auto", has the 1st sticky column stuck on the far right (over the last column).

I am not sure why, but all the other columns are correct in the PDF file.

<kendo-grid-column 
        title="Vehicle Details" 
        field="year"
        [width]="250" 
        [filterable]="false"
        [autoSize]="true"
        [sticky]="true"
        media="(min-width: 600px)"
>...

<kendo-grid-pdf
        fileName="floorplan-vehicle.pdf"
        [allPages]="true"
        paperSize="auto"
        [repeatHeaders]="true"
        [landscape]="true"
      >
</kendo-grid-pdf>

[Please see the attached screenshot]

Help please?

Grid

PDF Export

answered on 11 Jul 2022

1 answer

2.4K+ views

Angular Grid - Paging and Filtering issue

Hi,

I'm using a kendo angular grid. For some reason when i filter on a page (other than page 1) it isn't resetting to page 1. Therefore if i filter for something on page 5 for example and there is only one result, the grid appears empty and i'm having to click page 1 to show the row. I'd have thought this should work out-of-the-box or am I required to write some code to reset the paging whenever a fitler is applied?

Using version:

"@progress/kendo-angular-grid": "6.0.1",

Thanks

Grid

answered on 08 Jul 2022

1 answer

230 views

console.log forgotten in charts

Hello,

There is a console.log in kendo-angular-charts.js file line 814. It's triggered when shared popup open on chart.

version: @progress/kendo-angular-charts": "7.1.0"

See below:

position(offset) {
        if (!this.popupSettings || !this.popupSettings.appendTo) {
            return offset;
        }
        const appendTo = this.popupSettings.appendTo.element.nativeElement;
        console.log('appendTo', appendTo); // HERE

        const bbox = appendTo.getBoundingClientRect();
        const { scrollLeft, scrollTop } = this.scrollOffset(appendTo);
        return {
            left: offset.left - bbox.left - scrollLeft,
            top: offset.top - bbox.top - scrollTop
        };
    }

Charts

answered on 08 Jul 2022