or
0 answers
71 views
Issue:
Sortable columns in Kendo Grid show inconsistent background color styling between scrollable and non-scrollable modes due to differences in how the DOM is rendered: https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes#scrollable-mode
- Scrollable Mode: Background color is applied to all cells (
<th>and<td>) in the sortable column. - Non-Scrollable Mode: Background color is applied only to the header cell (
<th>).
Expected Behavior:
The background color should apply uniformly to all cells (<th> and <td>) in sortable columns, regardless of the scrolling mode.
Actual Behavior:
- In scrollable grids, the background color is applied to all cells in the sortable column.
- In non-scrollable grids, the background color is applied only to the header cell.
Question:
Is there a way to ensure uniform background color styling for all cells (<th> and <td>) in sortable columns, regardless of the scrolling mode, through built-in configuration or a recommended workaround?
Steps to Reproduce:
- Create a Kendo Grid with sortable columns.
- Enable scrolling for one grid (default behavior) and disable it for another.
Link to ReproduceÖ‰ https://stackblitz.com/edit/angular-axcc1j?file=src%2Fapp%2Fapp.component.ts
Environment:
Kendo UI version: ^16.8.0
Angular version: ^18.2.0
Anna
Top achievements
Rank 1
Rank 1
updated question
on
25 Nov 2024
0 answers
126 views
hi, I want the scroll bar to always be visible. It appears when I start scrolling, but I want it to always be visible.
so #scheduler .k-scheduler-content {
overflow-y: scroll;
} this isn't working
please give some exaple on schedule timeline view
ikram
Top achievements
Rank 1
Iron
Rank 1
Iron
updated question
on
20 Oct 2024
0 answers
62 views
Here is my defaultGridSettings code. I wanted to auto scroll paging for the grid with back end api call. But the onDataLoad() function is not invoking when I scroll down. It is only fired once at the initial page load. So I am unable to load subsequent data (next) with scrolling the grid.
protected setDefaultGridSettings() {
this.gridOptions = {
height: "100%",
allowCopy: false,
sortable: {
mode: "multiple",
allowUnsort: true
},
resizable: true,
columnMenu: true,
filterable: true,
scrollable: {
virtual: true
},
noRecords: {
template: require("../../common/templates/GridEmptyState.html")
},
edit: !this.readonlyAccess ? this.editOnchange.bind(this) : null,
cancel: this.cancelChange.bind(this),
columns: [
{ field: `id`, hidden: true, filterable: false, sortable: false, menu: false },
{
field: `sellerName`, title: `Seller Name`,
filterable: {
multi: true,
search: true
}
},
{
field: `marketPlace`,
title: `Marketplace`,
filterable: {
multi: true,
search: true
},
editor: this.marketPlaceEditor.bind(this),
template: `# if(marketPlace){ # #=marketPlace# #} else {# #=marketPlace||""# #} #`,
},
{ field: `phoneNumber`, title: `Phone Number`, filterable: false },
{ field: `emailAddress`, title: `Email Address`, filterable: false },
{ field: `physicalAddress`, title: `Physical Address`, filterable: false },
{
field: `partnerType`,
title: `Partner Type`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.partnerTypeEditor.bind(this),
width: "200px",
template: `# if(partnerType){ # #=partnerType# #} else {# #=partnerType||""# #} #`,
},
{
field: `sellerType`,
title: `Authorization`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.authorizationTypeEditor.bind(this),
template: `# if(sellerType){ # #=sellerType# #} else {# #=sellerType||""# #} #`
},
{
field: `sellerCategory`,
title: `Category`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.categoryTypeEditor.bind(this),
template: `# if(sellerCategory){ # #=sellerCategory# #} else {# #=sellerCategory||""# #} #`
},
{
field: `tag`,
title: `Auto-Tag`,
filterable: {
multi: true,
search: true
},
hidden: false,
editor: this.tagEditor.bind(this),
template: `# if(tag){ if(tag == 'Benign') {# #=tag# #} else {# #=tag# #} } else {# #=tag||""# #} #`
},
// {command: ["edit", "destroy"], title: "Actions", width: "270px", menu:false},
{
command: [{
name: "edit",
template: "<a class='k-grid-edit command-edit glyphicon glyphicon-pencil'></a>"
}, {
name: "destroy",
template: "<a class=' k-grid-delete command-delete glyphicon glyphicon-trash danger'></a>"
}], title: "Actions", menu: false, width: "120px"
}
] as kendo.ui.GridColumn[],
editable: "inline",
dataSource: {
serverSorting: true,
serverFiltering: true,
serverPaging: true,
pageSize: 500,
transport: {
read: this.onDataLoad.bind(this),
update: (options => {
let tag = "";
if (options.data.tag instanceof Object) {
tag = options.data.tag.id;
} else if (tag !== "") {
tag = (this.tagOptions.filter(x => options.data.tag === x.text))[0].id;
}
this.addButton = false;
const sellerList: ISeller[] = [{
id: options.data.id,
sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
marketPlace: options.data.marketPlace,
phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
sellerType: options.data.sellerType,
sellerCategory: options.data.sellerCategory,
partnerType: options.data.partnerType,
tag: tag ? tag : options.data.tag
}];
this.sellerViewDataService.updateSeller(sellerList).subscribe(response => {
if (response.success) {
options.success(sellerList);
this.grid.kendoGrid.dataSource.read();
} else {
options.error(null);
this.alertDialog.show(response.messages);
}
},
error => {
options.error(null);
this.alertDialog.show(error.messages);
});
}).bind(this),
destroy: (options => {
this.addButton = false;
const sellerList: ISeller[] = [{
id: options.data.id,
sellerName: options.data.sellerName,
marketPlace: options.data.marketPlace
}];
this.sellerViewDataService.deleteSeller(sellerList).subscribe(response => {
if (response.success) {
options.success(null);
} else {
options.error(options.data);
this.alertDialog.show(response.messages);
this.grid.kendoGrid.dataSource.read();
}
},
error => {
options.error(options.data);
this.alertDialog.show(error.messages);
this.grid.kendoGrid.dataSource.read();
;
});
}).bind(this),
create: (options => {
this.addButton = false;
const sellerList: ISeller[] = [{
sellerName: options.data.sellerName ? (options.data.sellerName).trim() : options.data.sellerName,
marketPlace: options.data.marketPlace,
phoneNumber: options.data.phoneNumber ? (options.data.phoneNumber).trim() : options.data.phoneNumber,
emailAddress: options.data.emailAddress ? (options.data.emailAddress).trim() : options.data.emailAddress,
physicalAddress: options.data.physicalAddress ? (options.data.physicalAddress).trim() : options.data.physicalAddress,
sellerType: options.data.sellerType,
sellerCategory: options.data.sellerCategory,
partnerType: options.data.partnerType,
tag: options.data.tag
}];
this.sellerViewDataService.addSeller(sellerList).subscribe(response => {
if (response.success) {
options.success(sellerList);
this.grid.kendoGrid.dataSource.read();
} else {
options.error(null);
this.alertDialog.show(response.messages);
}
},
error => {
options.error(null);
this.alertDialog.show(error.messages);
});
}).bind(this),
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return JSON.stringify({ data: options });
}
}
},
schema: SellerTrackingViewSourceSchema,
// change: this.countSeller.bind(this)
},
change: this.onGridChange.bind(this),
dataBound: this.onGridDataBound.bind(this),
reorderable: true,
selectable: "multiple row",
navigatable: false,
columnMenuOpen: (field) => {
this.selectColumnReorderController.bind(field, this.grid);
}
};
}
Tanvir
Top achievements
Rank 1
Rank 1
updated question
on
29 May 2024
1 answer
80 views
When I select the "selectAll" checkbox, only the quantity number from the "pageSize" property is selected. When I scroll through the grid, the new visible rows are not selected and the previous rows are no longer selected.
Here is an example of a stackblitz:
https://stackblitz.com/edit/angular-tybn6w?file=src%2Fapp%2Fapp.component.ts
Martin Bechev
Telerik team
answered
on
08 Jan 2024
1 answer
333 views
Hi,
I have 2 queries on multiselect using drag selection.
1. When 'Multiple' option is set to 'false' in SelectableSettings of Treelist, auto scrolling happens when we reach the end of treelist visible in viewport.
When 'Multiple' option is set to 'true' in SelectableSettings of Treelist and multiple rows are selected using drag selection, auto scrolling not working. we need to use the mouse wheel to scroll through the treelist. Is there a way to make auto scrolling work while selecting multiple rows?
can be replicated in below example too.
https://www.telerik.com/kendo-angular-ui/components/treelist/selection/
in this example, disable 'Multiple'. Do a drag selection, auto scroll works as we move down
Enable 'Multiple' option, auto scroll does not work as we move down.
2. When selecting multiple rows using mouse drag selection and scroll(using mouse wheel), the marquee selection also moves along with that, but when the drag selection is released all the rows(even which are not in the viewport) are selected. Do we have any fixes planned for this?
https://www.telerik.com/kendo-angular-ui/components/treelist/selection/
here when we enable 'Multiple' option and do a drag selection while scrolling using mouse wheel, Marquee rectangle moves and covers only the rows displayed in viewport. after releasing drag selection, we could see that all rows which are not visible in view port are also selected.
Martin Bechev
Telerik team
answered
on
03 Feb 2023
0 answers
141 views
Hello,
Is there a way to disable the Scrollview's swipe on mobile? We have a Scrollview inside of another Scrollview. We are wanting to stop the main Scrollview from moving, so the additional Scrollview does not try to move along with the main Scrollview.
Please let me know if you need additional information, and I will get back to you as soon as possible, thank you in advance.
Bryant
Top achievements
Rank 1
Rank 1
asked
on
14 May 2022
1 answer
501 views
Hello,
I've been working towards creating a scrollview with content inside of the div area. Some information fits, however, when scrolling to new information the scrollview does not allow for height: auto;
below is an example of what my code looks like. I am needing to replace the height with an auto height, to make sure that the content that displays is viewable regardless of the height.
<kendo-scrollview class="scrollview addr-height" [data]="AddressData" [width]="'100%'" [height]="'500px'" [endless]="true" [arrows]="true">
<ng-template let-item="item">
<kendo-card-panel>
<div header>
<strong><span>{{ AddressData.indexOf(item) + 1 }} / {{ AddressData.length }}</span></strong>
<button class="btn" (click)="selectAddress(item)">Ok</button>
</div>
<div always-display class="addr-block">
<div class="row">
<label class="col-6">Address Type: </label>
<label class="col-6">{{ item.ADDRESS_TYPE }}</label>
</div>
<div class="row">
<label class="col-6">Address: </label>
<label class="col-6">{{ item.ADDRESS_LINE_1 }}<br>{{ item.ADDRESS_LINE_2 }}</label>
</div>
<div class="row">
<label class="col-6">Primary: </label>
<label class="col-6">
<kendo-checkbox [(ngModel)]="item.PRIMARY_ADDRESS" [valuePrimitive]="true" [disabled]="true"></kendo-checkbox>
</label>
</div>
<div class="row">
<label class="col-6">Admin Contact: </label>
<label class="col-6">{{ item.ADMIN_CONTACT }}</label>
</div>
<div class="row">
<label class="col-6">Billing Contact: </label>
<label class="col-6">{{ item.BILLING_CONTACT }}</label>
</div>
<div class="row">
<label class="col-6">Phone: </label>
<label class="col-6">{{ item.PHONE }}</label>
</div>
<div class="row">
<label class="col-6">Fax: </label>
<label class="col-6">{{ item.FAX }}</label>
</div>
</div>
</kendo-card-panel>
</ng-template>
</kendo-scrollview>
Please let me know if you have more questions, as this is throwing me for a loop. Unfortunately, I am a new designer, and my coding skills are not yet what they need to be. I am assuming that this can be corrected inside of the TypeScript/JavaScript files.
Preslava
Telerik team
answered
on
02 May 2022
1 answer
327 views
I have a Scroll view component displaying a lot of images one by one (whenever you click the next or previous button the image changes) and i've been wondering : Is it possible to Force Scrolling to a Selected Element without clicking on the next/previuos button . I mean i can create a button (not related to the Kendo Scroll but related to one of the images) and whenever i click, it will scrolll automatically to that image. It is possible with Kendo for JQUERY when Handling the change event but i haven't found anything for angular.
Valentin
Telerik team
answered
on
08 Apr 2022
1 answer
133 views
alos when endless scrolling enabled. Do we need to implement from Backend side ? Is there any examples available to check ?
Thanks.
Svet
Telerik team
answered
on
12 May 2021
1 answer
129 views
going from 3.24.0 to 3.25.0 in the material theme causes the scrollview images to be visible off to the sides of the viewer. You can see this in your demo site.
Svet
Telerik team
answered
on
18 Dec 2020
