I am using a few Kendo Windows. I have finally got a bit of time to stop them from going outside of the browser screen so I thought that I would spend an hour getting this all set up and working nicely. I found the following article which I believe is meant to do what I need.
https://docs.telerik.com/kendo-ui/controls/layout/window/how-to/restrict-windows-position
I copied the code and worked it so that it was usable with my application, and I found that the widow would randomly jump to different sections of the screen as I was moving it, and sometimes off the screen completely. When I release the mouse, it seems to snap back to where my mouse is but this doesn't seem to be very restrictive.
Thinking it was me, I tested the example in the dojo on Chrome and IE, just to see if it was me, and I got the same result.
Have I misunderstood what the example is for? If not, could I get an example where it does not jump around on the screen?
Thanks,
Johannes

I have a master grid as follows:
@(Html.Kendo().Grid<Personnel3.Models.CheckDate>() .Name("grdCheckTimes") .Columns(cols => { cols.Template(t => { }).ClientTemplate("#=dayOfWeek[Date.getDay()]#"); cols.Bound(c => c.Date).Title("Date").ClientTemplate("#=pad('00', Date.getDate().toString(), true)#-#=monthName[Date.getMonth()]#-#=Date.getFullYear()#"); //cols.Template(t => { }).ClientTemplate("[<a href='javascript:edit()'>Edit</a>] [<a href='javascript:delete()'>Delete</a>]"); }) .ClientDetailTemplateId("checkTimesDetail") .DataSource(ds => ds.Ajax() .Read(read => read.Action("GeneratePayPeriodWeek", "CheckTime").Data("sendPayPeriodAndLeaveYear")) //.Update(update => update.Action("UpdateCheckTime", "CheckTime").Data("sendPayPeriodAndLeaveYear")) //.Destroy(destroy => destroy.Action("DeleteCheckTime", "CheckTime").Data("sendPayPeriodAndLeaveYear")) .Model(model => model.Id("Date")) ) )
here's the Template:
<script id="checkTimesDetail" type="text/x-kendo-template"> @(Html.Kendo().Grid<Personnel3.Data.in_out>() .Name("grdInOut_#=CheckDateId#") .Columns(cols => { cols.Bound(c => c.in_date_time).Title("In Time") .ClientTemplate("#if(in_out_explanation != ''){#<a href='javascript:void(0)'>#=in_date_time#</a>#}else{##=in_date_time##}#"); }) .DataSource(ds => { ds.Ajax().Read(read => read.Action("GetCheckTimesFortheDay", "CheckTimes", new { checkDate = "#=Date.toLocaleDateString()#" })); }).ToClientTemplate() )</script>it throws the following error:
Unhandled exception at line 3827, column 3 in http://localhost:1806/Personnel/Scripts/jquery-3.3.1.js
0x800a139e - JavaScript runtime error: Invalid template:'
<div class="k-widget k-grid" id="grdInOut_#=CheckDateId#"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="in_date_time" data-index="0" data-title="In Time" id="1f073454-eafa-4f2b-b276-9dced2c5b10d" scope="col"><span class="k-link">In Time</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script>
kendo.syncReady(function(){jQuery("\#grdInOut_#=CheckDateId#").kendoGrid({"columns":[{"title":"In Time","headerAttributes":{"data-field":"in_date_time","data-title":"In Time","id":"1f073454-eafa-4f2b-b276-9dced2c5b10d"},"template":"#if(in_out_explanation != \u0027\u0027){#\u003ca href=\u0027javascript:void(0)\u0027\u003e#=in_date_time#\u003c/a\u003e#}else{##=in_date_time##}#","field":"in_date_time","encoded":true}],"scrollable":false,"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Personnel/CheckTimes/GetCheckTimesFortheDay?checkDate=#=Date.toLocaleDateString%28%29#"},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"pay_period_id":{"type":"number"},"leave_year_id":{"type":"number"},"employee_id":{"type":"number"},"in_date_time":{"type":"date"},"out_date_time":{"type":"date","defaultValue":null},"in_system_date_time":{"type":"date","defaultValue":null},"out_system_date_time":{"type":"date","defaultValue":null},"changed":{"type":"boolean","defaultValue":null},"last_in_update":{"type":"date","defaultValue":null},"last_out_update":{"type":"date","defaultValue":null},"in_out_explanation":{"type":"string"},"in_out_explanation2":{"type":"string"},"pay_period":{"type":"object"}}}}}});});
<\/script>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n <div class="k-widget k-grid" id="grdInOut_'+(CheckDateId)+'"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="in_date_time" data-index="0" data-title="In Time" id="1f073454-eafa-4f2b-b276-9dced2c5b10d" scope="col"><span class="k-link">In Time</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script>\n\tkendo.syncReady(function(){jQuery("#grdInOut_'+(CheckDateId)+'").kendoGrid({"columns":[{"title":"In Time","headerAttributes":{"data-field":"in_date_time","data-title":"In Time","id":"1f073454-eafa-4f2b-b276-9dced2c5b10d"},"template":"';if(in_out_explanation != \u0027\u0027){;$kendoOutput+='\u003ca href=\u0027javascript:void(0)\u0027\u003e'+(in_date_time)+'\u003c/a\u003e';}else{;$kendoOutput+=''+(in_date_time)+'';};$kendoOutput+='","field":"in_date_time","encoded":true}],"scrollable":false,"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports[\'aspnetmvc-ajax\']){return \'aspnetmvc-ajax\';} else{throw new Error(\'The kendo.aspnetmvc.min.js script is not included.\');}})(),"transport":{"read":{"url":"/Personnel/CheckTimes/GetCheckTimesFortheDay?checkDate='+(Date.toLocaleDateString%28%29)+'"},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"pay_period_id":{"type":"number"},"leave_year_id":{"type":"number"},"employee_id":{"type":"number"},"in_date_time":{"type":"date"},"out_date_time":{"type":"date","defaultValue":null},"in_system_date_time":{"type":"date","defaultValue":null},"out_system_date_time":{"type":"date","defaultValue":null},"changed":{"type":"boolean","defaultValue":null},"last_in_update":{"type":"date","defaultValue":null},"last_out_update":{"type":"date","defaultValue":null},"in_out_explanation":{"type":"string"},"in_out_explanation2":{"type":"string"},"pay_period":{"type":"object"}}}}}});});\n<\/script>\n';}return $kendoOutput;' occurred
I can't figure out what I am doing wrong.
Hi,
Is there a method to clear all data from a specified sheet?
Thanks!
Hi,
We are using Kendo UI controls for ASP.NET MVC and we are in the middle of updating the kendo libraries (from version 2016.1.112 to 2017.3.1018). One of the things that have changed is how the DateTimePicker is displaying dates. We are using the 'g' specifier to display dates according to the user's culture. Previously for Polish culture ('pl-PL') the date was displayed as 'yyyy-MM-dd HH:mm' - now it is displayed as 'dd.MM.yyyy HH:mm' (with dots and in different order).
The problem besides the date being displayed in the incorrect format is that when the form is send to the server, the date cannot be parsed and bound to a correct DateTime object ('The value '24.11.2017 00:00' is not valid for Current date.' error).
Could you tell us how to get this working as it did previously?

Good day,
I'd like my chart toonly render every n-th label if the slot size is not sufficient for the entire labels.
So I'd like to set the step to "auto" just like the "CategoryAxis.labels.rotation" can be set to "auto".
Is there a way to achive that?
Best of wishes
I'm creating a Treeview using the TreeViewBuilder in MVC
Like this:
Html.Kendo().TreeView().Name("TreeViewTemplateBiding")...
Which I can see renders in the page as
<div class="k-widget k-treeview k-reset" id="TreeViewTemplateBiding"><ul class="k-group">...</div>
<script>
kendo.syncReady(function(){jQuery("#TreeViewTemplateBiding").kendoTreeView({"select":onSelect,"check":onCheck});});
</script>
I created a custom legend visual for some column charts we are using. When I tried to apply the same visual to a pie chart the series name is undefined. I see there is a e.options.series.data[] property but I have no way to figure out what index I am currently on. How do you create a custom legend item for a pie chart?
I created an example of the issue. Line 56.
http://plnkr.co/edit/WJ2J5Meor3AVC5pckhXk?p=preview
Currently when an event is selected in a scheduler a black border is applied. This is not very apparent and I'd like to change the colour and thickness to a red or lime green to make it stand out more.
Which css class do I need to override?
Thanks
I want to open a kendo window with the data from a grid on the same page. I've done this with single selected items, but not with the list of items in the grid.
What's the proper method to serialize the data?
Here is some code
controller
public PartialViewResult WindowPartialView(IEnumerable<MyGridModel> models) return PartialView(models); }in window
.LoadContentFrom("WindowPartialView", "MyController")
function openPlacardWindow() { debugger; var grid = $("#MyGrid").data("kendoGrid"); var gridData = grid.dataSource.data(); var win = $('#myWindow').data("kendoWindow"); win.refresh({ data: gridData }); //not correct win.center(); win.open(); }
Hi,
I am trying to update Kendo Grid row inline, but getting a bad request when doing so.
Reading from the list work just fine, but I am not able to update.
Any ideas?
var dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "?$top=2000", type: "GET", dataType: "json", contentType: "application/json;odata=verbose", headers: { "accept": "application/json;odata=verbose" } }, // ... update: { url: function (data) { return crudServiceBaseUrl + "(" + data.ID + ")"; }, type: "POST", dataType: "json", data: JSON.stringify({ "__metadata": { type: "SP.Data.MasterListItem" } }), contentType: "application/json;odata=verbose", headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val(), "X-HTTP-Method": "MERGE" }, }, //... parameterMap: function (data, type) { if (type == "update") { for (var property in data) { if (property != "__metadata") delete data[property]; } } return JSON.stringify(data); } }, error: function (e, data) { console.log("Status: " + e.status + "; Error message: " + e.errorThrown ); }, pageSize: 15, schema: { data: function (data) { return data.d && data.d.results; }, total: function (data) { return data.d.results.length; }, model: { id: "Id", fields: { Id: { type: "number", editable: false, nullable: false }, Title: { type: "string", validation: { required: true } }, OWNER: { type: "string", validation: { required: false } } } } }, //batch: false, //serverPaging: true, sort: { field: "OWNER", dir: "desc" } });