or
7 answers
900 views
I have a kendo grid that has a frozen column with a custom template. One of the other columns in the grid can have a large amount of text that wraps, causing the row height to grow. When this happens, I want the template in the frozen column to grow to fill the entire cell (both height and width)
I have created a dojo to illustrate the issue: here
The entire cell in the frozen column must have a blue background. Currently the div holding the custom template is only as high as its content.
I know that height:100% on the div doesn't work, because the parent element doesn't have a fixed height, but I can't give the parent a fixed height as the row's height must be determined by the content of the cell in the row with the most data (in this case the details cell)
Another complication is that the grid is groupable, so we must be able to group by category without breaking the layout of the grid. The frozen cell's div must still fill it's cell and the row height must still be determined by the cell with the most content.
Thanks for your help.
1 answer
171 views
Is there a way to persist the connection connector point?
In this example only the connections are saved: https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/persist-shape-properties .
The points (connector) where the connections are attached are not persisted.
Viktor Tachev
Telerik team
answered
on
15 Nov 2019
2 answers
192 views
Here is the original article from Kendo UI about binding to arrays of primitive objects: https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/source#source-binding-to-arrays-of-primitive-objects
In my project I need to work with an array of strings as the values of input elements. And I was wondering if anyone knows why it's not possible to use the following template:
<script id="ul-template" type="text/x-kendo-template"> <li> <input type="text" data-bind="value: this" /> <a class="k-button textButton" title="Remove" data-bind="events: { click: removeValue }" href="\\#"><span class="k-icon k-i-close"></span></a> </li></script>Instead of the one, provided in their docs:
<script id="ul-template" type="text/x-kendo-template"> <li data-bind="text: this"></li></script>Whatever I tried it simply doesn't list the elements above with the primitive data like [ "Coffee", "Tea", "Juice" ], but it works if there are objects instead of simple strings like [ {product: "Coffee"}, {product: "Tea"}, {product: "Juice"} ], which is not preferable solution in my case.
For your convenience I created the sample of what I need in DOJO, here is the URL: https://dojo.telerik.com/uWEdIroR/3
What am I doing wrong? Thanks in advance.
5 answers
186 views
I just updated my application to use version 2019.3.1023. While testing I noticed that all DatePicker's are displayed whit today's date by default without setting a value. Is this by design?
Kind Regards,
Marco
Marco
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
13 Nov 2019
1 answer
851 views
Hi i am evaluating the grid for a development.
One of the requirements i have is to have a multi row selection and inline edit. (will be going into cell inline mode on double click)
I found this great article of yours
https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/grid-edit-cell-on-double-click.md
where it looked it was exactly what i was looking for but it looks like that when there is a numeric editor it doesnt work. I double click the cell, the editor appears and immediately hides, i have updated one of your grid examples (the editing-custom.html) and attached it.
Would be great to have some feedback on it, to have a proper evaluation as this is a must have.
As i cant attach neither hmtl nor txt files (being blocked by the page)
################################################################################
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Editing custom editor</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
{ command: "destroy", title: " ", width: "150px" }],
// editable: false,
selectable: "multiple"
});
$("#grid tbody").on("dblclick", "td", function(e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
});
$("#grid tbody").on("blur", "td", function(e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.closeCell(cell);
});
});
function categoryDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
</script>
</div>
</body>
</html>
Viktor Tachev
Telerik team
answered
on
13 Nov 2019
1 answer
184 views
Hi i am evaluating the grid for a development.
One of the requirements i have is to have a multi row selection and inline edit. (will be going into cell inline mode on double click)
I found this great article of yours
https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/grid-edit-cell-on-double-click.md
where it looked it was exactly what i was looking for but it looks like that when there is a numeric editor it doesnt work. I double click the cell, the editor appears and immediately hides, i have updated one of your grid examples (the editing-custom.html) and attached it.
Would be great to have some feedback on it, to have a proper evaluation as this is a must have.
Kind regards,
Viktor Tachev
Telerik team
answered
on
13 Nov 2019
1 answer
151 views
2 answers
310 views
Hi,
I would like to add a new field in the popup.
For example, there is the fields Title, Start, End, Complete, I'm trying to add a new field Project Number.
Can you suggest me some documentation about it?
.jpg)
6 answers
482 views
Can i export my diagram and all the data inside him to a formatted json model ?
1 answer
357 views
Currently I have a bubble chart that I am using tooltips to display some more information about the bubble. I need the tool tip to stay visible while a user clicks a button to export the chart as an image. I have set the autoHide attribute to false, but it does not seem to have any effect. My tooltip does not get a close button. My chart configuration looks like this:
series: [{
type: "bubble",
xField: "CurrentLossEstUSD",
yField: "CurrentScore",
sizeField: "MFL_TOTAL",
color: "#dadfe1",
tooltip: {
visible: true,
format: "{3}: MFL - {2:N0}",
autoHide: false
},
}]
Thanks.
Tsvetomir
Telerik team
answered
on
08 Nov 2019
