Telerik Forums
Kendo UI for jQuery Forum
1 answer
422 views

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
                },

 

 

Dimo
Telerik team
 answered on 08 Feb 2016
3 answers
134 views

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

Georgi Krustev
Telerik team
 answered on 08 Feb 2016
7 answers
640 views
Hi there.
I´ve seen your samples with kendo mobile application. I´m trying to set up a solution with angularjs and kendo mobile.
I need a drawer with left and right in angular (without kendo.mobile.application). Couldn´t get it work. Has some one a sample for me ?
Kiril Nikolov
Telerik team
 answered on 08 Feb 2016
1 answer
109 views

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?

Kiril Nikolov
Telerik team
 answered on 08 Feb 2016
5 answers
251 views

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

Iliana Dyankova
Telerik team
 answered on 08 Feb 2016
1 answer
168 views

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.

Vladimir Iliev
Telerik team
 answered on 08 Feb 2016
4 answers
761 views
I have grid with datasource:
$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" }
                        ]
                    });

and options:

{
                            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 });
                                }
                            }
                        }

I want to edit cell and go with tab to next cell, edited value should be saved. Problem is that my datasource calculate grid row (on change value) and sync it. Probably it causes focuslost and when I pres tab on edited cell, foscus moved to first cell and start tabbing from begining. 

How can I fix it ?
Thomas
Top achievements
Rank 1
 answered on 08 Feb 2016
1 answer
313 views

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.

Vladimir Iliev
Telerik team
 answered on 08 Feb 2016
1 answer
104 views
Is it possible to automatically update a Area graph based on the slider. how to update the graph once the position in the slider has changed, I want to know is it possible to have the Area graph up date as the slider is being pulled. I have created an Area graph in kendo UI with X-axis as string values and i want my slider to listen those values.
Petyo
Telerik team
 answered on 08 Feb 2016
1 answer
326 views

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? 

 

Petyo
Telerik team
 answered on 08 Feb 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?