or
1 answer
124 views
Hello,
i wante to disable drag and drop in my TreeView for specific Elements.
For example, i need something like that:
<ng-template kendoTreeViewNodeTemplate
let-dataItem>
<span class="bold" [disable]="dataItem.name === 'uwe' ? true: false">
{{dataItem.name}}
</span>
</ng-template>
Best regards Nico
Zornitsa
Telerik team
answered
on
31 May 2024
0 answers
84 views
I want to use hierarchical drawer, were in parent component i want to add extra icon (+ icon) next to the drawer text.
expected behaviour is, when i click the (+ icon) the drawer should not get expanded, instead i have to do some other functionality like opening a window/dialog. I want restrict the drawer expansion.
current behaviour: Drawer gets expanded wherever i click , including the (+ icon) .
0 answers
80 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
203 views
I am changing the application theme dynamically on runtime, so when i use kendo button with property "themeColor="primary" , its not taking the dynamic theme colour of the application.
Application theme is default-ocean-blue, but its taking orange colour for button menu.
1 answer
111 views
Hi,
Is there a possibility to give background colour to a weekday in Kendo Scheduler based on some conditions like how we can do it for weekends as seen in the screenshot.. We want to mark holidays in a different colour in the scheduler.
Thanks
Varun
Yanmario
Telerik team
answered
on
29 May 2024
1 answer
73 views
I tried setting the min property to rem, but it didn't work. Then I read that I can use minPixel property to specify a pixel value in Angular 11+, but that doesn't work either.
The min property of the kendo-splitter-pane element works correctly for me only with %, but I need rem or px.
Please provide information about the actual behavior and how you can get the desired result.
The min property of the kendo-splitter-pane element works correctly for me only with %, but I need rem or px.
Please provide information about the actual behavior and how you can get the desired result.
Zornitsa
Telerik team
answered
on
27 May 2024
0 answers
136 views
Is there a way to prevent a groupable kendo grid from indenting and resizing columns when grouping, so that all columns stay the same width and group headers all fill the width of the grid?
1 answer
89 views
How can I adjust the background colour display on column charts to match the behaviour of line charts, where the colour spans the entire width of the value? Currently, the background colour on column charts only covers the width of the column itself. Is there a way to extend it to cover the full width of the value, similar to line charts?
Line chart
Column chart
1 answer
100 views
Is it possible to plot radial bar charts with kendo's chart library?? I already use kendo for grids and I don't wanna use another library for the charts in our project. Attached are two of the examples I'm looking for.
Yanmario
Telerik team
answered
on
23 May 2024
0 answers
123 views
Hi,
if the grid is loading the data, I would like to show the loading template, and if filtering the data, and there is no data, then the no record template. The issue is, that it seems, that if I set up the loading template, also the no record template is showing while loading.
How to avoid that?
