Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Table View + Search Bar

Hi Team,

I am new on Titanium, i need create the following app:

I have the table view section on file test1.js, when the user make click on the button add1, the application open a new window (customer.js), this window has a list of values and the option of search.

When the user select a value in the list of values (on customer.js), i need get the value selected on file test1.js.

Any suggestions?

I have the following code:


test1.js

function openWindow(url, anim, title)
{

    var win= Titanium.UI.createWindow({  
        title: title,
        url: url,
        fullscreen: false
        });

    if (Titanium.UI.currentTab != null)
    {
        Titanium.UI.currentTab.open(win,{animated:anim});
    }
    else
    {
        win.open({animated:anim});
    }

}

Titanium.UI.setBackgroundColor('#fff');

var win = Titanium.UI.currentWindow;

var data =[];

var section = Titanium.UI.createTableViewSection();
data.push(section);

// ROW 1 - Customer
var row1 = Titanium.UI.createTableViewRow();

row1.height = 52;
var item1 = Titanium.UI.createLabel({
    color:'#000',
    text:'Customer',
    font:{fontSize:16, fontWeight:'bold'},
    top:4,
    left:10,
    height:25,
    width:100
});    
row1.add(item1);

var cost1 = Titanium.UI.createLabel({
    color:'#999',
    font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
    top:26,
    left:10,
    height:20,
    width:150
});    
row1.add(cost1);

var add1 = Titanium.UI.createButton({

    backgroundImage:'addDefault.png',
    height:27,
    width:27,
    top:15,
    right:10
});
row1.add(add1);
section.add(row1);



var tableview = Titanium.UI.createTableView({
    data:data,
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED

});


add1.addEventListener('click', function()
{

    openWindow('customer.js',true,'Customer');


});

win.add(tableview);

customer.js

var win = Titanium.UI.currentWindow;

// create table view data object
var data = [];

data[0] = Ti.UI.createTableViewRow({title:'John AppleSeed', id:'100'});
data[1] = Ti.UI.createTableViewRow({title:'John', id:'101'});
data[2] = Ti.UI.createTableViewRow({title:'Mark', id:'102'});
data[3] = Ti.UI.createTableViewRow({title:'Paul', id:'103'});

var search = Titanium.UI.createSearchBar({

    showCancel:false,
    hintText:'Search Customer'
});
search.addEventListener('change', function(e)
{
   e.value // search string as user types
});
search.addEventListener('return', function(e)
{
   search.blur();
});
search.addEventListener('cancel', function(e)
{
   search.blur();
});

// create table view
var tableview = Titanium.UI.createTableView({
    data:data,
    search:search

});

//Titanium.App.Properties.setInt('row','');

// create table view event listener
tableview.addEventListener('click', function(e)
{
    // event data
    var index = e.index;
    var section = e.section;
    var row = e.row;
    var rowdata = e.rowData;

    var prop = rowdata.id;

    win.close();
});



// add table view to the window
win.add(tableview);
— asked November 3rd 2010 by Jorge Luis Frias Butron
  • table
  • view
0 Comments

2 Answers

  • Look at the KitchenSink Example custom_properties.js

    in a nutshell though

    Assign a custom property on win since it is the current windw

    win.SELECTED_DATA_ID = rowdata.id;
    
    — answered November 5th 2010 by Aaron Saunders
    permalink
    1 Comment
    • Hi Aaron thanks for your help.

      I have reviewed your suggestion but the case is inverse.

      I need select a value on window2(custom_properties2.js) and the value selected show in window 1 (custom_properties.js).

      In the sample The value is defined on window1 and the information is show on window2.

      Any suggestion for solve my problem.

      Thanks

      — commented November 5th 2010 by Jorge Luis Frias Butron
  • You could add a custom Event in window1 that receives an object, and in window2 you will fire that event passing the selected value as an argument. So the receiving of the value will happen on the event handler.

    Or

    You could pass a reference of the field you want to fill from window1 to window2, and after making a selection in window2, just set that field's value and close window2.

    Hope this helps.

    — answered November 5th 2010 by Vali Filip
    permalink
    2 Comments
    • Hi Vali thanks for review my problem.

      Would you send for me any sample of implementation about suggestion?

      And

      In window1 i have the button for select items. When i press the button, the new window is open (windows2), in this windows i can see the list of item.

      I need select a item on windows2 and the item selected show in button of windows1.

      Please you can see the user interface design on:
      http://seedmanager.nerdsonsite.com/images/sample.png

      Now,

      In window2 i have stored the value of item selected on:

      Titanium.App.Properties.setString('row',index);
      

      On windows1 i have get the value stored on window2:

      var row = Titanium.App.Properties.getString('row');
      

      But i have a problem, the value of variable row selected is not show on window1, the value show is the previous.

      How can update the windows1 with value of windows2 passed?

      Any Suggestion.

      Thanks
      Jorge Luis

      — commented November 6th 2010 by Jorge Luis Frias Butron
    • So, you have to make a receiver for the event in window1, something like this:

      window1.js

      Titanium.App.addEventListener('set_cust', function(data) {
          row = data.name;
          ...set the name in the row, according to your layout ;)
      });
      

      And have a function as a handler for the click event on the tableview that looks like this:

      window2.js

      function set_cust(e) {
          Titanium.App.fireEvent('set_cust',{
              id: e.rowData.cust_id,
              name: e.rowData.title
              }); 
      }
      

      Hope you can make this happen.

      — commented November 7th 2010 by Vali Filip
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.