or
1 answer
148 views
I am using Kendo Angular grid and have a column containing multiple buttons. These buttons are custom angular components. I am using [navigable]="true". How can I make these buttons be part of the navigation?
0 answers
60 views
I am using Kendo Grid in Angular. I have [navigable]="true". When I go into edit mode, I have a custom template similar to this:
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
<div *ngIf="formGroup" [formGroup]="formGroup" class="edit-wrapper">
<custom-select [data]="col.data"></custom-select>
</div>
</ng-template>
Similarly, another column is a custom component that wraps the material date picker. This component has the same issue any time the user tries to select a different month, etc.
Here is a StackBlitz demonstrating the problem using Material Datepicker. To replicate, click the date to edit, then click the icon to open the calendar, and then click next or previous month button and see how it closes the dialog.
https://stackblitz.com/edit/angular-material-datepicker-lkmb8d?file=src%2Fapp%2Fapp.component.ts
0 answers
68 views
Hello,
its been dealt with. But i have another issue. I have a treeview and a editService as a directive/datasource. Anyway the nodeDrop called twice. Have u any idea why nodeDrop is called twice. Best regards Nico
this.treeview.nodeDrop.subscribe(x=>console.log(x));
1 answer
131 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
89 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
81 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
204 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
112 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
75 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
143 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?
