or
0 answers
76 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
69 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
185 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
98 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
63 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
121 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
84 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
94 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
112 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?
3 answers
2.9K+ views
Hi, I'm trying to create a multi-select item that will have the outside look & behavior of a simple dropdown-list, including using icon of my choosing for the down arrow.
But I'm having trouble locating the icon, I've tried using plain css and play with the positions of the items, but then the icon doesn't stick to the corner of the multi-select wrapper..
Would like some help, I feel like maybe I'm doing it all wrong.
Here is my code:
https://stackblitz.com/edit/angular-kendo-multi-dropdown-look
Richard
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
22 May 2024
