Questions on Kendo UI for Angular Forum

5 answers

1.9K+ views

Can we please have a simpler solution for scrollable options

Hi all,

I'm getting so frustrated with your scrollable options on the grid.
It seems to get horizontal scrolling to work we must set the width of the grid which has to be less that the total width of all the columns?
How am we supposed to get that to work when we have column selectors and users are adding and removing columns?
How the hell am I supposed to know the width of the grid when I want it to to expand to 100% width of the container?

Is it not possible for you guys to calculate the width after render, compare this to the parent div and then decide whether or not to implement a horizontal scroll?

A stackable option would be great so on a mobile device columns will stack with a container border around each row.
But let's just get the horizontal scroll sorted first, I have so many customers where the end of the grid simply disappears behind the container div.

Please help, your grid is way ahead of the competition for functionality but way behind in terms of responsive options. The media-width stuff just causes even more work and confusion, I tried but had to pull it out after a lot of work and a lot of complaints.

BTW - well done on the forum, it's coming along nicely...

Cheers,
Bob

Grid

answered on 17 May 2021

4 answers

2.3K+ 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

627 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

224 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.3K+ 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

519 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

246 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.2K+ views

[Solved] 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

471 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>

Any help is really appreciated.

Thanks

Hirankumar

Grid

asked on 12 May 2021