or
4 answers
117 views
Can i place it in the top center instead of the center of the browser? Or can i specify the x, y coordinates to position the modal view?
4 answers
138 views
I know this is possible with your typical view, but perhaps this is not supported by modal views?
I am trying to open a modal view with a query param like:
However when I click on the link/button I get this error:
Uncaught Error: Syntax error, unrecognized expression: #myModalView?someParam=123
Is this unsupported on Modal Views?
I am trying to open a modal view with a query param like:
<a data-rel="modalview" href="#myModalView?someParam=123" data-role="button">Open MV </a>Uncaught Error: Syntax error, unrecognized expression: #myModalView?someParam=123
Is this unsupported on Modal Views?
9 answers
564 views
Pretty simple issue. I can do this. I can see that the 2nd modal opened but it is behind the first modal. I tried by setting z-order but it didn't seem to have an effect.
Any solutions?
Any solutions?
2 answers
36 views
I have a modelview made with this code:
<div data-role="modalview" id="windowPopup" data-modal="false" data-close="closeFunction">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
.....
</li>
</ul>
</div>
The function closeFunction () is never started.
This is because data-modal false? Is there a solution?
I've tried using the data event-open and it works well.
I tried with 2014.1 318 and 2013 versions.
<div data-role="modalview" id="windowPopup" data-modal="false" data-close="closeFunction">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
.....
</li>
</ul>
</div>
The function closeFunction () is never started.
This is because data-modal false? Is there a solution?
I've tried using the data event-open and it works well.
I tried with 2014.1 318 and 2013 versions.
Kiril Nikolov
Telerik team
answered
on
28 Mar 2014
1 answer
38 views
If I create a view with data-role="modalview" and then use Kendo.bind() using MVVM it causes the page to show just plain text with a white background. If I change the data-role to view it works correctly. Is there something special that must be done to use MVVM with a modalview?
Thanks
Thanks
Kiril Nikolov
Telerik team
answered
on
18 Mar 2014
5 answers
65 views
The ModalView open event handler is not firing as per the documentation below whether I call the open method $("#mvTest").data("kendoMobileModalView").open() or use data-rel="modal" and href="#mvTest" attributes on a button widget.
http://docs.kendoui.com/api/mobile/modalview#events-open
http://docs.kendoui.com/api/mobile/modalview#events-open
Petyo
Telerik team
answered
on
06 Mar 2014
6 answers
106 views
Is it possible to use: $("#modal_scroll").data("kendoMobileScroller").reset(); inside of a modal view?
I use similar commands throughout my app, but on the modal it has no effect. Modal is:
<div data-role="modalview" data-before-show="logged_before()" data-model="Service.viewModel" id="details" style="width: 100%; height: 100%;">
<div data-role="header">
<div data-role="navbar" style="background: #333333;">
<span data-role="view-title" style="color: #eeeeee; padding: 0px;">Details</span>
<a data-align="left" data-role="button" onclick="$('#details').data('kendoMobileModalView').close();" style="margin-top: 10px; text-align: center; background: #ffffff; width: 60px; font-size: 12px; line-height: 12px; padding: 7px 6px 6px 6px; font-weight: bold; border-color: green;">Back</a>
</div>
</div>
<div class="view-content" data-role="scroller" id="modal_scroll">
<div id="detail_area"></div>
</div>
</div>
I use similar commands throughout my app, but on the modal it has no effect. Modal is:
<div data-role="modalview" data-before-show="logged_before()" data-model="Service.viewModel" id="details" style="width: 100%; height: 100%;">
<div data-role="header">
<div data-role="navbar" style="background: #333333;">
<span data-role="view-title" style="color: #eeeeee; padding: 0px;">Details</span>
<a data-align="left" data-role="button" onclick="$('#details').data('kendoMobileModalView').close();" style="margin-top: 10px; text-align: center; background: #ffffff; width: 60px; font-size: 12px; line-height: 12px; padding: 7px 6px 6px 6px; font-weight: bold; border-color: green;">Back</a>
</div>
</div>
<div class="view-content" data-role="scroller" id="modal_scroll">
<div id="detail_area"></div>
</div>
</div>
2 answers
80 views
I have a kendo view that is bound to a kendo.observable with accept and reject actions. When reject is selected, I pop up a modalview that includes an input which requires comments as why they are rejecting. The modal has two buttons, Reject and Cancel. If the users hits accept, I want to send the input back to the original views viewModel. I also expect all execution to stop when the modal is open, but it continues to run.
Here is a snippet of the viewModel and the modal view.
vm:
utils.showReject();
html:
Here is a snippet of the viewModel and the modal view.
vm:
var viewModel = kendo.observable({ accept: function () { // ajax call }, reject: function () { utils.showReject(); // modalview // get response from showReject (i.e., if they hit Reject, // give me their comments from the input) // ajax call with comments from above }});var showReject = function () { $("#reject-view").show().data().kendoMobileModalView.open(); }<div data-role="modalview" id="reject-view" style="display: none; width: 70%;"> <div data-role="header"> <div data-role="navbar"> <span>Are you sure?</span><br /> <textarea rows="3" placeholder="Enter Reject Reason" style="width: 95%; padding: 5px;"></textarea><br /> <a data-click="app.closeModal" data-modalid="#reject-view" data-role="button">Reject</a> <a data-click="app.closeModal" data-modalid="#reject-view" data-role="button">Cancel</a> </div> </div> </div>1 answer
47 views
Hey guys
I'm using Kendo UI Mobile for quite a long time, and since the beginning I'm a bit disappointed with the ModalView. I think it should have more features that a regular View has. Examples and other ideas:
- Zoom
- Layout
- AfterClose event
- AfterOpen event (or beforeOpen? Can't remember right now if the open event is triggered after or before the opening animation)
- URL parameters
- Possibility of specifying different sizes for tablets
- Automatic height (is this achievable on current version?)
The app we're working now needs a image viewer, and we thought that the ModalView would be best for this, to not interfere with the navigation flow, but the lack of zoom hindered that idea.
So I ask, please, give more love to the ModalView!
Thanks!
I'm using Kendo UI Mobile for quite a long time, and since the beginning I'm a bit disappointed with the ModalView. I think it should have more features that a regular View has. Examples and other ideas:
- Zoom
- Layout
- AfterClose event
- AfterOpen event (or beforeOpen? Can't remember right now if the open event is triggered after or before the opening animation)
- URL parameters
- Possibility of specifying different sizes for tablets
- Automatic height (is this achievable on current version?)
The app we're working now needs a image viewer, and we thought that the ModalView would be best for this, to not interfere with the navigation flow, but the lack of zoom hindered that idea.
So I ask, please, give more love to the ModalView!
Thanks!
Petyo
Telerik team
answered
on
20 Jan 2014
1 answer
144 views
Hi I'm a newbie in Kendo UI Mobile, I wanted to know how to make a modalview appear on the center of the screen, just like the one in the demo (demos.kendoui.com/mobile/modalview/index.html). I've been trying to manipulate the CSS but still can't find the easy way to do it.
Another question is also what is the best way to center all the contents in the ModalView?
By the way here's my code, which as you can see the ModalView appears on the top left of the screen instead of in the middle:
Thanks heaps!
Dede
Another question is also what is the best way to center all the contents in the ModalView?
By the way here's my code, which as you can see the ModalView appears on the top left of the screen instead of in the middle:
01.<!DOCTYPE html>02.<html>03.<head>04. <title>Social Leaderboard</title>05. <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.common.min.css">06. <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.default.min.css">07. <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.mobile.all.min.css">08. 09. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="application/javascript"></script>10. <script src="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/js/kendo.mobile.min.js" type="application/javascript"></script>11. 12. <script>13. this.application = new kendo.mobile.Application(document.body);14. 15. $(document).ready(function Start(){16. $("#view-modal").data("kendoMobileModalView").open();17. });18. </script>19.</head>20.<body>21. <div data-role="view" data-title="Modal Test" id="view-modaltest">22. <header data-role="header">23. <div data-role="navbar">24. <a data-role="button" data-align="left" id="btnBack">Back</a>25. <span data-role="view-title">Leaderboard</span>26. </div>27. <ul data-role="buttongroup" data-index="0" data-select="OnSelectTimeFrame">28. <li>All-Time</li>29. <li>Monthly</li>30. <li>Weekly</li>31. </ul>32. </header>33. <footer data-role="footer">34. <div data-role="tabstrip" class="tabstrip" data-select="OnSelectLeaderboard">35. <a data-icon="globe">Global</a>36. <a data-icon="contacts">Friends</a>37. </div>38. </footer>39. </div>40. 41. <div data-role="modalview" id="view-modal" style="width: 300px; height: 240px;">42. <header data-role="header">43. <div data-role="navbar">44. <span>Challenge Friend</span>45. </div>46. </header>47. <div>49. <span> X </span>51. </div>52. <div>53. <a data-role="button" id="btnOKChallenge">OK</a>54. <a data-role="button" id="btnCancelChallenge">Cancel</a>55. </div>56. </div>57.</body>58.</html>Dede
Kamen Bundev
Telerik team
answered
on
20 Jan 2014
