I am using Kendo DateTimePicker.
Here is my example:
http://dojo.telerik.com/IxALA/2
My example does:
Initialize the Datetimepicker
After 2 seconds simulate a reset (I reset it to another date)
Problem:
The Datetimepicker gets an ugly shadow around the top and bottom on reset. How can I avoid this?
Here is the Kendo documentation on reseting the Datetimepicker:
http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker#methods-value
Answer here
<div style="width:240px">
<input id="datetimepicker" />
</div>
<script>
$("#datetimepicker").kendoDateTimePicker({
value: new Date(2010,10,34)
});
setTimeout(function(){
var picker = $("#datetimepicker").data("kendoDateTimePicker");
picker.value(new Date(2015, 10, 10));
},2000);
</script>
Related
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.
<div id="KendoWindow"
data-role="window"
data-bind="visible:WindowVisible"
data-title="Title does not show"
data-width="500"
data-height="300"
>
<div class="span4" >
<label for="Comment">Comments</label>
<textarea id ="Comment" data-bind="value: Comment"></textarea>
</div>
I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,
this.set("WindowVisible", false);
the window stays visible.
If I set it through jQuery like so :
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:false
});
it will then become invisible. Then I can't make it visible again if I run this code:
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:true
});
Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.
See sample...
http://jsbin.com/jecih/1/edit
I am new to swiffy.
It works great the first time an animation is called but I need to reuse the animation later in the same page (a web app). How should I do?
To isolate the problem, I have tried something very basic that does not work:
<button onclick="stage.start();">Start</button>
<div id="swiffycontainer" style="width: 400px; height: 400px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
</script>
Pressing on the button for the first time does start the animation
When the animation is complete, pressing again does nothing.
Any help?
TIA
From memory you need to do some gotoandplay stuff in your flash file to send the animation back to the start and call into some flag to trigger that with stage.setFlashVars('flag=' + value);
However a quicker solution is to reload the swiffy object.
make your onclick point to a replay function
<script>
var stage;
var swiffyobject = "....whatever";
//your initial load goes here
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
function replay(){
if(stage)
stage.destroy();
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.start();
}
</script>
<button onclick="replay()">Start</button>
Can anyone explain why this
js:
var ViewModel = function() {
this.myValue = ko.observable(25);
};
ko.applyBindings(new ViewModel());
html:
<div data-bind="kendoRadialGauge: myValue"> </div>
will allow the pointer to transition nicely to the new value, when the databound value changes.
However when passing additional options, like this
js:
var ViewModel = function() {
this.myValue = ko.observable(25);
//various gauge settings omitted for brevity
this.pointerOptions = ko.computed(function() {
return { color: this.pointerColor(), value: this.myValue() };
}, this);
};
ko.applyBindings(new ViewModel())
html:
<div data-bind="kendoRadialGauge: { value: myValue, gaugeArea: gaugeOptions, pointer: pointerOptions }"> </div>
...the pointer just jumps immediately to the new value.
Knockout 2.3.0, JQuery 2.0.3, Kendo UI Dataviz 2013.2.716
When you are specifying any of the KO "tracked" options (gaugeArea, pointer, scale) the gauge gets re-drawn by KO with using the Kendo's redraw method.
In itself it shouldn't cause the lost of the transition but KO also slightly changes the gauge's value which causes the transition lost.
Source on github:
this.value(0.001 + this.value());
Removing this line from the source code fixes your problem, so I would say this is bug in Knockout-Kendo.
I would like to resize a dijit borderContainer on the onClick event of a titlePane but the resize function behavior is very strange (Resize() works only after the second click). This is the code I use :
<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer">
<div data-dojo-type="dijit.TitlePane" region="top" id="titlePane" title="Title">
<script type="dojo/method">
dojo.connect(dijit.byId("titlePane"), "onClick", function(){dijit.byId("borderContainer").resize()});
</script>
</div>
<div data-dojo-type="dijit.layout.TabContainer" region="center" id="tabContainer">
<div data-dojo-type="dijit.layout.ContentPane" id="contentPane" title="content" selected="true">
This is the content
</div>
</div>
Have you already seen this behavior? Your expertise would be very appreciated. Thanks
Actually, resize() works also the first time, but you cannot see anything happening because you should call resize() not immediately after onClick occurs, but after the titlePane's resize animation finishes (200 ms later by default), because otherwise borderContainer resizes to the same size.
This is what I suggest:
dijit.byId("titlePane").watch("open", function(param, oldValue, newValue) {
var animation = newValue ? this._wipeIn : this._wipeOut;
var handler = dojo.connect(animation, "onEnd", this, function() {
dijit.byId("borderContainer").resize();
dojo.disconnect(handler);
});
});
See a working example at jsFiddle: http://jsfiddle.net/phusick/E5CwV/
EDIT: On second thought, you can also create permanent connections on those two animations, but in my opinion it will lead to less readable code:
var titlePane = dijit.byId("titlePane");
var borderContainer = dijit.byId("borderContainer");
dojo.connect(titlePane._wipeIn, "onEnd", borderContainer, "resize");
dojo.connect(titlePane._wipeOut, "onEnd", borderContainer, "resize");