Questions on Kendo UI for Angular Forum

0 answers

124 views

Hello! I have created a tree for a project that I'm doing but I cannot get the expansion arrows to appear when the web page is loaded. When I go to the web page and click on a folder that has subfolders, then the expand arrows appear. I can't find a solution. I hope you can help me, please. All the best!!

After loading the web page: After clicking the parent folder:

TreeView

asked on 22 Jul 2022

0 answers

324 views

Kendo Angular Server Side Filtering for array column

Hello,

I have a problem for which I cannot find any solution. I have a Kendo grid declared in one of the components in Angular. One of the columns is an array of strings that are displayed together in the column. The filter for this column is a dropdown with possibility to select one of the stringsthat are displayed in these columns.

I'm doing server side filtering for this grid with the .ToDataSourceResult() method. The problem is that when I try to pass the string filter in state, I get (understandably because of mismatching types) an error:

'Invalid cast from 'System.String' to 'System.Collections.Generic.IEnumerable`1[[System.String, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'.'

I cannot find any solution for this problem - I don't know how to make it work so that I can filter an array of strings. Normally in these kind of problems we set the field as the single string with concatenated values from array. But because this particular method is working on IQueryable for better performance, it is not possible.

Below I pass the code for reference:

The backend method:

public DataSourceResult GetAllServices(DataSourceRequest state)
{
var allServices = _serviceRepository.GetServices();

IQueryable<NonDraftServiceDto> mappedAllServices = _mapper.ProjectTo<NonDraftServiceDto(allServices);

return mappedAllServices.ToDataSourceResult(state);
}

Model:

public class NonDraftServiceDto
{
public int Id { get; set; }

public string Service { get; set; }

public IEnumerable<string> Sites { get; set; }
}

Grid in Angular:

<kendo-grid
        [sortable]="true"
        [scrollable]="'none'"
        [selectable]="true"
        [sort]="gridState.sort"
        [data]="allServices"
        [pageSize]="gridState.take"
        [skip]="gridState.skip"
        [pageable]="true"
        [filterable]="true"
        [filter]="gridState.filter"
        (dataStateChange)="dataStateChange($event)">
        <kendo-grid-column
            [filterable]="true"
            field="Service"
            [sortable]="true"
            [title]="Service" 
            [width]="157">
        </kendo-grid-column>
        <kendo-grid-column
          [filterable]="true"
          field="Sites"
          [sortable]="true"
          [title]="Sites" 
          [width]="175">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.Sites}}
          </ng-template>
          <ng-template kendoGridFilterCellTemplate let-filter>
            <app-dropdown-filter #SiteDropdown
              [filter]="filter"
              [data]="dropdownSites"
              textField="DisplayName"
              valueField="DisplayName"
              filterField="Sites"
              operator="contains">
          </app-dropdown-filter>
        </ng-template>
        </kendo-grid-column>
        <kendo-grid-column
            [filterable]="true"
            field="Status"
            [sortable]="true"
            [title]="'service_overview.Status_column_name' | translate: 'Status'" 
            [width]="50">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ returnStatusText(dataItem.Status) }}
            </ng-template>
            <ng-template kendoGridFilterCellTemplate let-filter>
                <app-dropdown-filter
                    [filter]="filter"
                    [data]="statusList"
                    textField="ServiceStatusText"
                    valueField="ServiceStatusText"
                    filterField="Status"
                    operator="eq">
                </app-dropdown-filter>
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

DropDownList

Grid

asked on 21 Jul 2022

3 answers

621 views

[Solved] Dialog action button placement

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

154 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

631 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

146 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

172 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

146 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

161 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

297 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