<div id="chart"></div><script>$("#chart").kendoChart({ categoryAxis: [{ justified: true, categories: ["2012", "2013"] }], series: [ { type: "line", data: [1, 2, 3] }, { type: "bar", data: [1, 2, 3] } ]});</script>
What I'm trying to do here is I want to justify both line and bar chart so that there is no space in the beginning and also at the end. But I cannot use justify since categoryAxis.justified is only works with line chart. Is there any other option I can use to that both line and bar chart can justify.
Hi, is there a way to remove the Update button from viewHtml? We want the user to be able to edit as they please until they select view as html. We only want them to view html as read only for information purposes. Thanks.
https://dojo.telerik.com/USEwEgis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
tools: [
"bold", "italic", "underline",
{
name: "viewHtml",
tooltip: "View Html",
}
]
});
</script>
</body>
</html>
I have tried to left-align the overflow anchor of the ToolBar, which I achieved using css, specifically by setting ".k-overflow-anchor { right: auto; }".
That works fine, but the problem is that the popup is still aligned to the right side of the overflow anchor button, see attached image.

Hi, is it possible to move the column name under the group header?
var data = [
{ name: 'test1', age: 30 },
{ name: 'test2', age: 30 },
{ name: 'test3', age: 32 },
{ name: 'test4', age: 33 },
{ name: 'test5', age: 33 },
{ name: 'test6', age: 34 },
{ name: 'test7', age: 35 },
{ name: 'test8', age: 30 },
];
$("#grid").kendoGrid({
dataBound: function (e) {
e.sender.table.find(".k-grouping-row:contains('Stock')").each(function (ind, item) {
e.sender.collapseGroup($(item));
})
},
dataSource: {
data: data,
group: [
{
field: 'name', aggregates: [{
field: "name",
aggregate: "count"
}]
}
]
},
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{ field: 'name', groupHeaderTemplate: "#=value#" },
{
field: "age",
title: "age",
width: 240
}]
});
i want to move the column header below the group header.

Chart section scroll on mobile device is not working
Eg,
<div>
<div>Header</div>
<div>Content</div>
<div>Chart</div>
<div>Content</div>
<div>Footer</div>
<div/>
So the top header and content scroll on mobile but when chart div or section came then scroll is not working i can't scroll down also the left and right gutter space i can scroll down but not line chart div.

Hello,
I have a grid and the data I receive is in string, even for my 2 date columns. I was able to change them in the preferred Date format, but I can't seem to get the filter and sorting working.
I tried to change the datatype of the columns to datetime, but that was unsuccesfullI
I'm now looking for some help to create a custom filter (and sort) so that I can sort and filter my date columns the correct way.
It's a pretty complicated solution, but here's some of the code were I load my grid:
function loadGrid(userGridSettings) { var gridSettings = { selectable: "multiple row", sortable: true, filterable: true, pageable: { refresh: true, pageSizes: [10, 20, 50, 100], buttonCount: 5 }, resizable: true, columnMenu: true, toolbar: kendo.template($("#searchgrid-toolbar").html()), editable: "popup", reorderable: true, columnHide: saveState, columnShow: saveState, columnResize: saveState, columnReorder: saveState, columns: [{ field: "IsSelected", title: null, sortable: false, filterable: false, width: 25, menu: false, reorderable: false }, { field: "BatchName", title: "Batchnaam", filterable: { multi: true } }, { field: "RequesterPartyRequired", title: "Kabelsel.", filterable: { multi: true } }, { field: "StartDate", title: "Plandatum start", type: "date", format: "{0: dd-MM-yyyy}", filterable: { ui: function (element) { element.kendoDatePicker({ format: '{0: dd-MM-yyyy}' }) }, multi: false } }, { field: "EndDate", title: "Plandatum eind", type: "date", format: "{0: dd-MM-yyyy}", filterable: { ui: function (element) { element.kendoDatePicker({ format: '{0: dd-MM-yyyy}' }) }, multi: false } }, { field: "ID", title: " ", filterable: false, sortable: false, width: 25, menu: false, reorderable: false }] }; var customFields = [{ field: "IsSelected", template: "<input type='checkbox' class='checkbox' #= IsSelected !== undefined && IsSelected ? checked='checked' : '' # />", headerTemplate: "<input type='checkbox' id='checkAll' />" }, { field: "StartDate", filterable: { ui: function (element) { element.kendoDatePicker({ format: '{0: d-M-yyyy}' }) }, operators: { string: { eq: "Is gelijk aan", neq: "Is niet gelijk aan" } }, multi: false }, format: '{0: d-M-yyyy}' }, { field: "EndDate", filterable: { ui: function (element) { element.kendoDatePicker({ format: '{0: d-M-yyyy}' }) }, operators: { string: { eq: "Is gelijk aan", neq: "Is niet gelijk aan" } }, multi: false, }, format: '{0: d-M-yyyy}' }, { field: "ID", template: "#=actionTemplate(data)#" }]; if (userGridSettings !== undefined && userGridSettings !== "" && userGridSettings !== null && JSON.stringify(userGridSettings) !== "{}") { gridSettings.columns = userGridSettings; } $.each(customFields, function (customFieldIndex, customField) { $.each(gridSettings.columns, function (columnIndex, column) { if (column.field == customField.field) { if (customField.sortable) { column.sortable = customField.sortable; } if (customField.template) { column.template = customField.template; } if (customField.headerTemplate) { column.headerTemplate = customField.headerTemplate; } if (customField.filterable) { column.filterable = customField.filterable; } } }); }); searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid"); searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove(); searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();}
Hi,
I have a grid with an embedded bar chart. The bar chart is firing a seriesClick() event.
How can I find the grid row containing the chart that fired the event?
Prototype is in this snippet copied from the embedded chart demo. Just click in any bar of a chart.
https://dojo.telerik.com/@eyep/exIVAraw
Thanks in advance,
Eugenio Yep
Hi,
In my grid there are cells where we can accept having null values, e.g. property can exist without owner. I would like to filter owner column in multifilter by having null. Right now, empty (null) values are not visible in multi filter menu, only existing owners are displayed. We hacked the problem by switching from null values to empty strings "", and they are visible in menu. But I'm feeling extremely awful for doing such hacks in my code.
I checked that it's made like that because in FilterMultiCheck _init function you got such line:
FilterMultiCheck _init: function () { ... this.checkSource.data(distinct(this.dataSource.data(), this.field)); ...And the distinct function looks like that:
function distinct(items, field) { ... if (text !== undefined && text !== null && !seen.hasOwnProperty(text)) { result.push(item); seen[text] = true; } ...You see, that null and undefined values are omited and they are not the part of the results. Unfortunately, removing the null & undefined conditionals don't work - null is showed in menu but you cannot filter by it.
Will you be able to do something with it in the future? Right now i can workaround it, but it's really nasty to replace nulls with empty strings :)