I need some help using a hierarchicalDataSource with a treeview control. It works fine as an array but I can't figure out how to make it work with a datasource.
Essentially my datasource is a two level structure.
date:
eventId:
Here are two different datasources in my app.js file.
window.calendarData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "https://...",
dataType: "json"
}
},
schema: {
model: {
id: "eventId",
hasChildren: "items",
fields: {
eventId: {
editable: false
},
date: {
editable: true
},
items: {
model: {
id: "eventId",
fields: {
eventId: {
editable:false
},
lastname: {
type: "string",
editable: true
}
}
}
}
}
}
}
});
window.calendarDataLocal = new kendo.data.HierarchicalDataSource({
data: [
{
eventId: 0,
date: '2015-08-01',
items: [
{
eventId: 1,
lastname: "poulin",
},
{
eventId: 2,
lastname: "smith",
}
]
},
{
eventId: 3,
date: '2015-08-02',
items: [
{
eventId: 4,
lastname: "jones"
}
]
}
]
});
Here is the control I'm putting it into.
<div id="mainCalendar">
</div>
<script>
$(document).ready(function () {
$("#mainCalendar").kendoTreeView({
dataSource: window.calendarData,
dataTextField: ["date", "lastname"]
})
});
</script>
If I use window.calendarDataLocal, it works, the other way what happens is the two main nodes (identified by date) show up but the lower level items show up as undefined.
Essentially my data is made up
​
Hi All,
I have a function that grab the specific date format from a config file, but the code below output the wrong date format. Could anyone tell me what what I'm missing or did wrong?
columns:[
{ title: "Date", field: "tDate", width: 190, template: '#= kendo.toString(tDate, getMyFormattedDate()) #' }
];
result is always Tue Jul 28 2015 13:01:36 GMT-0600 (Mountain Daylight Time) and the format from getMyFormattedDate is set as 'MM-dd-yyyy'.
TIA

Hello,
I am using the kendo tool tip widget inside a kendo observable object. For whatever reason, setting the position and opacity seems to work as expected. However, adding an animation or delay does not seem to work. Below is a snippet of my code:
ViewModel = new kendo.data.ObservableObject({ reloadTooltips: function () { var reloadTooltip = function(tooltipSelector, templateSelector) { $(tooltipSelector).kendoTooltip({ content: kendo.template($(templateSelector).html()), position: "top", width: "300px" }); } var reloadAuthTooltip = function (tooltipSelector, templateSelector) { $(tooltipSelector).kendoTooltip({ content: kendo.template($(templateSelector).html()), position: "top", width: "350px", }); } reloadTooltip(".authorized", "#authorizedTemplate"); reloadAuthTooltip(".nonauthorized", "#nonAuthorizedTemplate"); reloadTooltip(".nonauthorizedquestion", "#nonAuthorizedQuestion"); },
Hi, i'm having an issue with the kendo editor (v2014.3.1409) on the iPad when it is used within' an iframe.
It will jump scroll to the top of the page and start showing a floating characters and move back and forth from top to the editor as you type.
This does not occur on PC nor on Android devices.
I've built a sample on jsfiddle and it does something close to the described effect.
Take note jsfiddle is using v2014.3.318 of kendo and the sample is itself running from the site's result iframe.
Hi,
just started using TreeView...
I have a Treeview that calls a controller to load some JSON data - format of the JSON data is under my control, so changeable.
[{"Id":3,"Name":"Business Components","UrlImage":"B_Capability.png","HasChildren":0},{"Id":4,"Name":"Business Processes","UrlImage":"B_Process.png","HasChildren":0},{"Id":17,"Name":"Goals and Objectives","UrlImage":"B_Goal.png","HasChildren":0},{"Id":12,"Name":"Org Units","UrlImage":"B_OrgUnit.png","HasChildren":0},{"Id":2,"Name":"Associates","UrlImage":"B_Associate.png","HasChildren":0},{"Id":11,"Name":"Locations","UrlImage":"B_Location.png","HasChildren":0},{"Id":5,"Name":"Business Rules","UrlImage":"B_Rule.png","HasChildren":0},{"Id":15,"Name":"Programs","UrlImage":"B_Programme.png","HasChildren":0},{"Id":16,"Name":"Projects","UrlImage":"B_Project.png","HasChildren":0}]
In the dataset I return an image which I would like to display in the tree. All the examples I can find just load data from some datasource in javascript, but I cannot find anything that does this dynamically.
What do I have to add to this code to make this work?
@(Html.Kendo().TreeView()
.Name("treeview4")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read.Action("DomainObjects", "Tree", new { name = "id", id = 4 })))
Thanks for the help in advance.
Matt
Hi Everyone,
So I have been creating a basic grid using angularjs and I keep geting the .toLowerCase not allowed error when assigning a remote data source to a grid.
Here is a dojo I have saved that shows a similar parse error:
http://dojo.telerik.com/uCATI/4
If I move that standard data into the grid's datasource definition, everything works fine... Any idea why I am getting the JS error?
Thanks,
Lucas ​
I am currently experiencing weird behavior while trying to perform a collapsed filter of a dropdownlist. By collapsed filter I mean typing the value of an item(s) that exist in the dropdownlist without expanding the list and selecting the filtered value when found. What happens is that no matter how fast I type the dropdownlist only registers the first 3 characters typed. How can I ensure that it accepts more than the first 3 characters? Also how can this filtering to be done using "contains" instead of "startswith". I don't want to have an explicit filter input included in the dropdown so using the "filter" property is not ideal.
Thank you.
Hi,
I would like to show a custom command on row with a condition on model.
Ex : mydata : [
{id:1,test:'one',showCmd:true}, // show the command
{id:2,test:'two',showCmd:false},​ // hide the command
]
How can I do that with such model ?
I've tried to implement ng-if on template button command, but as I guess it is not compile each time, it doesn't do the job.
Thanks in advance for your help
Hello,
I have a page with 2 kendoMultiSelect controls that have the same dataSource. When I start filtering in the first one, the second one loses all its selected values and vice-versa. Is this by design? If so, is it possible to have a shared dataSource for MultiSelect controls? Thanks for your help.
Kind regards,
Krisztian
I start with a listview that contains all states with a click event on each to build event headers by state (below). Once a state is selected, ​I fetch event headers and build another listview using this function. Once an event header is selected, I populate a detail page. When loading fresh and selecting a state (Arkansas), the listview is populated and selecting an event populates the detail screen as expected. Hitting the "back" button (data-role=backbutton), selecting another state, then an event for that state throws e.dataItem undefined in the click ​method of the function below. If I go back again, select another state, then sometimes it works, sometimes it doesn't. What am I doing wrong here?
function BuildEventHeadersListByState(abbr){ app.showLoading(); var stateAbbr = abbr; var xml; var template = kendo.template($("#ulEventHeaders-template").html()); var dataSource = new kendo.data.DataSource({ transport: { read: function(options){ $.ajax( { type: "GET", data: { "apikey": apiKey, "stateAbbreviation": stateAbbr}, dataType: "text", success: function(result) { options.success(result); app.view().header.find(".km-navbar").data("kendoMobileNavBar").title(abbr + " Events"); app.hideLoading(); } }); } }, schema: { type: "xml", data: "/ArrayOfEventHeader/EventHeader", model: { // configure the fields of the object fields: { EventCity: "EventCity/text()", EventDate: "EventDate/text()", EventID: "EventID/text()", EventTitle: "EventTitle/text()", } } } }); $("#ulEventHeaders").kendoMobileListView({ dataSource: dataSource, template: $("#ulEventHeaders-template").text(), dataBound: function(){ this.scroller().reset(); //scroll to top }, click: function(e){ var eventID = e.dataItem.EventID; BuildEventDetailsByEventID(eventID); } });}