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
}
Related
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.
Here I have a code to update a cell contet when pressing a button.
It works fine, but it doesn't set the flag, that indicates, that the cell has been changed.
It should look like this with the litle red triangle:
The code:
<a id="button" href="#">Click me</a>
<div id="grid"></div>
<script>
var dataSource, grid;
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ category: "Beverages", name: "Chai", price: 18},
{ category: "Seafood", name: "Konbu", price: 6}
],
})
grid = $("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
}).data("kendoGrid");
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
});
});
</script>
Update:
Here is the update based on #tstancin: Kendo example.
Thank you for the answer - I had thought of it to.
I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?
Kind regards from Kenneth
If that's all you want then you should expand your button click code with the following:
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
$("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
$("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});
But if you, for instance, manually change the value of name column from Chai to something else, and then click the click me button, the dirty marker in the name column will disappear.
You should use flags for every cell and set them before data.set(). Then, in the grid's dataBound event you should inspect every cell's value and assign the dirty marker if it's needed. For manual changes you should handle the save event and set flags there.
I wrote a script that makes it posible to use a call like this:
SetCellData(id, columnName, value);
So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.
function SetCellData(id, columnName, value) {
var dataItem = grid.dataSource.get(id);
dataItem.set(columnName, value);
var columnIndex = GetColumnIndex(columnName);
if (columnIndex > -1) {
var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')
if (!cell.hasClass("k-dirty-cell")){
cell.prepend("<span class='k-dirty'></span>");
cell.addClass("k-dirty-cell");
}
}
}
function GetColumnIndex(columnName) {
var columns = grid.columns;
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName)
return i;
return -1;
};
I have the code here : example
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;
}
In the following code, I need to pass the text variable from app.js to app_flip.js and display it over there. How can I do this ?
**In app.js**
var win = Titanium.UI.createWindow({backgroundColor:'white'});
button.addEventListener('click,function(e){
Ti.include('app_flip.js');
});
var text = Ti.UI.createLabel({ text:"hello" });
win.add(text);
**In app_flip.js**
var win = Titanium.UI.createWindow({backgroundColor:'white'});
You can open a new window using the following method
app.js
button.addEventListener('click', function(e){
var win = Ti.UI.createWindow({
url : 'app_flip.js',
backgroundColor : 'white',
_customProperty : 'Value of the property'
});
win.open();
});
app_flip.js
var win = Ti.UI.currentWindow;
var _customProperty = win._customProperty;
alert(_customProperty); //Will display Value of the property
You can use this as a reference
how to give activity indicator while load json??here my code,,
i want to give activity indicator during my apps reading json :)
data will load with 20 section length,,(from json) and when my apps try to read it, i want to give activity indicator that make user not waiting in a blank screen :)
// Create variable "win" to refer to current window
var win = Titanium.UI.currentWindow;
///window startup
///////////
function loadTweets() {
// Empty array "rowData" for our tableview
var rowData = [];
// Create our HTTP Client and name it "loader"
var loader = Ti.Network.createHTTPClient({
onerror : function(e) {
alert('Koneksi Time Out');
},
timeout : 30000
});
// Sets the HTTP request method, and the URL to get data from
loader.open("GET", "http://www.sportku.com/api/get_latest_news/" + win.id);
// Runs the function when the data is ready for us to process
loader.onload = function() {
var tweets = eval('(' + this.responseText + ')');
for(var i = 0; i < tweets.count; i++) {
var tweet = tweets.posts[i].excerpt;
// The tweet message
var user = tweets.posts[i].title;
// The screen name of the user
var avatar = tweets.posts[i].thubmnail;
// The profile image
var url = tweets.posts[i].url;
// Create a row and set its height to auto
var row = Titanium.UI.createTableViewRow({
height : 'auto'
});
// Create the view that will contain the text and avatar
var post_view = Titanium.UI.createView({
height : 'auto',
layout : 'vertical',
top : 5,
right : 5,
bottom : 5,
left : 5
});
// Create image view to hold profile pic
var av_image = Titanium.UI.createImageView({
image : avatar, // the image for the image view
top : 0,
left : 0,
height : 58,
width : 58
});
post_view.add(av_image);
// Create the label to hold the screen name
var user_lbl = Titanium.UI.createLabel({
text : user,
left : 64,
width : 226,
top : -58,
bottom : 2,
height : 44,
textAlign : 'left',
color : 'black',
font : {
fontFamily : 'Arial',
fontWeight : 'bold',
fontSize : 12
}
});
post_view.add(user_lbl);
// Create the label to hold the tweet message
var tweet_lbl = Titanium.UI.createLabel({
text : tweet,
left : 64,
top : 0,
bottom : 2,
height : 'auto',
width : 226,
textAlign : 'left',
font : {
fontSize : 11
}
});
post_view.add(tweet_lbl);
var urls = Titanium.UI.createLabel({
text : url,
});
post_view.add(urls);
// Add the post view to the row
row.add(post_view);
row.hasChild = true;
//row.hasChild=true;
// Give each row a class name
row.className = "item" + i;
// Add row to the rowData array
rowData[i] = row;
post_view.addEventListener('click', function(e) {
var url_output = e.row.children[0].children[3].text;
//alert(url_output);
var webview = Titanium.UI.createWebView({
url : url_output
});
var window = Titanium.UI.createWindow({
backgroundColor : "#fff",
barImage : 'image/navbar.png',
titleImage : 'image/logo.png',
});
window.add(webview);
window.open({
modal : true,
modalTransitionStyle : Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
modalStyle : Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
});
var buttonImage = [{
image : 'image/share.png',
width : 30,
height : 30
}]
var back = Ti.UI.createButtonBar({
labels : buttonImage,
backgroundColor : 'black',
style : Titanium.UI.iPhone.SystemButtonStyle.BAR
});
back.addEventListener('click', function() {
window.close();
});
window.leftNavButton = back;
});
}
// Create the table view and set its data source to "rowData" array
var tableView = Titanium.UI.createTableView({
data : rowData
});
//Add the table view to the window
win.add(tableView);
};
// Send the HTTP request
loader.send();
}
loadTweets();
i've try to give my code, but always error :),,
What you should do is create the activity indicator before anything else. Activity indicators don't need to be added to a window, you just need to call the show()method, so do that prior to executing the xhr.send() method. than the last line of your onLoad function should execute the indicator.hide() method.