Rows drag and drop functionality in a table view using Alloy with Titanium

Introduction :

There might be a scenario where we need to re-arrange the rows with drag and drop effect. Using titanium, very easily we can achieve this.

Here I am describing the same with the video given below.

Summary :

Using above video I have described the way to implement drag and drop functionality on rows using Alloy with Titanium.

THAT’S IT

Presented ByRaju Mahato, Software Developer, Mindfire Solutions

Advertisements

2 thoughts on “Rows drag and drop functionality in a table view using Alloy with Titanium

  1. Hello Raju Sir,
    Myself Biresh Kumar Singh working in Odisys Technologies as a Android Developer. Actually i m designing one application using Titanium IDE & SQLite. In my application user enter details in text fields and when click on done button these data stores in database(SQLite) alert msg is coming like i printed “alert(‘Inserted Successfully’);” but that time data didn’t show in my table view and when i terminate and again run on emulator processed the entered data shows. can u give some instruction to solve out this problem.

    I m also sending u my application code. Please review at once & revert me…
    Mymail id “bireshsingh22@gmail.com”

    1. “app.js”

    Titanium.UI.setBackgroundColor(‘#000′);

    var tabGroup = Ti.UI.createTabGroup();

    var win1 = Ti.UI.createWindow({
    title:’Employee Details’,
    url:’employee.js’
    });

    var tab1 = Ti.UI.createTab({
    icon:’KS_nav_ui.png’,
    title:’Employees Details’,
    window: win1
    });

    var win2 = Ti.UI.createWindow({
    title: ‘Enter Details’,
    url: ‘addemp.js’
    });

    var tab2 = Ti.UI.createTab({
    icon:’ic_menu_add.png’,
    title:’Enter Details’,
    window:win2
    });

    tabGroup.addTab(tab1);
    tabGroup.addTab(tab2);

    tabGroup.open();

    2. “employee.js”

    var currentWin = Ti.UI.currentWindow;

    function setData() {

    var db = Ti.Database.install(‘details.sqlite’,’details’);

    var empname = Ti.UI.currentWindow.empname;

    var rows = db.execute(‘SELECT DISTINCT empname FROM details’);

    var dataArray = [];

    while (rows.isValidRow())
    {
    dataArray.push({title:” + rows.fieldByName(’empname’) + ”, hasChild:true, url:’employees.js’});
    rows.next();
    };

    tableview.setData(dataArray);
    };

    var tableview = Ti.UI.createTableView({
    });
    /*

    tableview.addEventListener(‘click’, function(e) {
    Ti.App.fireEvent(’employees.js’);
    });*/

    currentWin.add(tableview);

    setData();

    3. “addemp.js”

    var currentWin = Ti.UI.currentWindow;

    var label = Ti.UI.createLabel({
    text: ‘Enter Employee Details’,
    color: ‘#fff’,
    top: 15,
    textAlign:’center’,
    font: {
    fontWeight: ‘bold’,
    fontSize: 20
    },
    height:’auto’
    });

    currentWin.add(label);

    var empname = Ti.UI.createTextField({
    height: 50,
    top: 75,
    width: 250,
    editable :’true’ ,
    keyboardType: Ti.UI.KEYBOARD_DEFAULT,
    returnKeyType: Ti.UI.RETURNKEY_DONE,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    hintText: ‘EMPNAME’,
    font: {
    fontSize: 10
    },
    });

    currentWin.add(empname);

    var id = Ti.UI.createTextField({
    height: 50,
    top: 135,
    width: 250,
    editable :’true’ ,
    keyboardType: Ti.UI.KEYBOARD_DEFAULT,
    returnKeyType: Ti.UI.RETURNKEY_DONE,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    hintText: ‘EMPID’,
    font: {
    fontSize: 10
    },
    });

    currentWin.add(id);

    var name = Ti.UI.createTextField({
    height: 50,
    top: 195,
    width: 250,
    editable :’true’ ,
    keyboardType: Ti.UI.KEYBOARD_DEFAULT,
    returnKeyType: Ti.UI.RETURNKEY_DONE,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    hintText: ‘NAME’,
    font: {
    fontSize: 10
    },
    });

    currentWin.add(name);

    var role = Ti.UI.createTextField({
    height: 50,
    top: 255,
    width: 250,
    editable :’true’ ,
    keyboardType: Ti.UI.KEYBOARD_DEFAULT,
    returnKeyType: Ti.UI.RETURNKEY_DONE,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    hintText: ‘ROLE’,
    font: {
    fontSize: 10
    },
    });

    currentWin.add(role);

    var button = Ti.UI.createButton({
    title: ‘Insert Record’,
    top: 315,
    height: 60,
    width: 175
    });

    currentWin.add(button);

    button.addEventListener(‘click’,function(e) {

    empname.blur();
    id.blur();
    name.blur();
    role.blur();

    if (empname.value != ” && id.value != ” && name.value != ” && role.value != ”) {

    var db = Titanium.Database.install(‘details.sqlite’ , ‘details’);

    var ename = empname.value;
    var ID = id.value;
    var Name = name.value;
    var Role = role.value;

    var db = Titanium.Database.open(‘details’);

    var userResultSet = db.execute(‘INSERT INTO details (empname , id , name , role) VALUES (?,?,?,?)’ , ename, ID, Name, Role);

    alert(“Successfully inserted..!!!”);

    } else {
    alert(“Please fill in all fields..!!”);
    }
    db.close();
    });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s