I am researching how to add a layer of abstraction to Kendo UI components (e.g. grid).
One avenue I am exploring is wrapping up kendo components within a custom Polymer element; note that the Polymer element may contain more elements than just the kendo component.
This is one of my many attempts to get this working:
<polymer-element name="kendo-test" attributes="data">
<template>
<div id="grid"></div>
</template>
<script>
Polymer({
data: [],
ready: function () {
var element = $("#grid").kendoGrid({
dataSource: this.data,
...
});
}
});
</script>
The script block runs okay, but the grid element doesn't get rendered (in the shadow DOM or otherwise). The contents of the element variable show that Kendo has done its thing.
I've also tried embedding a script tag within the template so Kendo executes once it has been rendered, but then I can't bind my data property.
Does anyone know how Kendo UI (or any other DOM manipulating 3rd party package) can be wrapped inside of polymer elements successfully?
Thanks
Thanks to this answer I have found that you can reference shadow DOM elements if you use the Polymer reference and not the elements ID:
var element = $(this.$.grid).kendoGrid({
Related
I have a select.php page where the user selects a value from the dropdown. On selection the ajax code runs and information from ajax.php gets populated on the "display" div of the select.php page. Some of the information coming from ajax.php is in the form of textarea. But it gets displayed just as textarea, and not as tinymce editor. Even though I have called it in the head section of my page.
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea'
});
</script>
My problem is very similar to this: How do I initialize TinyMCE on a ajax loaded textarea in 4.x?
But I am not understanding the solution. Please help.
you can get data after that set data on tiny
success: function (data) {tinyMCE.get(data).getContent().replace('\'', "\’");},
Your call to tinymce.init() only acts on items in the DOM at the time the init() function is run. If you are adding additional <textarea> fields to the page later you need to run tinymce.init() after you add those elements to the DOM.
You can include a call to tinymce.init() in the same block of code that injects the <textarea> into the page directly after you inject the <textarea>.
Tried mixing some jQuery but everything is based on appending, something I don't wanna use because i'm trying to base my design completely on binding and stamping templates and elements. I tried using scrollTop in various ways but I always ended up being depended on what's appended on the local DOM. If i'm not mistaken, dom-repeat has nothing to do with appending, but with creating the same stamp and bind it multiple times (correct me if i'm wrong, I started looking into Polymer 1 recently).
I only found this one good example of using infinite scroll over a repeating template https://github.com/chadliu23/event-infinite-scroll but unfortunately it's not what i'm looking for as I'm mixing iron-ajax parsing data into my template. Simulating chadliu23's example lead me into a silly middle step of creating an extra array and pushing data from ajax into it, but it is totally something I don't want to do cause it's messing with my repeatable template restamping.
Also realized that there are ways to create infinite scrolling-ish effects with css but can't figure out any other way to implement this but in sets of images.
Meanwhile, sadly, it seems like iron-list is nowhere near ready yet and I can't find any way to use the concept idea of core-list into polymer 1.0.
So..... Any suggestions on the table?
I think you need an item-page component:
<dom-module id="item-page">
<template>
<iron-ajax id="ajax"
params="{{_composeParamsForPage(page)}}"
last-response="{{pageData}}">
</iron-ajax>
<template is="dom-repeat" items="{{pageData}}" as="item">
<!-- Compose your list of items for this page here -->
</template>
</template>
<script>
(function(){
"use strict";
Polymer({
is: 'item-page',
properties: {
page: {
type: Number,
observer: '_updatePage(page)'
}
},
_updatePage: function(page) {
this.$.ajax.generateRequest();
}
});
})();
</script>
</dom-module>
Then, to create an infinitely scrolling list:
<template is="dom-repeat" items="{{pages}}" as="page">
<item-page page="{{page}}"></item-page>
</template>
It's important that in your item-page component the iron-ajax does not have auto set, because the page property will initially be set to undefined. Instead, you should observe page and act accordingly only once it's updated to something other than undefined.
It appears there is a conflict between kendo 2013.2.716 and jquery ui 1.10.3. If I have a kendo grid inside a jquery ui dialog I cannot place the cursor in the textbox inside the filter editor. I've created a jsBin to demo the problem.
http://jsbin.com/itehom/14/edit
Repo steps
click "pull the grid into a dialog"
click the filter icon on any column
try to place your mouse in the text field inside the filter editor.
Set modal: false for jQuery dialog.
Try following
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
If you used the jquery dialog instead of the Bootstrap modal, Varde's script might not fix your problem. I spent a few hours on this. Then I noticed the following line can be added after opening your jquery dialog, and it fixed the problem.
$(document).off('focusin');
As you may have noticed, the event doesn't contain a namespace. Keep in mind that this might turn off more "focusin" event handlers that you wish to turn off. I checked the jquery UI source code and didn't find the namespace and am unsure if they used a namespace.
The entire code block of my prototype is like:
<button id="opener">Open Dialog</button>
<div class="row" id="viewSearchResults">
blah, blah, ...
</div>
<script>
$(function () {
$("#viewSearchResults").dialog({
autoOpen: false,
modal: true,
minWidth: 700
});
$("#opener").click(function () {
$("#viewSearchResults").dialog("open");
$(document).off('focusin');
});
});
</script>
Hope the above can save some time for some developers. Thanks.
I'm trying to make a feature where users type into a text box which produces suggestions as you type (like Google Instant), then those suggestions can be dragged into boxes on the page. It all worked fine until I discovered touch screen mobile devices don't work with HTML 5 drop and drag. I'm trying to get it work with jquery instead but it's not going smoothly.
The code below displays a draggable image and it works with touch screens and mice.
<script type='text/javascript' src='js/head.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
$('#touchme1').draggable({revert:true});
$('#drop').droppable({
drop: function( event, ui ) {
$(ui.draggable).remove();
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#faa'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
}
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>
The problem is that when the same code is used within the php file which is called to display search results, the drag and drop doesn't work on mobile devices (but it does on desktops).
I have a feeling you may need to attach an event handler to the #touch1 element. The code you posted only looks for #touch1 elements that already exist in the DOM, but as your element is loaded though AJAX, it will not be in the DOM when the page first loads.
You can use .on() to attach an event handler to the object.
$(document).on('mouseover', '#touchme1', function(){
$(this).draggable({revert:true});
});
In the above example I am using the mouseover event. However you will need to choose an event hander that will work for you with both touch devices and with a mouse.
Example jsbin: http://jsbin.com/agisom/2/edit
I am using two jquery plugins:
hero carousel and content hover.
Initially when I load the page the content hover works correctly, however when I carry out a hard refresh on the page it seems to default to display:none.
I have tried disabling the hero carousel plugin and this resolves the problem but I have no idea where the conflict may be between the two plugins.
I would paste all the code but that would mean pasting two huge chunks of jquery, the site in its current state can be found here the content hover plugin is currently on the bottom left image under the slider.
Thanks.
Take these two scripts:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
<script>
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
</script>
And put them together like this:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
});
</script>
I do not see any script binding your second carousel function. I also do not see the easing library which is available here: http://gsgd.co.uk/sandbox/jquery/easing/ You'll need that because you are using easing in your carousel function above.