Titanium TableView row column - uitableview

I have the following thing to do:
Create a TableView with 2 columns
When I click on the first column, the row should be removed
When I click on the second column, the associated product should be displayed
I put an eventListener on the TableView which works fine. Unfortunately I have no idea how to separate the 1st column event from the 2nd column event. Any ideas?
Here is the source code:
var viewResults = Titanium.UI.createView({
...
});
...
for (rowId in rows) {
var tableRow = Titanium.UI.createTableViewRow();
var rowDelete = Titanium.UI.createView({
...
});
tableRow.add(rowDelete);
var rowProduct = Titanium.UI.createView({
...
});
tableRow.add(rowProduct);
tblData.push(tableRow);
}
tblResults.setData(tblData);
...
tblResults.addEventListener('click', function(e){
if (firstColumn) {
...
}else{
...
}
});

You can add custom property to views which you are creating:
var rowDelete = Titanium.UI.createView({
action: 'delete',
...
});
var rowProduct = Titanium.UI.createView({
action: 'product',
...
});
and then in eventListener check event.source property:
tblResults.addEventListener('click', function(e){
if (e.source.action === 'product') {
...
} else if (e.source.action === 'delete') {
...
}
});

Related

kendo ui Clickable row

I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.
here is my code :
function FondsGrid() {
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:...........",
dataType: "json"
}
},
pageSize: 20
});
var accountGrid = $("#grid-fonds").kendoGrid({
dataSource: sharedDataSource,
sortable: true,
pageable: false,
columns: [
{
field: "CodIsin",
title: " ",
template: '<span class="categ #= CodIsin #"></span>',
attributes: {
class: "text-center"
},
headerattributes: {
style: "text-align:center"
},
width: 35
},
{
field: "LIBELLEPDT",
title: "Nom du fonds",
template: '<div id="#: IdProduitSP #" class="title-fonds #:
IdProduitSP #" data-toggle="popover" ><span class="desc-
fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
.
.
.
dataBound: function () {
var widthGrid = $('.k-grid-content').width();
$(".k-grid-header").width(widthGrid);
$(".title-fonds").popover({
trigger: 'hover',
html: true,
template: '<div class="popover HalfBaked" role="tooltip">
<div class="arrow"></div><h3 class="popover-header"></h3><div
class="popover-body"></div></div>',
content: function () {
return $('#popover-content').html();
}
});
}
}).getKendoGrid();
/* Initialisation */
$(document).ready(function ($) {
FondsGrid();
});
Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.
However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:
selectable: "multiple, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.
See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change
This how I fixed It.
$("#grid-fonds").on("click", "td", function (e) {
var row = $(this).closest("tr");
var value = row.find("td:first").text();
console.log(value);
});

Kendo UI - Get text of a treeview node

I have a problem with the Kendo UI TreeView and I'm looking for a solution for a while now. I found something similar here, but it didn't help me.
In my view I fill my TreeView like this:
Html.Kendo().TreeView()
.Name("treeview")
.BindTo((IEnumerable<TreeViewItemModel>) ViewBag.inlineDefault)
.Events(events => events
.Select("onSelect")
)
private IEnumerable<TreeViewItemModel> GetDefaultInlineData(ArrayList tables)
{
List<TreeViewItemModel> names = tables.Cast<TreeViewItemModel>().ToList();
List<TreeViewItemModel> inlineDefault = new List<TreeViewItemModel>
{
new TreeViewItemModel
{
Text = "Tables",
Items = names
}
};
return inlineDefault;
}
My onSelect funtion is the following:
<script>
function onSelect(e) {
$.ajax({
type: 'POST',
url: '/Editor/GetTableContent' ,
data: { tableName: ?????? },
success: function (data) {
$('#table').html(data);
}
}).done(function () {
alert('Done');
});
}
</script>
It calls a mehtod in my controller that needs the name of the selected node as parameter (string) to display the content of a table in a grid.
Is there a possibility to get what I need?
Thx for your help!
To get the text of the selected node in onSelect():
var nodeText = this.text(e.node);
this == the TreeView(can also use e.sender instead of this)
e.node == the selected node.
http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#events-select
http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#methods-text

Unable to restrict the Ti.App.fireEvent execute multiple time

In my app Ti.App.addEventListener executed multiple times even fireEvent calls one time.
I was unable to remove the fireEvent.
How to remove the created fireEvent.
Here is my sample files:
selectUser.xml
Alloy>
<NavigationWindow id="selectUserNav" platform="ios">
<Window id="selectUserWin">
<Label id="selectUserLabel"/>
<Label id="userName"/>
</Window>
</NavigationWindow>
</Alloy>
selectUser.js
var selectedUser = '';
function displaySelectedUser(){
$.selectUserLabel.setText('Select the user');
$.userName.setText(selectedUser);
}
displaySelectedUser();
$.selectUserWin.addEventListener('open', function() {
var titleLabel = Ti.UI.createLabel({
text : 'Select User',
});
$.selectUserWin.setTitleControl(titleLabel);
var leftView = Ti.UI.createView({
});
var leftButton = Titanium.UI.createButton({
backgroundImage : '/left_arrow.png'
});
leftView.add(leftButton);
$.selectUserWin.setLeftNavButton(leftView);
var rightView = Ti.UI.createView({
});
var rightButton = Titanium.UI.createButton({
backgroundImage : '/right_arrow.png'
});
rightView.add(rightButton);
$.selectUserWin.setRightNavButton(rightView);
leftButton.addEventListener('click', function(e) {
$.selectUserNav.close();
});
rightButton.addEventListener('click', function(e) {
Alloy.createController('usersList').getView().open();
});
});
Ti.App.addEventListener('username', function(data) {
Ti.API.info('### selectedUser: '+ data.selectedUserName);
selectedUser = data.selectedUserName;
displaySelectedUser();
});
usersList.xml
Alloy>
<NavigationWindow id="usersListNav" platform="ios">
<Window id="usersListWin">
<TableView id="usersDispTable"></TableView>
</Window>
</NavigationWindow>
</Alloy>
usersList.js
var usersTableData = [];
function userList(){
for ( i = 0; i < 5; i++) {
var titleLabel1 = Titanium.UI.createLabel({
text : 'srinivas',
});
var userListRow = Ti.UI.createTableViewRow({
userName : 'srinivas',
height : '40',
});
userListRow.add(titleLabel1);
usersTableData.push(userListRow);
userListRow.addEventListener('click', function(e) {
var selectedArgs = {
selectedUserName : e.rowData.userName
};
Ti.App.fireEvent('username', selectedArgs);
$.usersListNav.close();
});
}
$.usersDispTable.setData(usersTableData);
}
userList();
$.usersListWin.addEventListener('open', function() {
var titleLabel = Ti.UI.createLabel({
text : 'Users List',
});
$.usersListWin.setTitleControl(titleLabel);
var leftView = Ti.UI.createView({
});
var leftButton = Titanium.UI.createButton({
backgroundImage : '/left_arrow.png'
});
leftView.add(leftButton);
$.usersListWin.setLeftNavButton(leftView);
leftButton.addEventListener('click', function(e) {
$.usersListNav.close();
});
});
sorry but I will answer your question indirectly, because what you are trying to do isn't efficient.
What you need to do is to listen your TableView not your TableViewRow like example below:
$.usersDispTable.addEventListener('click',function(e){
Ti.App.fireEvent('username', e.rowData.username);
}
By the way, if you need to remove an EventLister you can do like this:
window.addEventListener('click', function foo(e) {
window.removeEventListener('click', foo);
[...]
}
--Edited (Answer comment)
That is because you are creating a Global EventListener Ti.App.addEventListener every time selectUser is called.
One possible option is to bind the event listener to userList creation like:
[...]
var userList = Alloy.createController('usersList').getView();
userList.addEventListener('username',function setUsername(username){
userList.removeEventListener('username',setUsername);
Ti.API.info('### selectedUser: '+ data.selectedUserName);
selectedUser = data.selectedUserName;
displaySelectedUser();
});
userList.open();
[...]

jquery sortable ul in a ul not working

Kind of confused. I have a chunk of code for sorting nested li's that works. I copied the code into another page, and just changed a few class names to match the new pages elements. For the life of me, I cannot figure out why the same code is not working on the new page. Here is the code:
var is_sortable = true;
$(function () {
$('.packaging_move').bind("mousedown", packaging_add_sort);
function packaging_add_sort() {
//CHECK TO SEE IF THERE IS AN ACTIVE SORTABLE
if (is_sortable) {
//GET THE PARENT AND CURRENT ELEMENTS TO THE CLICKED ITEM
var parent = $(this).parent('div').parent('div').parent('li').parent('ul');
var current = $(this).parent('div').parent('div').parent('li');
//MAKE TRANSPARENT
current.animate({
opacity: 0.60
}, 100);
//PREVENT ANOTHER SORTABLE
is_sortable = false;
//CREATE SORTABLE
parent.sortable({
axis: 'y',
update: function () {
var parent_id = parent.attr("id");
var list = parent.sortable('serialize');
$.post("index.php?plugin=packaging&page=index", {
action: "packaging_rank",
parent: parent_id,
items: list
});
parent.sortable('destroy');
is_sortable = true;
},
stop: function () {
current.animate({
opacity: 1.0
}, 100);
parent.sortable('destroy');
is_sortable = true;
},
}).disableSelection();
//IF THERE IS AN EXISTING SORTABLE SHOW ERROR
} else {
zlcms_alert("Sorting Error", "You currently have an instance of sorting initiated. You may only sort one item at a time. Please complete the previous sort and try again.")
}
}
}

get a column click in dataTables plugin instead of row

I have the following code that works great for row click, but I want the first and last column to be clickable and I want to be able to tell which column was clicked. I have the following code
$(document).ready(function() {
oTable = $('#mytable').dataTable();
var fa = 0;
$('#submit tbody td ').click(function() {
var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);
});
function rowClick() {
fa = this;
var id = $("td:eq(1)", this).text();
cardNumber = $.trim(id);
$.ajax({
url : 'myurltopostto',
type : 'POST',
data : {
id : id
},
success : function(data) {
oTable.fnDraw(); //wanted to update here
},
error : function() {
console.log('error');
}
});
}
});
the code here is the row click
var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);
what can I do for a cell click and get info.
using jquery plugin dataTables
thanks
When you do it $('#submit tbody td ').click(function() ... you bind click event to the td.
So, to get the first and last column click use the following:
$('td:first, td:last', '#submit tbody tr').on('click', function() {
// do what you want
});
demo1
updated 1:
Get last two columns:
jQuery('#mytable tr').each(function() {
jQuery('td', this).slice(-2).on('click', function() {
// do what you want
});
});
demo2
update 2: Get each column data on click last two columns
jQuery('#mytable tr').each(function() {
jQuery('td', this).slice(-2).on('click', function() {
// do what you want
var $columns = jQuery(this).siblings('td').andSelf();
jQuery.each($columns, function(i, item) {
alert(jQuery(item).html());
});
});
});
demo3
Just specify a column number instead of first, last, etc. The example below shows column 12. zero is first. It's easier that way.
td:eq(11)
$(document).ready(function() {
var table = $('#tableID').DataTable();
$('#tableID').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
for more refer this link

Resources