Just trying out this framework. I am developing in Xpages (basically JSP). I have a rest service that I can call from the browser and get JSON data.
I am consuming data from this rest service in other applications.
I got a grid to work in a page using Kendo, with local data and data from the kendo service.
When I try to hook it up to my rest service I get the error ==
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxx' is therefore not allowed access.
I believe this is a cross domain security feature, however, the service is from the same domain.
My code looks like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "http://xxxxxxxxx"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},

Hello,
Lately I upgraded my program to use latest version of kendo. I encountered weird behaviour. If I get for example data from webapi and then call o.success then the model is setup as id of the first element. Before it wasnt like that. Did something change, is it a bug or maybe its supposed to work like that? Another thing is that If I set a static data in o.success then my model isnt set.
Example:
http://dojo.telerik.com/iDOGU
I've made a few corrections and additions to the kendo-ui definitions on DefinitelyTyped, but so far it doesn't look like Telerik takes pull requests for it.
- Should I instead fork and submit pull requests to the telerik/DefinitelyTyped repo?
- If the definition is auto-generated, what's the best way to contribute corrections for future revisions?
I'm seeing an issue with the styling of locked column headers inside tabbed grids. If the unlocked columns are part of groupings, and the locked column isn't, when I change tabs the locked column header loses the correct height. I've mocked up a simple example demonstrating the problem.
http://dojo.telerik.com/OMiSa
Thanks
I tried this on the demo page, just to verify.
After creating a recurring event, if you double click on one event in the series and select "Edit Series", you can change all the details of the recurring event. If you only change the time, all the events in the recurrence move to that time. As expected. The Start Date stays the same, by default. If you go into week view and drag any of the recurring events except for the first one to a new time and select "Edit Series" it starts the recurrence pattern on the selected date instead of just changing the times of all the events.
I have attached some screen shots.
Thanks.
$scope.taxRatesDataSource = new kendo.data.DataSource({ autoSync: true, data: [{ taxRatesVatRate: null, taxRatesNetAmount: null, taxRatesVatValue: null, taxRatesGrossAmount: null, taxRatesCategory: null}], schema: { model: { fields: { taxRatesVatRate: { }, taxRatesNetAmount: { type: "number" }, taxRatesVatValue: { type: "number" }, taxRatesGrossAmount: { type: "number" },taxRatesCategory: { } } } }, change: function(data){ if($scope.syncChange == false && data != null && data.items != null && data.items.length > 0){ if($scope.lastEditColTaxRates == 0 || $scope.lastEditColTaxRates == 1) { for (var i = 0; i < data.items.length; i++) { if (data.items[i].taxRatesVatRate != null && data.items[i].taxRatesVatRate != undefined && data.items[i].taxRatesNetAmount != null && data.items[i].taxRatesNetAmount != undefined) { data.items[i].taxRatesVatValue = data.items[i].taxRatesNetAmount * $scope.vatRateMultiplier(data.items[i].taxRatesVatRate); data.items[i].taxRatesGrossAmount = data.items[i].taxRatesVatValue + data.items[i].taxRatesNetAmount; } if (valueToCategoryTaxRates != null) { if (data.items[i].uid == valueToCategoryTaxRates.uid) { data.items[i].taxRatesCategory = valueToCategoryTaxRates; valueToCategoryTaxRates = null; } } } } else if($scope.lastEditColTaxRates == 2){ for (var i = 0; i < data.items.length; i++) { if (data.items[i].taxRatesVatValue != null && data.items[i].taxRatesVatValue != undefined && data.items[i].taxRatesNetAmount != null && data.items[i].taxRatesNetAmount != undefined) { data.items[i].taxRatesGrossAmount = data.items[i].taxRatesVatValue + data.items[i].taxRatesNetAmount; } if (valueToCategoryTaxRates != null) { if (data.items[i].uid == valueToCategoryTaxRates.uid) { data.items[i].taxRatesCategory = valueToCategoryTaxRates; valueToCategoryTaxRates = null; } } } } $scope.syncChange = true; $scope.taxRatesDataSource.sync(); } else { $scope.syncChange = false; } }, aggregate:[ { field:"taxRatesNetAmount", aggregate:"sum" }, { field:"taxRatesVatValue", aggregate:"sum" }, { field:"taxRatesGrossAmount", aggregate:"sum" } ] });{ columns: [ { field: "taxRatesVatRate", title: translations["ALL.CORRECT.TAX_RATE_VAT_RATE"], width: 40, footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\"></div>", values: $scope.vatRates, template: function(dataItem){ if(dataItem != null && dataItem != undefined && dataItem.taxRatesVatRate != null && dataItem.taxRatesVatRate != undefined){ if(dataItem.taxRatesVatRate.text != undefined){ return dataItem.taxRatesVatRate.text } else { for(var i =0; i < $scope.vatRates.length; i++){ if($scope.vatRates[i].value == dataItem.taxRatesVatRate){ return $scope.vatRates[i].text; } } return "" } } else { return "" } } }, { field: "taxRatesNetAmount", title: translations["ALL.CORRECT.TAX_RATE_NET_AMMOUNT"], width: $scope.amountWidth, editor: editNumber, "attributes": { "class": "currencyCell" }, aggregates: ["sum"], footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\">#=sum != null ? kendo.toString(sum,'0.00') : 0#</div>",//"<div style=\"text-align:right;\">#=sum != null ? kendo.toString(sum,'0.00') : 0# {{cultureCurrency}}</div>", template: function(dataItem){ if(dataItem != null && dataItem != undefined && dataItem.taxRatesNetAmount != null && dataItem.taxRatesNetAmount != undefined){ return kendo.toString(dataItem.taxRatesNetAmount,'#,##.00'); } else { return kendo.toString(0.0,'#,##.00'); } } }, { field: "taxRatesVatValue", title: translations["ALL.CORRECT.TAX_RATE_VAT_VALUE"], width: $scope.amountWidth, editor: editNumber, "attributes": { "class": "currencyCell" }, aggregates: ["sum"], footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\">#=sum != null ? kendo.toString(sum,'0.00') : 0#</div>", //"<div style=\"text-align:right;\">#=sum != null ? kendo.toString(sum,'0.00') : 0# {{cultureCurrency}}</div>", template: function(dataItem){ if(dataItem != null && dataItem != undefined && dataItem.taxRatesVatValue != null && dataItem.taxRatesVatValue != undefined){ return kendo.toString(dataItem.taxRatesVatValue,'#,##.00'); } else { return kendo.toString(0.0,'#,##.00'); } } }, { field: "taxRatesGrossAmount", title: translations["ALL.CORRECT.TAX_RATE_GROSS_AMOUNT"], width: $scope.amountWidth, editor: editNumber, "attributes": { "class": "currencyCell" }, aggregates: ["sum"], footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\">#=sum != null ? kendo.toString(sum,'0.00') : 0#</div>", //"<div style=\"text-align:right;\">#=sum != null ? kendo.toString(sum,'0.00') : 0# {{cultureCurrency}}</div>", template: function(dataItem){ var value = ""; if(dataItem != null && dataItem != undefined && dataItem.taxRatesGrossAmount != null && dataItem.taxRatesGrossAmount != undefined){ return kendo.toString(dataItem.taxRatesGrossAmount,'#,##.00'); } else { return kendo.toString(0.0,'#,##.00'); } } }, { field: "taxRatesCategory", title: translations["ALL.CORRECT.TAX_RATE_CATEGORY"], footerTemplate: "<div style=\"text-align:right; font-size: 0.9em;\"></div>", editor: function(container, options){ $scope.categoryOptions.dataBound = function(event) { event.sender.list.width(300); }; $('<input id="' + options.model.uid + '" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoComboBox($scope.categoryOptions).bind("change", function(e){ var ko = $("#" + this.id).data("kendoComboBox"); var selectedItem = ko.dataItem(ko.select()); valueToCategoryTaxRates = { uid: this.id, id: selectedItem.id, accountNumber: selectedItem.accountNumber, accountNumberCosts: selectedItem.accountNumberCosts, displayName: selectedItem.displayName, company: selectedItem.company, isActive: selectedItem.isActive, isDeleted: selectedItem.isDeleted, name: selectedItem.name }; }); $('<span class="k-invalid-msg" data-for="' + options.field + '"></span>').appendTo(container); }, template: function(dataItem){ if(dataItem != null && dataItem != undefined && dataItem.taxRatesCategory != null && dataItem.taxRatesCategory != undefined){ return dataItem.taxRatesCategory.displayName; } else { return ""; } } } ], navigatable: true, edit: function(e){ var vatComponent = $("[name='taxRatesVatRate']"); if(vatComponent.length > 0) { vatComponent.data("kendoDropDownList").list.width(70); } var ddl = e.container.find(".k-widget").focus(); if(ddl != null && ddl != undefined && ddl.length > 0) { var colIdx = e.container[0].cellIndex; $scope.lastEditColTaxRates = colIdx; var rowIdx = -1; for(var i = 0; i < e.sender._data.length; i++){ if(e.sender._data[i].uid == e.model.uid){ rowIdx = i; break; } } $scope.$broadcast('corr:showGridBox', {grid: 'taxRates', 'row': rowIdx, 'col': colIdx }); } } }Hello,
I try to apply showWorkHours:false on day view on my sheduler, according to this manual: http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#configuration-showWorkHours
It looks like this:
views: [
{
type: "day",
showWorkHours: false,
...}
But on my sheduler in day view there are still grey slots from 17:00 and later. With the class: k-nonwork-hour.
Am I missunderstanding this fucntion, or is there some some possibility, that something is overwriting shis setting?
Thanks for your answer.
I am trying an experiment with the Kendo UI Navbar and have run into a problem.
I am new to AngularJS and to Kendo UI as well so I could be doing something dumb.
I want to wrap the Navbar and encapsulate some of the 'fluff' in directives so when it comes to add the navigation bar to the page all I have to do is something like this.
<my-navigation-bar>
<my-navigation-item>Item One</my-navigation-item>
<my-navigation-item>Item Two</my-navigation-item>
</my-navigation-bar>
I have created 2 directives.
The first directive is for wrapping it NavBar body
angular.module('myapp.navigation')
.directive('myNavigationBar', function() {
return {
restrict: 'E',
templateUrl: 'components/navigation/directives/navigationbar.html',
transclude: true,
replace:true,
template: '<div class="c-navigation-bar">' +
' <ul kendo-panel-bar k-options="panelBarOptions" ng-controller="MyCtrl" ng-transclude></ul>' +
'</div>' }});
The second directive is for the items
angular.module('myapp.navigation')
.directive('myNavigationItem', function() {
return {
restrict: 'E',
replace: true,
template: '<li>' +
'<a class="ng-scope" ui-sref="tools">' +
'<span class="myspecial-icon myspecial-icon-wrench
myspecial-icon-lg" name="wrench" large=""></span> ' +
' <span class="nav-label" ng-transclude></span></a></li>'
});
For the most part, it is working at least as far as how everything is being rendered.
The problem is the items are not associated with the NavBar. The role (role="menuitem") isnt being added to the LI elements and none of the styles associated with the items work. For example, the hover effects. The items are just being displayed like normal LI elements.
This is what gets rendered:
<ul role="menu" tabindex="0" data-role="panelbar" class="ng-scope k-widget k-reset k-header k-panelbar" kendo-panel-bar="" k-options="panelBarOptions" ng-controller="MyCtrl" ng-transclude="">
<li class="ng-scope k-item k-state-default k-first">
<a class="ng-scope" ui-sref="tools">
<span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""/>
<span class="nav-label" ng-transclude="">
<span class="ng-scope">Item One</span>
</span>
</a>
</li>
<li class="ng-scope k-item k-state-default k-last">
<a class="ng-scope" ui-sref="tools">
<span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""/>
<span class="nav-label" ng-transclude="">
<span class="ng-scope">Item Two</span>
</span>
</a>
</li>
</ul>
The above doesnt work.
If I just put the LI items in the template for the myNavigationBar and remove this is what is rendered and it works just as I would expect:
<ul ng-controller="MyCtrl" k-options="panelBarOptions" kendo-panel-bar="" class="ng-scope k-widget k-reset k-header k-panelbar" data-role="panelbar" tabindex="0" role="menu">
<li class="k-item k-state-default k-first" role="menuitem">
<a ui-sref="tools" class="ng-scope k-link k-header">
<span large="" name="wrench" class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg"></span>
<span class="nav-label">Item One</span>
</a>
</li>
<li class="k-item k-state-default k-last" role="menuitem">
<a ui-sref="tools" class="ng-scope k-link k-header">
<span large="" name="wrench" class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg"></span>
<span class="nav-label">Item Two</span>
</a>
</li>
</ul>
So, any ideas why, when using transclusion for the individual NavBar items as well as the main item, that the items are not correctly associated with the navbar?