Telerik Forums
Kendo UI for jQuery Forum
7 answers
637 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
106 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
244 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
757 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
305 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
101 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
320 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
1 answer
85 views

Hi,

 I am trying to navigate through the grid using keyboard. I was going through this demo http://dojo.telerik.com/ayegE and when I reach the last item, keyboard navigation doesn't load next items.I tried to set the virtual scroll to true but that doesn't load the data. 

 

Thanks

Alexander Valchev
Telerik team
 answered on 08 Feb 2016
1 answer
1.8K+ views

Hi I have a kendo Grid that is bound to this kendo.Data.DataSource object:

 

var viewDataSource = new kendo.data.DataSource({
transport:{

read: { url: "xxx", datatype: "json", type: "GET"},
update: {url: "YYY",datatype: "json",type: "POST"},
parameterMap: function (options, operation) {           if (operation !== "read" && options) {return { models: kendo.stringify(options) };}}},
schema: {model: {
id: "divisionID",
fields: { divisionID: {type: 'number'},name: { type: 'string' },available: { type: 'boolean'},countryISOCode: { type: 'string'}}
}}});

 

The data source is bound to kendo grid 

$("#Grid").kendoGrid({
dataSource: viewDataSource,
editable: "inline",
editable: true,
scrollable: true,
toolbar: ["save", "cancel"],
sortable: {mode: "single",allowUnsort: true},
columns: [
                      { field: 'name', title: 'Division Name' },
                      { field: 'available', title: 'Available'},
                      { field: 'countryISOCode', title: 'Negotiation Country'}
  ]

}

 I follow the standard practice to define the data source and when I head save it give me an error " Cannot read property 'data' of undefined".

 

I am able to get around this problem by changing the definition of my model for the ID field from 'number' to 'string', if I do that then the Grid save will actually hit my POST url address.

 

I want to know if Kendo Grid suppose to support "Number" data type for ID or not ? Why do I care? Because on database we usually auto increment column and that tends to be number. My workaround would be converting this value from number to string on the repository layer. Its just bizarre.

 

Thanks!

Rosen
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?