how to kendo modal move option window - kendo-ui

When I click the button,
the kendo popup pops up, and I want to know the option to move the popup in the browser.
draggable: {
containment: "#editor-form"
},
The draggable option does not move it.
$("#add").on("click", function(){
var start = new Date();
start.setSeconds(0);
start.setMinutes(start.getMinutes()+5);
var end = new Date ( start );
start.setSeconds(0);
end.setMinutes(start.getMinutes() + 30 );
var event = {
scheduleId: 0,
title: "",
start: start,
end: end
} ;
editEvent( event );
});
function editEvent( event ){
currentEvent = new kendo.data.ObservableObject(event);
kendo.bind(editor, currentEvent); //Bind the editor container (uses MVVM)
editor.data("kendoDialog").open();
}
:
:

In such case I would rather use Window Kendo widget that is draggable by default - https://demos.telerik.com/kendo-ui/window/index.

Related

creating dropdown using table view in titanium

i am creating a form containing a dropdown with default value and options to choose. and form should have reset button to clear choosen option from dropdownor tableview.when i click on dropdown it should expand containing options to select and when user selects option it is collapsed.and if reset button is pressed dropdown value is reset to default value.
i searched in google and i got some code below in this code when i executed i am just getting a table view with expanded ,when i select a row it still remains expanded.
var win = Ti.UI.createWindow({
title: 'Title goes here',
backgroundColor: '#123456'
});
var checkFlag = true;
var picker = Ti.UI.createPicker({ width:110,left:190,top:150});
var data = [];
data.push(Titanium.UI.createPickerRow({title:'Karnataka'}));
data.push(Titanium.UI.createPickerRow({title:'tamilnadu'}));
data.push(Titanium.UI.createPickerRow({title:'kerala'}));
data.push(Titanium.UI.createPickerRow({title:'goa'}));
picker.add(data);
win.add(picker);
var resetbtn = Ti.UI.createButton({
top : '100',
width : '50',
height : '35',
title : 'Reset'
});
win.add(resetbtn);
resetbtn.addEventListener('click', function(){
Ti.API.info('checkFlag = ' + checkFlag);
if(checkFlag) {
picker.hide();
checkFlag = false;
} else {
picker.show();
checkFlag = true;
}
});
win.open();
and is it good to create dropdown using table view or picker and how to set to default value on pressing reset button.please help me i am new to titanium.
It seems like you are getting confused in TableView and dropdown. These two are different elements and have different usage.
I will suggest to use Titanium.UI.Picker to create dropdown list. Also to make some value of the picker to be selected programmatically you can use setSelectedRow() method of picker.
Following code will help to start things :
Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
exitOnClose: true,
layout: 'vertical'
});
var picker = Ti.UI.createPicker({
top:50
});
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
picker.add(data);
picker.selectionIndicator = true;
win.add(picker);
win.open();
var resetbtn = Ti.UI.createButton({
bottom: '10',
width : '50',
height : '35',
title : 'Reset'
});
win.add(resetbtn);
resetbtn.addEventListener('click', resetToDefault);
function resetToDefault() {
picker.setSelectedRow(0, 0, false); // select Bananas, i.e index 0
}

Firefox Add-on How to Link context menu and panel widget

I want open/show my panel widget by click on my context-menu item to send some data from the dom position click to my panel.
I'm open for lot of solutions !
I don't know if this works but try it out, its sdk style
var panels = require("sdk/panel");
var self = require("sdk/self");
var panel = panels.Panel({
contentURL: self.data.url("panel.html")
});
var cm = require("sdk/context-menu");
cm.Item({
label: "Edit Image",
context: cm.SelectorContext("img"),
contentScript: 'self.on("click", function () {' +
' self.postMessage(null);' +
'});',
onMessage: function (msg) {
panel.show({
//position: button //set position to some anchor
});
}
});

How to programmatically create a new row and put that row in edit mode in Kendo grid

In my Kendo grid I am trying to put the 'create new item' button in the header (title) of the command column instead of the toolbar. Here is part of my grid definition:
var grid = $("#grid").kendoGrid({
columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } },
headerTemplate: "<a onclick ='NewItemClick()' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"},
My question is: how to create a new row and put that row in edit mode in 'NewItemClick()'
There are some troublesome scope issues when you try to bind the click event in the template definition itself.
Instead, it is easier to assign the link an ID, and then bind the click event later. Notice that I've given it id=create.
headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"
Then in document ready, I bind the click event:
$("#create").click(function () {
var grid = $("#grid").data("kendoGrid");
if (grid) {
//this logic creates a new item in the datasource/datagrid
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.page(dataSource.totalPages());
grid.editRow(grid.tbody.children().last());
}
});
The above function creates a new row at the bottom of the grid by manipulating the datasource. Then it treats the new row as a row "edit". The action to create a new row was borrowed from OnaBai's answer here.
Here is a working jsfiddle, hope it helps.
I would like to complete on gisitgo's answer. If your datasource takes some time to update, when calling page(...), then the refresh of the grid will cancel the editor's popup. This is averted by binding the call to editRow to the "change" event :
var grid = $("#grid").data("kendoGrid");
if (grid) {
//this logic creates a new item in the datasource/datagrid
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.one("change", function () {
grid.editRow(grid.tbody.children().last());
});
dataSource.page(dataSource.totalPages());
}
NB: This approach will yield problems if your grid is sorted because the new row will not necessarily be at the end
I have found that issues might appear if you have multiple pages, such as the inserted row not opening up for edit.
Here is some code based on the current index of the copied row.
We also edit the row based on UID for more accuracy.
function cloneRow(e) {
var grid = $("#grid").data("kendoGrid");
var row = grid.select();
if (row && row.length == 1) {
var data = grid.dataItem(row);
var indexInArray = $.map(grid.dataSource._data, function (obj, index)
{
if (obj.uid == data.uid)
{
return index;
}
});
var newRowDataItem = grid.dataSource.insert(indexInArray, {
CustomerId: 0,
CustomerName: null,
dirty: true
});
var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']");
grid.select(newGridRow);
grid.editRow(newGridRow);
//grid.editRow($("table[role='grid'] tbody tr:eq(0)"));
} else {
alert("Please select a row");
}
return false;
}

Problems using modal within non-modal window

I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.
Here's a jsfiddle of my situation: Fiddle
The problems I am trying to fix are:
Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.
It would be great if I could center the modal within my window rather than the Window
Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.
If I click the 'X' to close the inner modal, it closes my external window.
Can anyone suggest solutions to any of these issues?
$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
modal: true,
resizable:false,
draggable:false,
appendTo: '#Window',
close: function() {
setTimeout(function(){
$('#confirmWindow').kendoWindow('destroy');
}, 200);
}
});
$('#confirmWindow').find('#btnNo').click(function () {
$('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
$('#confirmWindow').kendoWindow('close');
});
Edit
I have edited the fiddle as the first one was an older version of what i meant to post.
From appendTo documentation:
The element that the Window will be appended to. Note that this does not constrain the window dragging within the given element.
So, Kendo windows are floating, they are not constrained to the element that you append it to. This means that does not make sense prepend the confirmation window to an HTML element and then append it to that same element.
Check response from a telerik enginer
http://www.kendoui.com/forums/kendo-ui-web/window/kendowindow-appendto-boundaries.aspx
<script type="text/javascript">
$(document).ready(function () {
$("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {
var wnd = $("#window").data("kendoWindow");
var position = wnd.wrapper.position();
var minT = 0;
var minL = 0;
//Get the Window width and height and
//place them in position of the hard-coded width and height
var maxT = 600 - wnd.wrapper.height();
var maxL = 900 - wnd.wrapper.width();
if (position.left < minL) {
coordinates = { left: minL };
$(wnd.wrapper).css(coordinates);
}
if (position.top < minT) {
coordinates = { top: minT };
$(wnd.wrapper).css(coordinates);
}
if (position.left > maxL) {
coordinates = { left: maxL };
$(wnd.wrapper).css(coordinates);
}
if (position.top > maxT) {
coordinates = { top: maxT };
$(wnd.wrapper).css(coordinates);
}
})
})
</script>

How to create a button near the address bar?

I am designing a firefox extension, and I want to add a button near the address bar. And then I need to attach a bookmarklet to that button.
Someone can tell me what APIs do I have to use to create that button and to add the bookmarklet ?
Here's an example that uses Erik Vold's toolbarbutton library to add a button near the addressbar:
const data = require("self").data;
const tabs = require("tabs");
exports.main = function(options) {
var btn = require("toolbarbutton").ToolbarButton({
id: 'my-toolbar-button',
label: 'Add skull!',
image: data.url('skull-16.png'),
onCommand: function() {
if (typeof(tabs.activeTab._worker) == 'undefined') {
let worker = tabs.activeTab.attach({
contentScript: 'self.port.on("sayhello", function() { alert("Hello world!"); })'
});
tabs.activeTab._worker = worker;
}
tabs.activeTab._worker.port.emit("sayhello");
}
});
if (options.loadReason === "install") {
btn.moveTo({
toolbarID: "nav-bar",
forceMove: false // only move from palette
});
}
};
You can also see this as a runnable example on the Add-on Builder site:
https://builder.addons.mozilla.org/addon/1044724/latest/

Resources