Here writes:
With regard to the CSS selectors or element discovery via Javascript, take into account that, by default, the ContextMenu is created as a child of the<body> element. This behavior is configurable via the appendTo setting.but appendTo links to window appendTo documentation. ContextMenu documentation does not document appendTo configuration. TypeScript declaration file for interface ContextMenuOptions is also missing appendTo property.
Which documentation is wrong (Widgets or Javascript and TypeScript)? Quick look into source (2016.2.504) tells me that appendTo does not exists on ContextMenu.
I am using angular1.0 and kendo UI controls and trying to populate the tree view all at once. Need help on loading the treeview control. I am struggling to load the child nodes. My api call returns this
"[{\"Item\":\"National\",\"StationName\":[{\"Item\":\"A\"}]},{\"Item\":\"San Francisco\",\"StationName\":[{\"Item\":\"B\"},{\"Item\":\"C\"},{\"Item\":\"KCBS-AM\"}]},{\"Item\":\"Los Angeles\",\"StationName\":[{\"Item\":\"D\"},{\"Item\":\"E\"},{\"Item\":\"F\"},{\"Item\":\"G\"},{\"Item\":\"H\"}]},{\"Item\":\"Seattle\",\"StationName\":[{\"Item\":\"I\"},{\"Item\":\"J\"}]}]"
This is on my js (controller) file
$scope.treeData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: 'api/stationdata/GetStationData',
dataType: "json",
contentType:"application/json"
},
schema: {
model: {
id: "item",
children: "stationName"
}
}
}
});
this is on my html
<div kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem">
<span k-template>
{{dataItem.item}}{{dataItem.stationName}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
</span>
</div>
Attacched is the screen shot of what I see. How do I get the child node to display ?

Hi, I am binding a json nested object to a kendo-mobile-list-view and it displays the items as [object Object]. How can I avoid this issue?
Im attaching a dojo link: http://dojo.telerik.com/ExakU/2
Thanks.

I am using Kendo File Upload for upload files and after uploading I convert the file to Byte array and save it on Database in the Binary data format.My requirement is I want to display the uploaded files in the uploaded area,ie the area where I upload files.(Take byte array content of files from database and the convert it into Base64 string thees section is I did)Code:<h2>Index</h2>@* The file Upload code,What changes are I done this code for display files in the Uploaded area ?<div class="box"> <p> File Upload Example </p></div><form method="post" action='@Url.Action("Save")'> <div class="demo-section k-content"><h2> <h6>Upload Attachments</h6> @(Html.Kendo().Upload() .Name("files"). TemplateId("fileTemplate") .Messages(m => m.Select("Add files here.")) .Async(a => a .Save("Save", "Upload") .Remove("Remove", "Upload") .AutoUpload(false)).Events(events => events.Select("onSelect"))) <script id="fileTemplate" type="text/x-kendo-template"> <span class='k-progress'></span> <div class='file-wrapper'> <img class='file-icon #=addExtensionClass(files[0].extension)#' /> <!-- here im trying to bind the image --> @*<h4 class='file-heading file-name-heading'>Name: #=name#</h4> <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>*@ <button type='button' class='k-upload-action'></button> </div> </script> <script> var a = 0; function onSelect(e) { $.each(e.files, function (index, value) { readMultipleFiles(value); }); a++; } function addExtensionClass(extension) { return a; } function readMultipleFiles(file) { var reader = new FileReader(); reader.onload = function (e) { // bind the file content $('.'+a+'').attr({ src: e.target.result }); } reader.readAsDataURL(file.rawFile); } </script> <style scoped> .demo-section{ width: 350px; float: right; background-color: #f7f7f7; padding: 20px; border: 1px solid #dbdbdb; } .demo-section .k-widget.k-upload.k-header{ border-radius: 0px; border: none; background-color: #F7F7F7; } .demo-section .k-upload-files{ width: 100%; overflow: hidden; background-color: #fff; border: none; min-height: 235px; } .demo-section .k-upload-files .k-file{ width: 48%; float: left; border: none; padding-left: 0px; } .demo-section .k-dropzone{ background-color: #fff; border-bottom: none; margin-bottom: 30px; } .demo-section .k-dropzone .k-button.k-upload-button{ height: 75px; border: 1px dashed #000; width: 100%; background-color: #fff; border-radius: 0px; padding-top: 26px; background-position: 0px; box-shadow: none; } .demo-section .k-dropzone .k-button.k-upload-button input{ background-color: #fff; box-shadow: none; } .file-icon { /*display: inline-block; float: left; width: 80px; height: 80px; margin-left: 42px; margin-top: 45.5px;*/ width: auto; height: 135px; max-height: 100%; max-width: 100%; } li.k-file .file-wrapper .k-upload-action { position: absolute; top: 0; right:0; } li.k-file div.file-wrapper { position: relative; height: 100px; padding: 15px; /*float:left; width:50%;*/ } </style> </div></form>Hi everyone,
I have a kendo ComboBox being binded to a json object as follows:
function getTests(element) { //element is just an input
element.kendoComboBox({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
data: [{ Id: 2, Name: "Test 1" }, { Id: 8, Name: "Test 2" }, { Id: 6, Name: "Test 3" }]
},
placeholder: "Select One",
suggest: true,
filter: "contains",
}); }
And I'm receiving the following error:
Uncaught TypeError: s.data.Query.compareFilters is not a function
from:
kendo.web.js:28607
I'm working with:
kendo.version = '2016.2.714'
Plese give a clue on this
Regards
Hi
I'm trying to implement nested property binding. I've found the following article in your documentation but that example doesn't seem to be working at the moment so I've created a Dojo highlighting the issue.
First time you run, everything displays correctly. If you then click the Rebind Local button, all of the nested properties fail to show. It seems to be that whenever you set the data directly, the fields (or at least the "from"s) as set in the model are ignored. Is this expected behaviour and if so, is there a workaround?
Thanks
Keith
I am using Kendo File Upload for upload files and after uploading I convert the file to Byte array and save it on Database in the Binary data format. My requirement is I want to display the uploaded files(Take byte array content of files from database and the convert it into Base64 string and pass to View using View Bag,thees section is I I did) in the uploaded area,ie the area where I upload files.Code:@{ V<img src="@ViewBag.ImageData" /> @*ImageData Contain the files,taken from Dtabase}<h2>Index</h2>@* The file Upload code,What changes are I done this code for display files in the Uploaded area ?<div class="box"> <p> File Upload Example </p></div><form method="post" action='@Url.Action("Save")'> <div class="demo-section k-content"> <h6>Upload Attachments</h6> @(Html.Kendo().Upload() .Name("files"). TemplateId("fileTemplate") .Messages(m => m.Select("Add files here.")) .Async(a => a .Save("Save", "Upload") .Remove("Remove", "Upload") .AutoUpload(false)).Events(events => events.Select("onSelect"))) <script id="fileTemplate" type="text/x-kendo-template"> <span class='k-progress'></span> <div class='file-wrapper'> <img class='file-icon #=addExtensionClass(files[0].extension)#' /> <!-- here im trying to bind the image --> @*<h4 class='file-heading file-name-heading'>Name: #=name#</h4> <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>*@ <button type='button' class='k-upload-action'></button> </div> </script> <script> var a = 0; function onSelect(e) { $.each(e.files, function (index, value) { readMultipleFiles(value); }); a++; } function addExtensionClass(extension) { return a; } function readMultipleFiles(file) { var reader = new FileReader(); reader.onload = function (e) { // bind the file content $('.'+a+'').attr({ src: e.target.result }); } reader.readAsDataURL(file.rawFile); } </script> <style scoped> .demo-section{ width: 350px; float: right; background-color: #f7f7f7; padding: 20px; border: 1px solid #dbdbdb; } .demo-section .k-widget.k-upload.k-header{ border-radius: 0px; border: none; background-color: #F7F7F7; } .demo-section .k-upload-files{ width: 100%; overflow: hidden; background-color: #fff; border: none; min-height: 235px; } .demo-section .k-upload-files .k-file{ width: 48%; float: left; border: none; padding-left: 0px; } .demo-section .k-dropzone{ background-color: #fff; border-bottom: none; margin-bottom: 30px; } .demo-section .k-dropzone .k-button.k-upload-button{ height: 75px; border: 1px dashed #000; width: 100%; background-color: #fff; border-radius: 0px; padding-top: 26px; background-position: 0px; box-shadow: none; } .demo-section .k-dropzone .k-button.k-upload-button input{ background-color: #fff; box-shadow: none; } .file-icon { /*display: inline-block; float: left; width: 80px; height: 80px; margin-left: 42px; margin-top: 45.5px;*/ width: auto; height: 135px; max-height: 100%; max-width: 100%; } li.k-file .file-wrapper .k-upload-action { position: absolute; top: 0; right:0; } li.k-file div.file-wrapper { position: relative; height: 100px; padding: 15px; /*float:left; width:50%;*/ } </style> </div></form> have a kendo grid(with pagination Enabled) with some entries. Say, I have 5 pages and I have selected(clicked on checkbox) one row from each page and then clicked on top level action DELETE. I am not able to figure out how to delete the entries from the grid and the data source?
I tried below code, which deletes the entries from the page which is visible in the grid (on screen)
var grid = $("#grid").data("kendoGrid");var userSelectionInfo = usersService.getUserSelectionInfo(); for(var userName in userSelectionInfo) { if(userSelectionInfo[userName]) { var selector = '#' + userName+ '_actions'; grid.removeRow($(selector).closest('tr')); }}I tried one more approach:
I created an array of objects which will remain after deletion operation from the original array of objects and then added into the grid data source.
var newData = [];var userSelectionInfo = usersService.getUserSelectionInfo();for(var i = 0; i < users.length; i++) { if(users[i].userName&& !userSelectionInfo[users[i].userName]) { newData.push(users[i]); }} loadUsersIntoGrid(newData);
Hi all,
I have a custom form in my scheduler, and after one event is submitted, the recurrence editor does not reset. It holds, displays, and uses the previously entered recurrence data. What is the best way to manually achieve a recurrence editor reset? I couldn't find any information in the scheduler documentation about programatically editing the contents of the recurrence editor.
Thanks.