I copying the sample from Kendo Adaptive Widget page directly and it doesnt work I keep getting this error
Uncaught TypeError: Object [object Object] has no method 'kendoScheduler''
this is my view
<div data-role="view" id="barberDashboard" data-layout="default" class="signup-view" data-model="app.BarberDashboard" data-init="app.BarberDashboard.init"><!-- data-show="app.BarberDashboard.show" data-hide="app.BarberDashboard.hide">-->
<header data-role="header">
<div data-role="navbar">
Dashboard
<a class="nav-button nav-button-back hide-text" data-align="left" data-role="backbutton" href="#welcome">Back</a>
</div>
</header>
<div id="scheduler"></div>
</div>
and this is my js to set the init() method
var barberDashboardViewModel = (function () {
var init = function initScheduler() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/26"),
startTime: new Date("2013/6/26 07:00 AM"),
height: kendo.support.mobileOS.wp ? "28em" : 600,
views: [
.... Shortened for beravity
but it never works. I have the lasted kendo.mobile.min.js and related css added to the project.
i have tried this in several projects and versions and have never gotten it to work. I don't see what the problem is.
The Scheduler itself is part of the Kendo UI Web suite - you need to use kendo.all.min.js to get it working as a mobile adaptive widget.
Related
With the fine-uploader plugin I am trying to add multiple (dynamic could be 1, or 10) instances with an optional caption field and a manual upload button per section.
The form I am uploading from is dynamically generated in layout as well as content, the uploaded files have to be stored by the handler based upon the section of the form as well as the instance of fine-uploader. I also need the ability to effectively upload each instance of fine-uploader independently
The issue that I am hitting is following the guidelines & demo for the manual upload option, ie adding a click function it will always find only the first instance as it searches for the button using .getElementById.
I can get around this by defining a new template for each instance however I would prefer to use a single template.
The template code (for each instance - abbreviated for simplicity) is
<script type="text/template" id="qq-template-manual-trigger#XX#">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
...
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>Select files</div>
</div>
<button type="button" id="trigger-upload#XX#" class="btn btn-primary">
<i class="icon-upload icon-white"></i> Upload
</button>
</div>
...
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
...
<input class="caption" tabindex="1" type="text">
...
</li>
</ul>
...
</div>
</script>
<div id="fine-uploader-manual-trigger#XX#"></div>
and the uploader script
<script>
var manualUploader#XX# = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-trigger#XX#'),
template: 'qq-template-manual-trigger#XX#',
request: {
inputName: "imagegroup[]",
endpoint: '/SaveFile.aspx'
},
autoUpload: false,
debug: true,
callbacks: {
onError: function(id, name, errorReason, xhrOrXdr) {
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
},
onUpload: function (id) {
var fileContainer = this.getItemByFileId(id)
var captionInput = fileContainer.querySelector('.caption')
var captionText = captionInput.value
this.setParams({
"descr[]": captionText,
<-- Other parameters here -->
}, id)
}
},
});
qq(document.getElementById("trigger-upload#XX#")).attach("click", function () {
manualUploader#XX#.uploadStoredFiles();
});
</script>
in the ideal world I would prefer simply have a single
<script type="text/template" id="qq-template-manual-trigger">
....
</script>
then where required multiple times through the form
<div id="fine-uploader-manual-trigger"></div>
<script>
var manualUploader#XX# = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-trigger'),
template: 'qq-template-manual-trigger',
...
}
qq(document.getElementById("trigger-upload")).attach("click", function () {
manualUploader#XX#.uploadStoredFiles();
});
</script>
The use of the attach function by calling .getElementById just feels wrong, or at the very least cludgy, is there a better way of activating the upload on a per-instance basis?
Thanks in advance
K
Sorted, but if anyone has a better answer...
Instead of using the demo of document.getElementById("trigger-upload")
Simply use document.querySelector("#fine-uploader-manual-trigger #trigger-upload")
eg
<div id="fine-uploader-manual-triggerXX"></div>
<script>
var manualUploaderXX = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-triggerXX'),
template: 'qq-template-manual-trigger',
... // omitted for brevity
}
qq(document.querySelector("#fine-uploader-manual-triggerXX #trigger-upload")).attach("click", function () {
manualUploaderXX.uploadStoredFiles();
});
</script>
I need to trigger the built in kendo-ui grid "add" action to this custom button in my template. only examples i can find are triggering custom functions. thanks
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label>Mock Text:</label>
<a class="k-button" onclick="trigger dataSource.change.add">Add Product</a>
</div>
</script>
You can add event for that button with jQuery, you can select it either by ID or its class and call addRow method of grid.
$("#btnAdd").click(function() {
var grid = $("#grid").getKendoGrid();
grid.addRow();
});
I have been stuck in a problem since couple of days.
I am trying to get the UIKIT Modal on the top of another UIKIT modal.
I have an EditModal and SubEditModal as follows:
<div id="modalEdit" class="uk-modal">
<div class="uk-modal-dialog uk-animation-scale-up">
<div class="modalTitle"><h1>Edit</h1></div>
<a class="uk-modal-close uk-close"></a>
</div>
</div>
<div id="modalSubEdit" class="uk-modal">
<div class="uk-modal-dialog uk-animation-scale-up">
<div class="modalTitle"><h1>Edit</h1></div>
<a class="uk-modal-close uk-close"></a>
</div>
</div>
I have address listing in modalEdit. When the user clicks on edit in one of address, I use the modalSubEdit to display the edit form. This should be displayed on the top of modalEdit. I wrote the following jquery:
$.get(url, function (data) {
var container = $('#modalEdit .uk-modal-dialog');
var targetDiv = $('#modalSubEdit .uk-modal-dialog');
targetDiv.empty();
targetDiv.append(data);
container.add(targetDiv);
});
The problem is as soon as the modalSubEdit is displayed, modalEdit closes itself. When I dig deep into it, I found that, as soon as modalSubEdit is displayed, the display property of modalEdit is set to none.
I would be very much thankful if someone could come up with some suggestions or solutions.
Also thanks to the viewers for their time.
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>
So, I'm putting together the framework for a web app that allows people to swipe horizontally between views. I'm looking for a layout similar to that of ubersocial, an app for android. I've tried a few different frameworks over the last couple of days (including the beginnings of a custom framework, which won't work due to poor overflow:auto support on mobile). JqMobi seems to get me closest.
Here's some code:
<script>
//jqMobi & jqUI scripts omitted for brevity
var carousel;
var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
scroller = $('newContainer').scroller();
}
window.addEventListener("load", init_carousel, false);
</script>
<div id="jQUi">
<div id="header"></div>
<div id="content">
<!--scrolling="no" because I don't want the whole carousel to move-->
<div title="Main" id="main" class="panel" data-tab="navbar_home" scrolling="no">
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="newContainer" style="width: 100%;height: 100%; overflow: auto;>
<!--Lots of Content-->
</div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
</div>
</div>
</div>
So I've got my carousel working for all devices and I was able to get perfect functionality in iOS 5. However, Android (2.2, 2.3, & 4.0) is not giving me a scrollable div for my .MainView elements, nor are older iOS devices. The best I can get is the carousel on a panel that scrolls, but the elements within the panel won't scroll together. This makes me wonder if the iOS 5 success I've had was just support for overflow:auto.
Anyway, I've looked at the following docs:
jqMobi CheatSheet = (http://www.appmobi.com/amdocs/lib/jqMobi_Cheat.pdf?r=9170)
jqMobi Kitchen Sink = (http://jqmobi.com/testdrive/#webslider)
jqMobi API Doc = (http://api.jqmobi.com/#jqUi)
But I've had trouble really getting the answer I'm looking for. Using the documented methods, I can't really seem to get anywhere. It seems like if I could get an independently scrollable div into a .MainView element without breaking the carousel, I'd be good to go. Suggestions?
/*****************FIXED*****************/
After a tangled web of confusion and frustration, I eventually got it to work by adding a second buffer to the .MainDiv elements so that the scroller doesn't affect the carousel.
I also had a bad run-in with iOS 5 (which, as you may recall, worked before) which probably could have been fixed by simply adding overflow:auto to the .MainView elements and giving them a fixed height. I tried disabling nativeTouchScroll first, and the scrolling is actually pretty good, so I'll stick with that instead of adding a browser detect conditional.
<script>
//Native touch disabled or iOS 5 breaks.
$.feat.nativeTouchScroll = false;
var carousel;
//var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
}
$.ui.ready(init_carousel);
var scroller;
$.ui.ready(function ()
{
//Fetch the scroller from cache
scroller = $("#containerContainer").scroller();
});
</script>
<style>
.MainView
{
height: 100%;
overflow: hidden;
}
</style>
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="containerContainer"><div id="newContainer"></div></div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
Posted in the forums at appMobi - but we are a US based company in the Eastern Standard Time Zone - so we were asleep while you were working on this...glad you wrote the following :)
Not that anyone seems to care