I'm trying to nest a window in a treeview. I want it so that when a user selects a particular node it will open a kendo window. Has anyone done this? I'm not seeing much on the demos that demonstrate something similar.
I'm using the mvc wrappers. Thanks!
Onclick event of your tree node
call this
$("tree node").click(function(){
KendoDialog("Window TItle", "Content in the window", 700, 350);
});
function KendoDialog(windowTitle, message, windowWidth, windowHeight) {
var WindowElement = $("#kwDialog").data("kendoWindow");
WindowElement.setOptions({
width: windowWidth,
height: windowHeight,
title: windowTitle
});
WindowElement.content("<b>" + message + "</b>");
WindowElement.center().open();
}
put this some where in your layout
#(Html.Kendo().Window()
.Name("kwDialog")
.Title("Alert!")
.Modal(true)
.Visible(false)
)
Related
I have a kendo tooltip for a field, that can contain a very long values. The default position of the tooltip is on the left of the field, however, if there's not enough space for a tooltip on the left, it automatically switches to the right. The problem i have, that sometimes, there's not enough space for a tooltip on the right either. I want to somehow control the behaviour of the tooltip in that case, and position it the way i want. Is there a way?
I had a similar situation and found the code to dynamically place a tooltip. Perhaps this will help you.
var p = $(SomeWrapper).offset();
$(element).kendoTooltip({
top: p.top,
left: p.left,
frame: false,
callout: false,
show: function (e) {
e.sender.popup.element.css('margin-top', '-10px');
e.sender.popup.element.css('margin-left', p.left + 'px');
},
width: 500,
height: 300,
position: "bottom"
});
On iOS click on TableViewRow child is firing event on TableViewRow instead of its child. How to fix it?
I have a tableView, which has click event attached to it and is filled with rows:
var tableView = Ti.UI.createTableView({
populateData: populateData
});
tableView.addEventListener('click', tableViewClick);
Rows are simple and have views added:
var row = Ti.UI.createTableViewRow({
type: 'row',
height: 70,
className: 'notes',
});
var container = Ti.UI.createView({
left: 15,
width: Ti.UI.SIZE,
touchEnabled: false,
});
var image = Ti.UI.createImageView({
image: '/images/usuwanie.png',
width: 35,
height: 35,
type: 'delete',
id: data.id,
searchType: data.type
});
container.add(image);
row.add(container);
Click action recognise which object fired the event:
var tableViewClick = function(e) {
var type = e.source.type;
var id = e.source.id;
var searchType = e.source.searchType;
var additionalText = e.source.additionalText;
alert(e.source.type);
switch(type) {
case 'delete':
deleteShopping(id,searchType);
break;
case 'edit':
editShopping(id, searchType, additionalText);
break;
}
};
It works perfectly on Android - if I click the imageView, than imageView is a source of an event (alert returns 'delete' and 'deleteShopping' function is invoked).
On iOS the source is always the row (instead of ImageView) and alert returns 'row' and no function is invoked.
The bug is actually in Android. iOS is behaving as expected. Since there is no event listener on the image, it should not be the source. The event is bubbling up to the TableView since that is where the listener is attached.
To fix it, you need to add an eventListener on the image of every row.
Te reason was that parent container had 'touchEnabled' property set to false. If so than children will not fire event. On Android it will work. On iOS it won't. So it only takes to modify code like this:
var row = Ti.UI.createTableViewRow({
type: 'row',
height: 70,
className: 'notes',
});
var container = Ti.UI.createView({
left: 15,
width: Ti.UI.SIZE,
//touchEnabled: false,
//touchEnabled above has to be commented
});
var image = Ti.UI.createImageView({
image: '/images/usuwanie.png',
width: 35,
height: 35,
type: 'delete',
id: data.id,
searchType: data.type
});
container.add(image);
row.add(container);
I want to show the current value of chart into the pointer tool-tip, If there any way to add tool-tip please suggest, please check gauge screenshot
There is no built in method for this afaik. So you can use the kndoUI tooltip object like this:
In the gauge config, I assign a unique CSS color to the pointer so I can easily query for the SVG element
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val(),
color: "rgba(255,102,0,.999)"
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
Then setup the tooltip widget so that onShow, the content is set to the current value of the gauge. The filter attribute points at any dom object with our unique fill color.
var tooltip = $('#gauge').kendoTooltip({
filter: '[fill="rgba(255,102,0,.999)"]',
position: "center",
content: $("#gauge").data("kendoRadialGauge").value(),
show: function(e) {
e.sender.options.content = $("#gauge").data("kendoRadialGauge").value();
e.sender.refresh();
}
}).data("kendoTooltip");
Here is a dojo DEMO
I'm trying to detect mouse events (currently mousedown) on a Kinetic.Group containing a grid made of Kinetic.Line's
I'm listening to the mousedown event on the Layer. When it happens that i hit a line, no event is fired.
var grid = new Kinetic.Group({
x: 0,
y: 0,
width: this.group.width(),
height: this.group.height()
});
grid.on("mousedown", function(){
alert("At least this one should fire!");
});
var gridX = this.gridWidth, gridY = this.gridHeight;
this.group.add(grid);
while(gridY < this.rect.height()){
var line = new Kinetic.Line({
points : [0,gridY, this.rect.width(), gridY],
stroke: "grey",
strokeWidth: 1
});
grid.add(line);
gridY += this.gridHeight;
}
while(gridX < this.rect.width()){
var line = new Kinetic.Line({
points : [gridX,0, gridX, this.rect.height()],
stroke: "grey",
strokeWidth: 1
});
grid.add(line);
gridX += this.gridWidth;
}
I found this post:
Kinetic.Line mouseover
The answer mentioned there is using "saveData()" on the shape. This seems to be old because this method does not exist in Kinetic.Shape.
The example where the above post is pointing to is for images. And it uses the cache() method to create a hit graph or something. I tried that for my lines but this won't work either.
How can i simply detect mouse events on a Kinetic.Line?
Just in case you are still looking for an answer to this #Chris, and in case others find your thread, I believe you and I were suffering from the same issue. #Sjiep so graciously provided a fix for my problem under this thread.
Turns out it was indeed a bug!
I am trying to change an imageview to a new image based on a "change" event. When i attempt this event with the current code, i get a an error- "invalid image type. expected either TiBlob or TiFile, was: NSNull in -[TiUIImageView setImage_:] (TiUIImageView.m:693)
//This label contains text that will change with each picker change
var results = Titanium.UI.createLabel({
text:"Select from the picker below",
height:40,
width:"auto",
top:20
});
//This view contains an image that will change with each picker change
var imageView = Titanium.UI.createImageView({
image:"images/logos/CIK.jpg",
height: 100,
width: 100,
left: 110,
top: 80
});
picker.addEventListener("change", function(e){
results.text = e.row.title + ": Home of the " + e.row.val;
imageView.image = e.row.logo; //logo contains a value like images/logos/BURRTON.jpg
});
win.add(results);
win.add(imageView);
win.open();
Seems like this should be easy to do, but i am stumped.
Any help is appreciated.
Use View instead of imageView and set a backgroundImage.