or
1 answer
426 views
Hello,
starting from the example in this page http://www.telerik.com/kendo-angular-ui/components/dialog/service/#toc-specify-custom-actions ,
there is a way to assign a custom action for the [x] close button? I have to assign a guard before close dialog
Thank's
Joana
Telerik team
answered
on
10 May 2017
1 answer
40 views
Hello!
I've just update dialog module to fix dialogservice issues, but now modals are not centered.
How can I fix?
Thank's!!
Tsvetina
Telerik team
answered
on
09 May 2017
1 answer
35 views
Hello,
As the title states, when you create a text input inside of a modal view, the background image is undefined. This does not cause any functional issues however it is annoying that requests are made for undefined on each load of the modal view. You can see the issue in your mobile modal demo at https://demos.telerik.com/kendo-ui/m/index#modalview/index. Open the modal view, inspect either of the text inputs and you will see the background-image points to an undefined url.
Thanks,
Matt
Alex Hajigeorgieva
Telerik team
answered
on
26 Aug 2016
1 answer
66 views
In documentation it says about ModalView:
"The widget can be open when any mobile navigational widget (listview, button, tabstrip, etc.) is tapped. To do so, the navigational widget should have data-rel="modalview" and href attribute pointing to the ModalView's element id set (prefixed with #, like an anchor)."
I've tried to use the "data-rel" attribute inside a listview template, but it gives error about invalid template.
Example:
<script type="text/x-kendo-template" id="MyListViewTemplate"> <a data-rel="modalview" href="#MyModalViewId">Open</a> </script>
Can you please give example how to use it properly from listview?
Petyo
Telerik team
answered
on
16 Apr 2015
7 answers
1.4K+ views
I want to create a message dialog with a message, optional title and an OK button at the bottom that will dynamically size to the height of the message content given an expressly set height. Is there a way to do this?
Best,
BX
Best,
BX
1 answer
114 views
As a content of a modalView I'd like to use an Angular template (because the whole app is Angular based). But it seems like it doesn't see an Angular controller. So, for example, ng-click for a button inside a template doesn't work. On the other hand if I use onclick for the button it works fine (with just JavaScript code outside of any angular controller). The question is if it is possible at all to use an Angular controller/directive inside a modalView?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> <!--Doesn't work-->
<!--<button onclick="closeD()">cancel</button> Works fine-->
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> <!--Doesn't work-->
<!--<button onclick="closeD()">cancel</button> Works fine-->
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>
5 answers
218 views
Hi,
Is preventing the modal view from closing officially supported?
I've put a preventDefault() on the close event, but when you set the modal option to false and touch outside the window, the modal view closes but overlay stays there, blocking the app. However, closing the modal view programmatically works perfectly.
Please see this example for reproducing the case:
http://dojo.telerik.com/iBUr/2
Thanks in advance.
Is preventing the modal view from closing officially supported?
I've put a preventDefault() on the close event, but when you set the modal option to false and touch outside the window, the modal view closes but overlay stays there, blocking the app. However, closing the modal view programmatically works perfectly.
Please see this example for reproducing the case:
http://dojo.telerik.com/iBUr/2
Thanks in advance.
Kiril Nikolov
Telerik team
answered
on
06 Aug 2014
3 answers
138 views
Hi
Is this possible? I would like to create a modalview via an ajax call, possibly then destroy it and make another one?
On that topic is this possible with normal views as well, I gather they aren't made until navigate is called but I haven't tried to replace them after they've been made
thanks
Is this possible? I would like to create a modalview via an ajax call, possibly then destroy it and make another one?
On that topic is this possible with normal views as well, I gather they aren't made until navigate is called but I haven't tried to replace them after they've been made
thanks
Kiril Nikolov
Telerik team
answered
on
01 Aug 2014
6 answers
115 views
Hi
Is this possible? I've tried a few variations but can't seem to get it working
http://dojo.telerik.com/IWag/2
thanks
Is this possible? I've tried a few variations but can't seem to get it working
http://dojo.telerik.com/IWag/2
thanks
7 answers
330 views
Ever since I updated to Q1 release of kendo I can no longer style the modal view correctly. Right now I have my modal view html like this:
<div id="globalSaveModal" data-role="modalview" class="modalSave">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
and my CSS class like this:
.modalSave {
height: auto;
width: 100%;
position: fixed !important;
top: 0px;
left: 0px;
}
This worked before Q1 was released. Not only that, CSS styling are having weird effects. Fixed no longer works as Fixed should, it instead makes the modal view incredibly tiny and doesn't display any of the text part nor does it position it in a fixed way. It keeps it in the same spot as if it were still Relative.
Am I missing something with the modal view? I don't have trouble styling any of the other kendo widgets. Modalview is the only one that does not seem to behave correctly.
<div id="globalSaveModal" data-role="modalview" class="modalSave">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
and my CSS class like this:
.modalSave {
height: auto;
width: 100%;
position: fixed !important;
top: 0px;
left: 0px;
}
This worked before Q1 was released. Not only that, CSS styling are having weird effects. Fixed no longer works as Fixed should, it instead makes the modal view incredibly tiny and doesn't display any of the text part nor does it position it in a fixed way. It keeps it in the same spot as if it were still Relative.
Am I missing something with the modal view? I don't have trouble styling any of the other kendo widgets. Modalview is the only one that does not seem to behave correctly.
