Questions on Kendo UI for Angular Forum

4 answers

2.2K+ views

Filtering KendoGrid with virtual scrolling on.

There seems to be a bug when filtering the grid with virtual scrolling. Everything works fine if I apply the filter before scrolling through the grid.

Now failed scenario:

1. Scroll to the very bottom of the grid.

2. Apply filter.

Result - nothing shows up. Unless you scroll, then the records magically appear. Setting skip to 0 after filtering does nothing, skip = 1 works sometimes.

Fun fact: if filtered item list does not exceed the maximum number of rows in the actual grid view, there is no way to make them display.

Is there a way to bypass this issue? Am I doing something wrong?

https://kendo-grid-checkall-kjuhaw.stackblitz.io

https://stackblitz.com/edit/kendo-grid-checkall-kjuhaw?file=app

Grid

answered on 17 May 2021

1 answer

1.3K+ views

TypeError: Object(...) is not a function at Module node_modules/@progress/kendo-angular-intl/dist/fesm5/index.js

Hi ,

I'm using Kendo with angular 7.2.0 but getting this error -

TypeError: Object(...) is not a function at Module node_modules/@progress/kendo-angular-intl/dist/fesm5/index.js.

I also tried downloading the specific versions for the same using -ng add @progress/kendo-angular-grid@ng7 but getting errors like module not found or No matching version found.

Please help me with this issue.

Thank you.

Grid

answered on 17 May 2021

1 answer

569 views

HTML special chars in combobox as textField

Hi

I have problem with HTML codes in combobox. Trying display = and select = or = but in field is string, not symbol. In list this not working too, I used kendoComboBoxItemTemplate and put HTML code in span but I can't display this sign. My data are like this:

data = {
name: 'name',
id: 'number',
display: '$#61;'
}

ComboBox

answered on 17 May 2021

0 answers

190 views

Auto-Generated grid with multiselect of inline editing?

Hello,

I am building an dynamic rendering kendo grid with in line editing functionality. I'm able to achieve for single select of inline editing using DropDownListComponent . I tried to achieve multiselect on one of the column but I can't use the same way with MultiSelectComponent.

The details of the code snippet as attached below and I'm wondering if there's a way to make the 'Test' column MultiSelect dropdown?

Thanks,
Annie

DropDownList

Grid

MultiSelect

updated question on 17 May 2021

1 answer

1.2K+ views

Removing formatting by kendo-numerictextbox

By default the kendo-numerictext box uses the "n3" format. Is there any way to disable formatting? I would like the number displayed to be the number entered by the user.

Thanks!

NumericTextBox

answered on 14 May 2021

0 answers

481 views

Angular kendo grid export excel with images

Hi,

is there a way to export an angular kendo grid excel with images?

Thank you.

Excel Export

Grid

updated question on 13 May 2021

1 answer

200 views

kendoAvatar as kendo-chart-category-axis-item-label

I see the example of providing custom visuals for chart labels using drawing functions (https://www.telerik.com/kendo-angular-ui/components/charts/elements/labels/#toc-rendering-custom-visuals), but how would one go about replacing the axis labels with, say, a kendo avatar or some other kendo component? I can't find an example of that.

Avatar

Charts

answered on 13 May 2021

1 answer

1.1K+ views

How to do a search in a listview kendo angular

How can I do a search bar in the kendo listview ?

ListView

answered on 12 May 2021

0 answers

420 views

Mode of grid paging is changing on tab change.

Hello,

I am using three kendo grids in separate tabs. Paging is using in all three kendo grids. When the page loads, paging is working as expected
However, on tab change mode of paging changed. But if we are going to resize the page, paging will appear. Please see the attached screen shots.

Recently upgraded from Angular 8 to 11. We got this issue after the upgrade.

Angular version: 11.2.3

Kendo UI Grid :

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

 
 <nav ngbNav #nav="ngbNav" type="pills" (navChange)="toggleTabs($event)" class="users_role_managers">
      <ng-container ngbNavItem="tab-1">
        <a ngbNavLink>{{'lblManageUsers' | labelTranslate}}</a>
        <ng-template ngbNavContent>
          <div class="container-fluid product_grid_kendo m-0 mt-4 user_grid_kendo">
            <kendo-grid #kendoGrid1 class="" [data]="manageUsersGridData" [resizable]="true" [scrollable]="'scrollable'"
              [sortable]="true" [filterable]="true" [pageable]="true" [pageSize]="manageUsersGridstate.take"
              [skip]="manageUsersGridstate.skip" [sort]="manageUsersGridstate.sort"
              [filter]="manageUsersGridstate.filter" (dataStateChange)="manageUsersGridDataStateChange($event)">
              <kendo-grid-column field="displayName" title="{{'lblDisplayName' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="pointer mainbg-text-primary" (click)="performCrudOperationOnUser('EDIT', dataItem)">
                    <a>{{ dataItem.displayName}}</a>
                  </div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="email" title="{{'lblEmail' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="userRoles" title="{{'lblRoles' | labelTranslate}}" width="250">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="200">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="160">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
                    [showOperators]="false">
                  </kendo-grid-date-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  {{ dataItem.modifiedOnString }}
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Edit" title="Edit" width="70" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="editicn-trim" (click)="performCrudOperationOnUser('EDIT',dataItem)">
                      <span class="edit_icon pointer ml-15" aria-hidden="true"></span>
                    </span>
                  </div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Delete" title="Delete" width="70" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="delete_icon pointer" aria-hidden="true"
                      (click)="performCrudOperationOnUser('DELETE',dataItem)"></span>
                  </div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </div>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="tab-2">
        <a ngbNavLink>{{'lblManageRoles' | labelTranslate}}</a>
        <ng-template ngbNavContent>
          <div class="container-fluid product_grid_kendo product_grid_kendomng m-0 mt-4 user_grid_kendo">
            <kendo-grid #kendoGrid class="" [data]="manageRolesGridData" [resizable]="true" [scrollable]="'scrollable'"
              [sortable]="true" [filterable]="true" [pageable]="true" [pageSize]="manageRolesGridstate.take"
              [skip]="manageRolesGridstate.skip" [sort]="manageRolesGridstate.sort"
              [filter]="manageRolesGridstate.filter" (dataStateChange)="dataStateChange($event)">
              <kendo-grid-column field="roleName" title="{{'lblRoleName' | labelTranslate}}" width="">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="300">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="180">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
                    [showOperators]="false">
                  </kendo-grid-date-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  {{ dataItem.modifiedOnString }}
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Edit" title="Edit" width="80" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="editicn-trim" (click)="performCrudOperationonRole('EDIT',dataItem)">
                      <span class="edit_icon pointer ml-15" aria-hidden="true"></span>
                    </span>
                  </div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Delete" title="Delete" width="80" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="delete_icon pointer" aria-hidden="true"
                      (click)="performCrudOperationonRole('DELETE',dataItem)"></span>
                  </div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </div>
        </ng-template>
      </ng-container>

      <ng-container ngbNavItem="tab-3" *ngIf="this.kpmgFunctionId===1000 && IsSuperAdmin">
        <a ngbNavLink>{{'lblManageAdministrators' | labelTranslate}}</a>
        <ng-template ngbNavContent>
          <div class="container-fluid product_grid_kendo m-0 mt-4 user_grid_kendo">
            <kendo-grid #kendoGrid class="" [data]="manageSystemUsersGridData" [resizable]="true"
              [scrollable]="'scrollable'" [sortable]="true" [filterable]="true" [pageable]="true"
              [pageSize]="manageSystemUsersGridstate.take" [skip]="manageSystemUsersGridstate.skip"
              [sort]="manageSystemUsersGridstate.sort" [filter]="manageSystemUsersGridstate.filter"
              (dataStateChange)="manageSystemUsersGridDataStateChange($event)">
              <kendo-grid-column field="displayName" title="{{'lblDisplayName' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <!-- <div class="pointer mainbg-text-primary"> -->
                  {{ dataItem.displayName}}
                  <!-- </div> -->
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="email" title="{{'lblEmail' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="200">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="160">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
                    [showOperators]="false">
                  </kendo-grid-date-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  {{ dataItem.modifiedOnString }}
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Delete" title="Delete" width="70" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="delete_icon pointer" aria-hidden="true"
                      (click)="performCrudOperationOnSystenUser('DELETE',dataItem)"></span>
                  </div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </div>
        </ng-template>
      </ng-container>

    </nav>