When I select initialize a kendoDropDownTree with checkboxes set to true, I experience all kinds of odd behavior visually. Inspecting the code shows that it is now a MultiSelectTree and not a DropDownTree yet there is no documentation and little support for this somewhat hidden component. I would actually prefer to have a MultiSelectTree without the checkboxes similar to a multiselect but with the grouping.
One issue, is that it does not respect the global settings for the corner radius of the box.
kendo.ui["DropDownTree"].fn.options["rounded"] = "none";
kendo.ui["MultiSelect"].fn.options["rounded"] = "none";
These seem to do nothing. When I guessed at "MultiSelectTree", I got a console error.
Another issue is that the UI looks very different from the regular multiselect and it doesn't seem to apply the .k-selected class as expected. When I check a box, the aria-checked is true but the k-selected class is not applied, this makes the item remain white rather than getting the blue background like it does in a regular multi-select. Can we get some consistency there?
Expanding an element does not change the height of the k-child-animation-container. It does show on the screen, but any styling targeting the container will not work because the container does not expand to fit the content.
I made my dropdown arrows 7px wider (k-treeview-toggle). Now the autoWidth makes the list 7px wider than the input element.
I am trying to support a drag event with the jQuery Splitter that is the same as the Angular Splitter version of sizeChange that is demonstrated here:
https://www.telerik.com/kendo-angular-ui/components/layout/splitter/events
I have tried attaching events to kendoDraggable, binding to layoutChange, etc., but nothing works to capture the real-time drag event as the splitbar is moved. Is there any known way to trap this event?
Thanks, Bob
can't seems to find an example for creating column chart looking similar to the image
My chart gets cut off
current issue
But it seems to be working properly on dojo
I have copied all my CSS and JS used on my site to dojo, but I still don't understand why it is not working on my site.
as the site is an internal site, I am not able to provide a link to the actual site.
I want to check how to add a custom label for column chart as shown in image below.
I've seen your demos on setting up the type: "date" and the format: stuff on the model and on the column display for the grid. Your demo sorts the dates as if they are dates properly. Ours shows the value as null if we set the type to date. It displays the string properly if we set it to type string but still sorts as a string. If we simply set the column to the kendo format and do not use a schema on the datasource, our code still sorts as a string.
https://dojo.telerik.com/TgCibbiL
When I looked at the data in your demo, it looks like the long form GMT. Today, we are instead blocking the script from sending the .NET property types of DateTime and instead sending a pre-formatted string of the date. Ran into some serialization issues when posting those same objects with DateTime properties on them.
Are you returning your DateTime properties as strings but formatted in this GMT when you serialize your .NET data objects back to the JavaScript handlers?
Hi,
I have an issue in Firefox where the kendo map cannot be panned. It works fine on the other browsers.
Can someone help me with this issue? Here are the details:
Firefox - 138.0.4
Kendo - 2019.1.115
Module Bundlers - Kendo UI Third-Party Tools - Kendo UI for jQuery
The module bundlers page references Vite as an example which leads me to believe that it can be used with Kendo.
However even this basic example doesn't appear to work: https://stackblitz.com/edit/vitejs-vite-i842ucun?file=src%2Fmain.js
Am I doing something wrong?
Is it possible to conditionally show and hide items in a Kendo form based upon the data?
For example, if I have a form to enter a Person or a Company, I want to hide the Address field if it is a Company, or hide the Contact field if it is a Person.
Also please note that if attributes are used to try to set the field to display:none as in the example here., it only hides the editor, not the label or hint.
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Address: "123 Main St.",
Contact: "",
Type: 1 // 1 = Person, 2 = Company
},
items: [{
field: "Name",
hint: "Enter Full Name",
}, {
field: "Address",
hint: "Enter Address with ZIP Code",
attributes:{
// need to hide this field if the Type = 2
class: "person"
}
}, {
field: "Contact",
hint: "Enter the Company Contact",
attributes:{
// need to hide this field if the Type = 1
class: "company"
}
}]
});
</script>
<style>
.person {
display: block;
}
.company{
display: none;
}
</style>
I have a form where I want to use radio buttons to represent the item value, but I want the label of the radio buttons to be something different than the value. For example, I have a name and I want to distinguish that name between a type of Person or Company, but the data value representing the name type is numeric.
I can setup the form like this:
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Type: 1 // 1 = Person, 2 = Company
},
items: [{
field: "Name",
validation: { required: true }
}, {
field: "Type",
editor:"RadioGroup",
editorOptions: {
layout: "horizontal",
items: [1, 2],
select:function(e){
// Do something here?
}
},
}]
});
</script>
Using Items: [1, 2] does work, but I don't want to show 1 and 2 on the radio buttons. I want to show Person and Company. How do I achieve that? Can I set Items: ["Person", "Company"] and then do something in the select function? If so, what needs to be done to set the model data correctly?
Please note that in my actual code, I am using setOptions for the model data, and not formData.
Thanks, Bob