Good morning,
I'm currently trying to get my donut charts to look flat with a bootstrap theme through the use of the kendo widget. I've been taking a look at your documentation and came across the following property, and was hoping that it would be as simple as adding this to the end of the series object in the mvc widget ".Overlay.Gradient("none")"
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.overlay
But to no avail, there is no such property, not according to the syntax highlighting, and it doesn't work when I try brute forcing the thing. So I was wondering how to go about this using the syntax below.
@(Html.Kendo().Chart(Model) .Name("chart") .Title("Chart Data") .Legend(legend => legend .Position(ChartLegendPosition.Top) ) .Series(series => { series.Donut( model => model.Value, // The data to use model => model.Category, // The category Name model => model.Color, // The color to use for the category null // How far out the donut section should pop out ).Padding(10) .Overlay.Gradient("none") ; //.Labels(labels => labels // .Visible(true) // .Position(ChartPieLabelsPosition.OutsideEnd) // .Template("#= category # - #= kendo.format('{0:P}', percentage)#") // .Background("transparent") //); }) .Tooltip(tooltip => tooltip .Visible(true) .Template("#= category # - #= kendo.format('{0:P}', percentage) #") ))
Can you please guide me or show me how I can use the #displayFilters to be used with a header and footer and the footer continuing the page numbering. Currently the header and footer only displays with the grid pages and then it does a page-break with the filters with no styling. I’ve tried adding the styling but I don’t get the results I’m looking for.
Another solution could be that it appends the displayFilters just after the grid without the page-break.
below is my code for exporting:
var grid = $("#grid").data("kendoGrid");
var root = new kendo.drawing.Group();
kendo.drawing.drawDOM($("#displayFilters"))
.done(function (displayFilters){
grid._drawPDF(progress)
.then(function (root) {
root.children.push(displayFilters);
return kendo.drawing.exportPDF(root, {
multiPage: true,
allPages: true,
avoidLinks: true,
margin: { top: "3cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
template: $("#page-template").html()
});
})
.done(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: reportModel.Report.ReportName + ".pdf"
});
progress.resolve();
});
});
Here is my template:
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: left; width:33%;"><img src="./Content/Images/SB Logo.png" /></div>
<div id="reportName" style="width: 33%; height:100px; text-align:center; color: black; font-size:30px;vertical-align:middle;display:inline-block;padding-top:20px;">@ViewBag.Report.ReportName</div>
<div id="currentDate" style="float:right;width:33%; text-align:right; color: black; font-size:30px;padding-top:36px;display:inline-block;">23/07/2021</div>
</div>
<div class="footer" >
Page #: pageNum #
</div>
</div>
</script>
Hello, I'm looking at the Stepper component e.g. (from a Telerik code sample and can't seem to find choices for icons.
I have looked at the documentation which points to web fonts but they don't seem right as I pasted in one or two of the icon names and get a blank step.
Thanks for any insight where to find a list of icon names to use in the Stepper.@(Html.Kendo().Stepper()
.Name("stepper")
.Orientation(StepperOrientationType.Horizontal)
.Label(Model.Label)
.Indicator(Model.Indicator)
.Steps(s =>
{
s.Add().Label("Begin").Icon("home");
s.Add().Label("Second").Icon("attachment").Error(true);
s.Add().Label("Third").Selected(true);
s.Add().Label("Fourth").Icon("user");
s.Add().Label("111");
s.Add().Label("Done").Icon("save");
})
)
Hi, I've got 2 dropdownlist dd1 and dd2. I need this functionality:
Is this possible with the cascade functionality of the telerik dropdownlist?
Best regards.

I started a new project, and realized I no longer have the Kendo scaffolding options to select when adding "New Scaffolded Item". I even open previous Kendo projects and did not see the options too. I repaired the Telerik install and even tried reinstalling it.
I confirmed the Kendo UI Scaffolder is present under Extensions.
Framework is .NET 4.7.2 on Visual Studio 2019 Version 16.10.3
I'm not sure what else to do. Please help. thanks!
Hi
I am using Kendo grid in asp.net mvc application, I have added Editable (incell) column in the grid, when I click on the editable column the column width is increasing. How to fix edit box width to column width.
column size before clicking on edit column
column size after clicking on edit column

I have tried to implement a line chart along with Notes,. but the problem arises when 2 notes are very close to each other they overlap and are not readable. I tried adding margin but could not achieve a good result even with rotation it looks very absurd.
I am trying to figure out a way where I can display the notes in one series alternatively top or down. But I can't find anything. I only got an option to display notes top or down per series. Need help with this?
Or if any other way I can achieve it with a readable format
