Telerik Forums
Kendo UI for jQuery Forum
1 answer
119 views
Hello,

Is there some skinning available for the navigation control in the GeoJson map?
If yes then please let me know how to use the sin's in the GeoJson map.

Thanks,
Ram.
Iliana Dyankova
Telerik team
 answered on 29 Apr 2016
1 answer
739 views

Hi..

Im using kendo mutliselect and dropdown list using angular js. i want to display items not available if items are not there.

i tried with select event its working only if drop down is not in repeat and with id,how can i do if drop down or multi select is with in ng-repeat. and if i use select event i need to do more code,is there any alternative to solve this issue?

here is my code for multi select:

  <select kendo-multi-select k-ng-model="manageResource.asset.operators"
                                            k-data-text-field="'name'"
                                            k-data-value-field="'operatorId'"
                                            k-data-source="manageResource.authorisedOperator"
                                            k-options="manageResource.customOptions" k-rebind="manageResource.customOptions"></select>

 

manageResource.customOptions = {
                    placeholder: "Select Operator",
                    valuePrimitive: true,
                    autoBind: false,
                    headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                    '<span>Photo</span>&nbsp;&nbsp;' +
                    '<span>Employee Name</span>' +
                    '</div>',
                    itemTemplate: '<span class="k-state-default">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>&nbsp;&nbsp;' +
                    '<span class="k-state-default">#: data.name #</span>',
                    tagTemplate: '<span class="selected-value">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>' +
                    '<span>#:data.name#</span>'
                }

Thank.

Dimo
Telerik team
 answered on 29 Apr 2016
1 answer
439 views

Hi..

Im using kendo gantt chart. im giving option to view gantt chart data in full screen mode.im customizing the edit option for each task.when chart is in full screen mode if i trie to edit task details popup is opening behind the full screen,how to open popup infront of full screen 

here is my code for gantt chart full screen

View:

 

   <div id="activityganttchart" kendo-gantt k-options="createScheduleStep2.ganttOptions" class="row"
                 k-rebind="createScheduleStep2.ganttOptions"></div>
            <button class="grid-action-btn fullscreenBtn rightalign tooltipstyle action-gird-btn" uib-tooltip="Full screen" data-toggle="tooltip" tooltip-placement="top" ng-click="createScheduleStep2.toggleFullScreen()"><i class="settinggrid fa fa-arrows-alt"></i></button>

 

controller:


            function toggleFullScreen(control: string) {
                if (!document.fullscreenElement &&
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                    if (document.getElementById(control).requestFullscreen) {
                        document.getElementById(control).requestFullscreen();
                    } else if (document.getElementById(control).msRequestFullscreen) {
                        document.getElementById(control).msRequestFullscreen();
                    } else if (document.getElementById(control).mozRequestFullScreen) {
                        document.getElementById(control).mozRequestFullScreen();
                    } else if (document.getElementById(control).webkitRequestFullscreen) {
                        var element: any = Element;
                        document.getElementById(control).webkitRequestFullscreen(element.ALLOW_KEYBOARD_INPUT);
                    }
                    return true;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                    return false;
                }
            }

            function onToggleFullScreen() {
                var editor = $("#activitygantt");
                if (toggleFullScreen("activitygantt")) {
                    editor.children()[1].style.setProperty("height", $(document).height() + "px");
                    editor.children()[1].style.setProperty("width", $("body").width() + "px");
                } else {
                    editor.removeClass('fullscreenMode');
                    editor.children()[1].style.setProperty("height", "400px");
                    editor.children()[1].style.setProperty("width", "1573px");
                }
            };

            function exitHandler() {
                var editor = $("#activitygantt");
                if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                    editor.addClass('fullscreenMode');
                } else {
                    editor.removeClass('fullscreenMode');
                    editor.children()[1].style.setProperty("height", "400px");
                    editor.children()[1].style.setProperty("width", "1573px");
                    var ganntchart = $('#activityganttchart').data('kendoGantt');
                    ganntchart.wrapper.css("height", "400px");
                    ganntchart.resize();
                }
            }


            if (document.addEventListener) {
                document.addEventListener('webkitfullscreenchange', exitHandler, false);
                document.addEventListener('mozfullscreenchange', exitHandler, false);
                document.addEventListener('fullscreenchange', exitHandler, false);
                document.addEventListener('MSFullscreenChange', exitHandler, false);
            }

Appreciate your support!
Thanks!

Bozhidar
Telerik team
 answered on 29 Apr 2016
4 answers
1.0K+ views
I am using a Kendo window for a data entry form and when saving changes I want to call the same overlay with loading image that the Kendo grid is using.

I put in a div in my Kendo window:

    <div id="divTest">
    </div>

In my save changes function I am calling kendo.ui.progress:

    var divTest= $("#divTest");
    kendo.ui.progress(divTest, true);

Then I have a callback after the save where I turn it off with the same code above except for sending in false.

This works great.  Except that I have a number of Kendo widgets on my window (Slider, NumericTextbox, DatePicker) and everything else on the window is blocked except for these widgets due to their z-index, so these appear on top of the overlay.

We have a css file that we load after kendo.common.css, and we use this when we want to override styles in kendo.common.css.

So, in there I have the following (right now I'm using 99999 for testing; just wanted to set it to something I knew would be higher than the widgets):

    .k-loading-mask
    {
        z-index: 99999;
    }

This seems to work fine and resolves the issue, but I just wanted to see if this would be a recommended approach or if I'm missing something else I can do here?

Thank you.
Dimo
Telerik team
 answered on 29 Apr 2016
2 answers
115 views
As titled. Our project previously built the custom kendo-ui script by http://www.telerik.com/download/custom-download and include it in the project direclty, but we would like to use bower to manage kendo-ui script now. However, looks like bower can only install the whole kendo script package. Is it possible to download a kendo.custom.min.js through bower? Thanks.
Enoch
Top achievements
Rank 1
 answered on 28 Apr 2016
4 answers
61 views

I've approached support about this, but since I can't upload a solution verbatim to a Dojo, I can't really reproduce it (that I know of).

In the attached screenshot, you can see that the DropDownList and other controls that are either Kendo controls or style by Kendo theme look normal, but the datePicker and NumericTextBox have a thick blue padding at the bottom. And the datePicker's icon is displaced to the right.

 

Any ideas are welcome. I can't post the example per se, as the apps are huge and involve a SQL database etc that I can't upload. However, this issue has been present for as long as I've been using Kendo controls, formerly in ASP.Net forms and now in html/WEBApi applications.

Thanks, Bob Graham

Robert
Top achievements
Rank 1
 answered on 28 Apr 2016
5 answers
937 views

Hiya,

I was just wondering how to re-template the series labels. I used the following snippet for both the label and the tooltip but it's only working for the tooltip.

labels: {
      visible: true,
      template: kendo.template($("#template").html())
}, 
tooltip: {
      visible: true,
      template: kendo.template($("#template").html())
}

If setting the template for labels this way is not possible, is there a way then to make the tooltip visible all the time and not only on hover?

Kindly advise.

Best regards,

Byang

 

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 28 Apr 2016
1 answer
98 views

We are using Kendo Editor and trying to localize the fields.

Most of the controls are working fine but the 'Format' DropDown control title tip is not getting localized.

I am providing localized text for "message.formatting" key while initializing the kendo editor.

I dig into the kendo.all.min.js file and found that while initializing the Formatting control, title tip is hard code to 'Format'. And if I change it to some other value, totol

Nikolay
Telerik team
 answered on 28 Apr 2016
4 answers
440 views

Hi, 

  how to perform insert and delete operation after binding to a dataSource. I tried to solve in different ways but all ends in some issue.

  Create a dojo snippet to reproduce issue.

  Issues :-

  1.  After applying formula to a column data sheet.range("F2:F").formula("C2*D2");   try to add a row 

       Getting error - kendo.all.js:98306 Uncaught Error: Shifting nonblank cells off the worksheet is not supported!

   2. Change formula to sheet.range("F2:F14").formula("C2*D2"); leaving one final row.  Can insert one record.

       Is there any way to apply formula to all cells in column without affecting the add functionality.

  3. " dataSource.cancelChanges()" will  copies the below row to current row.

   

 

Alex Gyoshev
Telerik team
 answered on 28 Apr 2016
3 answers
196 views

Hi,

I'm using the kendo dataSource (kendo.data.TreeListDataSource) for a treeList widget in an angularJS project.

Everytime I'm trying to update one of the items via inline editing I get the following error (in chrome). The error occurs when "other" clients are called via SignalR to update their data. Code on the server:

public ContactTreeListDto UpdateListItem(ContactTreeListDto item)
{
Clients.Others.UpdateListItem(item);
return item;
}

 

VM2835:3 Uncaught SyntaxError:
Unexpected number
extend.setter @ kendo.all.js:2018
Observable.extend._set @ kendo.all.js:4541
ObservableObject.extend.accept @ kendo.all.js:4734
Model.define.accept @ kendo.all.js:89185
DataSource.extend._createNewModel @ kendo.all.js:89252
Observable.extend.pushUpdate @ kendo.all.js:6187
Observable.extend._push @ kendo.all.js:6038
Observable.extend._pushUpdate @ kendo.all.js:6028
proxy @ jquery-2.2.1.js:492
hubProxy.fn.hubProxy.on.callbackMap.(anonymous function).(anonymous function) @ jquery.signalR-2.2.0.js:2611
jQuery.event.dispatch @ jquery-2.2.1.js:4732
elemData.handle @ jquery-2.2.1.js:4544
jQuery.extend.trigger @ jquery-2.2.1.js:7791
jQuery.fn.extend.triggerHandler @ jquery-2.2.1.js:7881
(anonymous function) @ jquery.signalR-2.2.0.js:2817
(anonymous function) @ jquery.signalR-2.2.0.js:791
jQuery.event.dispatch @ jquery-2.2.1.js:4732
elemData.handle @ jquery-2.2.1.js:4544
jQuery.extend.trigger @ jquery-2.2.1.js:7791
jQuery.fn.extend.triggerHandler @ jquery-2.2.1.js:7881
signalR.transports._logic.triggerReceived @ jquery.signalR-2.2.0.js:1490
(anonymous function) @ jquery.signalR-2.2.0.js:1511
jQuery.extend.each @ jquery-2.2.1.js:360
signalR.transports._logic.processMessages @ jquery.signalR-2.2.0.js:
1510(anonymous function) @ jquery.signalR-2.2.0.js:1933

Kendo version is  Kendo UI v2016.1.226

Here's the treeList configuration from controller:

(function() {
    'use strict';
    angular
        .module('XPhoneWeb')
        .controller('contactTreeListController', ['$scope', 'signalrService', 'notificationService', contactTreeListController]);
 
    function contactTreeListController($scope, signalrService, notificationService) {
 
        var vm = this;
        vm.reloadContactsCallback = function () {
            // auf Befehl des Servers alle Kontakte neu laden :-)
            notificationService.info("Kontaktliste wegen Änderung neu laden", "Nachricht vom Server");
            $scope.contactTreeList.dataSource.read();
        }
        vm.reload = function () {
            $scope.contactTreeList.dataSource.read();
        }
        vm.add = function (id) {
 
            alert('groupId: ' + id);
 
            var row = $("#contactTreeList").data("kendoTreeList")
              .tbody
              .find("tr[data-uid='" + id + "']");
 
            //$scope.contactTreeList.addRow($("#contactTreeList tbody>tr[data-uid='" + groupId + "']"));
            $scope.contactTreeList.addRow($(row));
        }
 
        initTreeList();
 
        registerEvents();
         
        function registerEvents() {
 
            // Event-Callback registrieren
            signalrService.on('contactTreeListHub', 'reloadContacts', vm.reloadContactsCallback);
 
            // Im Destroy-Event des Controllers die SignalR-Event Callback Methode wieder deregistrieren
            $scope.$on('$destroy', function () {
                signalrService.off('contactTreeListHub', 'reloadContacts', vm.reloadContactsCallback);
            });
        }
 
        // initialisiert die TreeList
        function initTreeList() {
            var hub = signalrService.getHubProxy('contactTreeListHub');
            var startPromise = signalrService.getStartPromise();
 
            vm.treelistOptions = {
                // DataSource Konfiguration
                dataSource: new kendo.data.TreeListDataSource ({
                    type: 'signalr',
                    autoSync: true,    // muss für POPUP Edit false sein, sonst werden 2 Update events gefeuert...
                    transport: {
                        signalr: {
                            promise: startPromise,
                            hub: hub,
                            server: {
                                read: 'readContactTreeList',
                                update: 'updateListItem',
                                destroy: 'deleteListItem',
                                create: 'addListItem'
                            },
                            client: {
                                read: 'readContactTreeList',
                                update: 'updateListItem',
                                destroy: 'deleteListItem',
                                create: 'addListItem'
                            }
                        }
                    },
                    schema: {
                        errors: "serverErrors",
                        model: {
                            id: "id",
                            parentId: "parentId",
                            fields: {
                                parentId: { type: "string", visible: false, nullable: true },
                                groupName: { type: "string", editable: true, nullable: true },
                                displayName: { type: "string", editable: true }
                                // TODO: Presence aufdröseln
                            }
                        }
                    },
                    error: function(e) {
                        notificationService.error(e.errors, "Nachricht vom Server");
                    },
                    push: function(e) {
 
                        alert('e.type: ' + e.type);
                        alert('e.items: ' + JSON.stringify(e.items));
 
                    }
                }),
                // TreeList Konfiguration
                sortable: false,
                editable: true,
                columns: [
                    {
                        field: 'displayName',
                        title: 'Name',
                        template: $('#contactTreeListItemTemplate').html(),
                    },
                    {
                        field: '',
                        title: '',
                        template: $('#contactTreeListItemAddTemplate').html(),
                    },
                    {
                        command: [
                            { name: 'edit' },
                            { name: 'destroy' }
                        ]
                    }
                ]
            };
        }
    }
})()

Rosen
Telerik team
 answered on 28 Apr 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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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?