Hi,
I've just implemented the read, update, create, destroy events for my datasource which fire ajax calls to their respective endpoints triggered by buttons on a Kendo UI Grid. However, if I create a record in the grid (and subsequently the datasource) I can see it hitting the end point, if I then delete the same record it does not trigger the destroy event. If a record is created, the page is refreshed then the delete event fires when the button is pressed. I tried adding a datasource read and sync to the success component of the ajax call but this caused an indefinite loop of reading and syncing without completing the required task.
Could you please let me know how I can force the delete trigger to fire even if the datasource assumes the record is only stored locally.
Thanks,
Ben

I'm working on a project which uses a button to open a kendo window. Inside this kendo window is a splitter which splits the window vertically 50%. On the left side is a kendo treeview control and on the right, a gridview will appear via the treeview's select event. This works but only once. I then have to refresh the page to get it to work again. I'm not sure why this is. I'll include some example code below. Thank you for your help.
Here's the HTML for the window and the grid
<div id="example"> <div id="window"> <div id="horizontal" style="height: 100%; width: 100%;"> <div id="left-pane"> <div class="component-tree-view k-content"> <div id="treeview-left"></div> </div> </div> <div id="grid"> </div> </div> </div></div>
This is the javascript to initialize the the splitter and the window
$(document).ready(function() { $("#horizontal").kendoSplitter({ panes: [ { collapsible: true }, { collapsible: false }, { collapsible: true } ] }); var myWindow = $("#window"); myWindow.kendoWindow({ width: "1500px", title: "Parts Group", height:"500px", visible: false, actions: [ "Close" ], }).data("kendoWindow").center().open(); });
And this is my select event for the treeview to initialize the grid.
function onselect(e) { //initializing the grid here $("#grid").kendoGrid({ toolbar: [ { template: kendo.template($("#template").html()) } ], dataSource: { data: filteredData, schema: { model: { fields: { ComponentId: { from: "ComponentId", filterable: true, }, Description: { from: "Description", filterable: true, } } } } }, selectable: true, change: onChange, allowCopy: true, height: 500, scrollable: false, sortable: true, refresh: true, columns: [ { field: "ComponentId", title: "Component Id", template: "#=test(data)#", filterable: true }, { field: "Description", title: "Description", template: "#=description(data)#", filterable: true } ], }); }
Hello,
My company wants to start using the Kendo UI Scheduler component. They have given me a set of functional requirements about how they want to use the component. My question is, are all these requirements possible in this component, while staying as close as possible to the original component.
- Plan items in the week view, while having very specific day time slots. When a new item is created, it should fit inside one class of 50 minutes. However a item can be made short/longer manually.
See screenshot Timetable Group - adjusted. If swapping the axis around would make things easier, that would be possible!
- Items are moveable (Drag and Drop) and resizeable. Like here: https://demos.telerik.com/kendo-ui/scheduler/move-resize
- Work with different Groups, like group the data on 'classroom', 'teacher' or 'student group'. All in combination with the first requirement, of course. Like here: https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-horizontal
- PDF Export
Please advise.
Kind regards,
Maries Koole


For the cell content in a treemap, in addition to the title text I would like to have a secondary piece of data that is centered in the cell.
It would also be nice if the font size of the centered item changes with the size of the cell (i.e. big cell == big font, small cell == small font)
Are either of those things possible?
Hello
I'm trying to display google maps into a KendoUI Mobile view. The map doesn't appear and there is also no error in the console. Do I have to consider something special?
My working code so far:
<!DOCTYPE html><html><head> <title>My App</title> <link href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=YourAppKey"></script></head><script> function initMap() { var location = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('showmap'), { zoom: 4, center: location }); } $(document).ready(function() { app = new kendo.mobile.Application($(document.body), { skin: 'flat', transition: 'slide', initial: "mapview", init: function () { initMap(); } }); });</script><body><!-- View map --><div id="mapview" data-role="view" data-layout="default"> <div>Some text</div> <div id="showmap"></div> // <-- Should display google maps</div></body></html>(Replace "YourAppKey" with your app key of google maps)
My project heavily depends on google maps. So I hope there is a solution to display google maps (in a view).
Regards

We've giving our users a list of items to pick from when reviewing previously submitted data. The statuses they can pick from are Pending, Approved and Rejected.
We're seeing very weird behavior when someone activates the pick list in the A column and displays the options but does not choose a value. They then visit another page on the site. Then when they return to the spreadsheet to select a value again, the button to open the pick list appears when the cell is selected, but when clicked, the button does not display the list of options. Actually, nothing happens when you click the dropdown button. The only way to remedy this issue is to logout of the application, log back in and then visit the table again.
We are not setting any login/account related criteria on the button, just providing the 3 options to choose from. I've tried replicating this using a DOJO on your site and wasn't able to get the same results.
Here is the JSON we're using to populate the spreadsheet. Is there something wrong with my configuration or do you think there might be a bug in your code?
spreadsheet.fromJSON({"sheets":[{"frozenRows":1,"name":"Lot Tracking","rows":[{"cells":[{"value":"Status"}]},{"cells":[{"value":"Rejected","color":"#D0021b","bold":true,"validation":{"allowNulls":false,"dataType":"list","comparerType":"list","from":"{ \"Pending\", \"Approve\", \"Reject\" }","showButton":true,"type":"reject"},"enable":true}]},{"cells":[{"value":"Rejected","color":"#D0021b","bold":true,"validation":{"allowNulls":false,"dataType":"list","comparerType":"list","from":"{ \"Pending\", \"Approve\", \"Reject\" }","showButton":true,"type":"reject"},"enable":true}]}]}]});
Thanks in advance for your help.
Greg
So I have provided a dojo of the problem in action. Not sure what is going wrong or how to fix it. http://dojo.telerik.com/aFiKaJEK
I have cut out the rest of the controls and limited it to a sortable list with some items.
What should happen:
When moving the items up/down the list it should reorder the datasource "Columns" so that the order reflects what is on the screen (as this will be saved back at some point)
When reordering the items the vm list is the correct size and in the correct order but the templating is adding a "phantom/duplicate" item on the screen. Is this by design or am I doing something wrong.
If you press the x to remove items from the datasource this again is updating correctly but as soon as there is an interaction with moving items around the collection it will add these duplicate items to the screen.
Any advice on how I can resolve this?