Telerik Forums
Kendo UI for jQuery Forum
1 answer
174 views

Hi all

I am trying to display events with no attendees on top of the other attendee groups in the timeline mode, so I can just simply drag and drop the events with no attendee to a attendee.

The vertical grouping demo just ignores those events without any attendees: http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical   

How can I implement this functionality? Can you provide a working demo if possible?

Vladimir Iliev
Telerik team
 answered on 29 Apr 2016
1 answer
133 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
761 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
454 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
126 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
75 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
973 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
118 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
460 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
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?