Hello gents,
I saw that you offer support for ESRI with the map widget, can someone provide me an example on how that works, i mean there are example for 3 other types but not for this one, or i seemed to missed it.
Much appreciated.
Best.
I'm working on a simple prototype for using hierarchical grids and have used this as my baseline in the dojo and modified the dataSources to use locally defined data (instead of getting data back from the service). I'm able to get the parent rows to load fine, however, none of the child records are loading (detailInit appears to fire as the first row's dropdown icon points down and a space appears between the first and second row as shown in the attached screenshot).
I'm sure the issue is somewhat simple, although I've been unable to locate an example that would indicate what I'm doing wrong.
Here's the code I'm attempting to run:
01.<!DOCTYPE html>02.<html>03.<head>04. <base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">05. <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>06. <title></title>07. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />08. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />09. 10. <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>11. <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>12.</head>13.<body>14. 15. <div id="example">16. <div id="grid"></div>17. 18. <script>19. $(document).ready(function() {20. var attachments = new kendo.data.DataSource({21. data: [22. { attachmentId: 1321, Name: "Product Roadmap.pptx", Versions: "3", Title:""},23. { attachmentId: 1322, Name: "Release Timeline.xls", Versions: "1", Title:""},24. { attachmentId: 1324, Name: "Requirements Analysis.docx", Versions: "2", Title:""}25. ],26. schema: {27. model: {28. id: "id",29. expanded: true30. }31. }32. });33. 34. var versions = new kendo.data.DataSource({35. data: [36. { versionId: 1325, attachmentId: 1321, Status: "1321", VersionNumber: "1", Comment: "", Size:"1.23 MB", CreatedBy:"Landry, Kristi", CreationDate:""},37. { versionId: 1326, attachmentId: 1321, Status: "1321", VersionNumber: "2", Comment: "", Size:"1.87 MB", CreatedBy:"Landry, Kristi", CreationDate:""},38. { versionId: 1327, attachmentId: 1321, Status: "1321", VersionNumber: "3", Comment: "", Size:"1.91 MB", CreatedBy:"Smith, Michelle", CreationDate:""},39. { versionId: 1328, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"7.41 KB", CreatedBy:"Peters, Stacy", CreationDate:""},40. { versionId: 1329, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"4.43 MB", CreatedBy:"Franklin, Marshall", CreationDate:""},41. { versionId: 1330, attachmentId: 1322, Status: "1322", VersionNumber: "2", Comment: "", Size:"4.71 MB", CreatedBy:"Peters, Stacy", CreationDate:""}42. ]43. });44. 45. var element = $("#grid").kendoGrid({46. dataBound: function() {47. this.expandRow(this.tbody.find("tr.k-master-row").first()); 48. },49. dataSource: attachments,50. height: 600,51. sortable: true,52. pageable: true,53. detailInit: detailInit,54. columns: [55. {field: "attachmentId", title: "Attachment Id"},56. {field: "Name", title: "Name"},57. {field: "Versions", title: "Versions"},58. {field: "Title"}59. ]60. });61. });62. 63. function detailInit(e) {64. $("<div/>").appendTo(e.detailCell).kendoGrid({65. dataSource: {66. versions,67. filter: { field: "attachmentId", operator: "eq", value: e.data.attachmentId }68. },69. columns: [70. { field: "versionId", title: "Version Id"},71. { field: "Status"},72. { field: "VersionNumber", title:"Version Number"},73. { field: "Comment"},74. { field: "Size"},75. { field: "CreatedBy", title: "Created By"},76. { field: "CreationDate", title: "Creation Date"}77. ]78. });79. }80. </script>81. </div>82. 83. </body>84.</html>I've tried playing around with the filter on line 67 (including adding it to the versions datasource), but nothing seems to do the trick.
What am I missing?
I'm converting a jquery mobile app, a few pages at a time, and one page that is a kendo mobile ui page with 3 views:
1. tasklistfilterview is a view with an mvvm form that provides filtering info and then navigates to views 2 or 3 when they press the Go button.
2. tasklistgridview - shows results from view 1 in a grid
3. tasklistlistview - shows results from view 1 in a list
The user can then click a list item or grid item href with data-rel="external" that takes them to a detail view of the item.
My problem is when the user presses the back button, the grid or list views are shown as empty views with data-role="scollapsible". I'd like to show the filterview.
I've tried: kendo.mobile.application.navigate("tasklistfilterview") in the jquery ready event.
Hello,
I use last version of kendo ui library with angularjs and asp.net mvc 5 on server.
If I use remote data binding kendo.all.js return Maximum call stack size exceeded error.
Whats wrong?
Thanks
controller:
public class TestController : Controller{ [HttpGet, Route("category-tree")] public ActionResult TreeListCategories([DataSourceRequest] DataSourceRequest request) { var allCategories = new List<CategoryModel> { new CategoryModel {Id = 1, Name = "First", ParentCategoryId = null}, new CategoryModel {Id = 2, Name = "Second", ParentCategoryId = 1}, new CategoryModel {Id = 3, Name = "Third", ParentCategoryId = 2}, new CategoryModel {Id = 4, Name = "Fourth", ParentCategoryId = 3}, }; var result = allCategories.ToTreeDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } public class CategoryModel { public int? Id { get; set; } public string Name { get; set; } public int? ParentCategoryId { get; set; } }}
html code :
<kendo-tree-list k-options="treelistOptions"></kendo-tree-list>angular js code :
$scope.treelistOptions = { dataSource: { type: "aspnetmvc-ajax", transport: { read: { type:'GET', url: 'category-tree', } }, schema: { model: { Id: "categoryId",
ParentId:"parentCategoryId", fields: { categoryId: { field: "categoryId", type: "number", nullable: false }, parentCategoryId: { field: "parentCategoryId", nullable: true }, name: { field: "name" },} } } }, columns: [ { field: "Name" }, ], };
Hi
I'm having a problem where some shapes are blurred which reduces the visible appeal of my page. Again, I can't seem to be able to create a snippet with Dojo. I just get an error message saying "Can't create snippet. Retry"
In the example I posted below, you will see the line underlying the names show perfectly for some nodes and blurred for others.
The problem seems to occur when the number of levels is 3 or more.
Please help!
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/diagram/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.moonlight.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script><link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"><link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css"><link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"><script src="http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script></head><body><div id="example"> <div id="diagram"></div> <script> var data = [{ firstName: "Antonio", lastName: "Moreno", image: "antonio.jpg", title: "Team Lead", colorScheme: "#FFF", items: [{ firstName: "Elizabeth", image: "elizabeth.jpg", lastName: "Brown", title: "Design Lead", colorScheme: "#ef6944", items: [{ firstName: "Ann", lastName: "Devon", image: "ann.jpg", title: "UI Designer", colorScheme: "#ef6944" }] }, { firstName: "Diego", lastName: "Roel", image: "diego.jpg", title: "QA Engineer", colorScheme: "#ee587b", items: [{ firstName: "Fran", lastName: "Wilson", image: "fran.jpg", title: "QA Intern", colorScheme: "#ee587b" }] }, { firstName: "Felipe", lastName: "Izquiedro", image: "felipe.jpg", title: "Senior Developer", colorScheme: "#75be16", items: [{ firstName: "Elizabeth", image: "elizabeth.jpg", lastName: "Brown", title: "Design Lead", colorScheme: "#ef6944", items: [{ firstName: "Ann", lastName: "Devon", image: "ann.jpg", title: "UI Designer", colorScheme: "#ef6944" }] }, { firstName: "Diego", lastName: "Roel", image: "diego.jpg", title: "QA Engineer", colorScheme: "#ee587b", items: [{ firstName: "Fran", lastName: "Wilson", image: "fran.jpg", title: "QA Intern", colorScheme: "#ee587b" }] }, { firstName: "Felipe", lastName: "Izquiedro", image: "felipe.jpg", title: "Senior Developer", colorScheme: "#75be16", items: [{ firstName: "Daniel", lastName: "Tonini", image: "daniel.jpg", title: "Developer", colorScheme: "#75be16" }] }] }] }]; function visualTemplate(options) { var dataviz = kendo.dataviz; var g = new dataviz.diagram.Group(); var dataItem = options.dataItem; g.append(new dataviz.diagram.Rectangle({ width: 210, height: 75, stroke: { width: 0 }, fill: { gradient: { type: "linear", stops: [{ color: "#293540", offset: 0, opacity: 0.5 }, { color: "#293540", offset: 1, opacity: 0.6 }] } } })); g.append(new dataviz.diagram.Rectangle({ width: 110, height: 1, x: 80, y: 60, stroke: { width: 0, color: "#293540" }, fill: { gradient: { type: "linear", stops: [{ color: "#FFF", offset: 0, opacity: 0.1 }, { color: "#FFF", offset: 1, opacity: 1 }] } } })); g.append(new dataviz.diagram.TextBlock({ text: dataItem.firstName + " " + dataItem.lastName, x: 85, y: 20, fill: "#fff" })); g.append(new dataviz.diagram.TextBlock({ text: dataItem.title, x: 85, y: 40, fill: "#fff" })); g.append(new dataviz.diagram.Image({ source: "../content/dataviz/diagram/people/" + dataItem.image, x: 3, y: 3, width: 68, height: 68 })); return g; } function createDiagram() { $("#diagram").kendoDiagram({ dataSource: new kendo.data.HierarchicalDataSource({ data: data, schema: { model: { children: "items" } } }), layout: { type: "layered" }, shapeDefaults: { visual: visualTemplate }, connectionDefaults: { stroke: { color: "#979797", width: 2 } } }); var diagram = $("#diagram").getKendoDiagram(); diagram.bringIntoView(diagram.shapes); } $(document).ready(createDiagram); </script></div></body></html>For example:
<input id="myinput" data-role="autocomplete" data-delay = "100" data-min-length = "3" data-text-field = "value" data-source="WHAT GOES HERE???" />I can define a DataSource in my js and then specify the variable name in the markup, and that works, but I want to be able to define the datasource in the html.
Is it possible? If so, any examples? The demos and docs don't seem to show how to do this.
Here's my dataSource for reference:
billingEdit.dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: baseAreaUrl + "Lookup/CustomerKendo" } }, serverFiltering: true, schema: { data: "Data" } });I tried to copy the javascript object that I am passing to the datasource into the data-source and no go.
<!DOCTYPE html><html><head> <title>Basic usage</title> <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script> </head><body> <div id="example" class="k-content"> <div id="grid" style="height: 200px"></div> <br> <div id="grid2" style="height: 200px"></div> <br> <div id="grid3" style="height: 200px"></div> <br> <div id="grid4" style="height: 200px"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { data: createRandomData(50), pageSize: 10 }, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true }, width: "100%", resizable: true, columns: [ { field: "FirstName", width: 90, title: "First Name" } , { field: "LastName", width: 90, title: "Last Name" } , { width: 100, field: "City" } , { width: 100, field: "Title" } , { width: 100, field: "BirthDate", title: "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } , { width: 50, field: "Age" } ] }); $("#grid2").kendoGrid({ dataSource: { data: createRandomData(50), pageSize: 10 }, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true }, resizable: true, width: "100%", columns: [ { field: "FirstName", width: 90, title: "First Name" } , { field: "LastName", width: 90, title: "Last Name" } , { width: 100, field: "City" } , { field: "Title" } , { width: 100, field: "BirthDate", title: "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } , { width: 50, field: "Age" } ] }); $("#grid3").kendoGrid({ dataSource: { data: [], pageSize: 10 }, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true }, resizable: true, width: "100%", columns: [ { field: "FirstName", width: 90, title: "First Name" } , { field: "LastName", width: 90, title: "Last Name" } , { width: 100, field: "City" } , { width: 100, field: "Title" } , { width: 100, field: "BirthDate", title: "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } , { width: 50, field: "Age" } , { title: "Dummy" } ] }); $("#grid4").kendoGrid({ dataSource: { data: createRandomData(50), pageSize: 10 }, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true }, resizable: true, width: "100%", columns: [ { field: "FirstName", width: 90, title: "First Name" } , { field: "LastName", width: 90, title: "Last Name" } , { width: 100, field: "City" } , { width: 100, field: "Title" } , { width: 100, field: "BirthDate", title: "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } , { width: 50, field: "Age" } , { title: "Dummy" } ] }); }); var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"], lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"], cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"], titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer", "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"], birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];function createRandomData(count) { var data = [], now = new Date(); for (var i = 0; i < count; i++) { var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], lastName = lastNames[Math.floor(Math.random() * lastNames.length)], city = cities[Math.floor(Math.random() * cities.length)], title = titles[Math.floor(Math.random() * titles.length)], birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], age = now.getFullYear() - birthDate.getFullYear(); data.push({ Id: i + 1, FirstName: firstName, LastName: lastName, City: city, Title: title, BirthDate: birthDate, Age: age }); } return data;}function generatePeople(itemCount, callback) { var data = [], delay = 25, interval = 500, starttime; var now = new Date(); setTimeout(function() { starttime = +new Date(); do { var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], lastName = lastNames[Math.floor(Math.random() * lastNames.length)], city = cities[Math.floor(Math.random() * cities.length)], title = titles[Math.floor(Math.random() * titles.length)], birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], age = now.getFullYear() - birthDate.getFullYear(); data.push({ Id: data.length + 1, FirstName: firstName, LastName: lastName, City: city, Title: title, BirthDate: birthDate, Age: age }); } while(data.length < itemCount && +new Date() - starttime < interval); if (data.length < itemCount) { setTimeout(arguments.callee, delay); } else { callback(data); } }, delay);} </script> </div></body></html>