Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0
Accepted Solution

Get click event of row

Hi 

i am using iscroll in touch device Blackberry and android , i just wanted to know that how  get click event of row .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Departure Schedule</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="scrollbar.css" rel="stylesheet" type="text/css" />
<!--script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/soapclient.js"></script>
<script type="text/javascript" src="script/jquery.min.js"></script-->
<script type="text/javascript" src="iScroll.js"></script>
<style type="text/css">
.scroll-pane
{
width: 100%;
height: 200px;
z-index:1;
overflow: auto;
position: relative;

}

.scroll-pane table tr:hover
{
background:#dbe3ec;

}

table td {
	text-align: center;
}
</style>



<script type="text/javascript">
function getID(i){
alert(i);	
	
}
 

function GetDepartureStationDashboard_callBack()
{
	//document.getElementById('loadingImg').style.visibility = "hidden";
	var tbl = document.getElementById('mainBodyDivContent');
	for (var i = 0; i < 20; i++) {
		var tr = document.createElement('tr');
		tr.setAttribute('id', i);
		
		//tr.setAttribute('onclick', getID(i));
		var td1 = document.createElement('td');
		td1.setAttribute('width', '30%');
		td1.innerHTML = 'column 1.'+i;;
		
		var td2 = document.createElement('td');
		td2.setAttribute('width', '30%');
		td2.innerHTML = 'column 2.'+i;;
		
		var td3 = document.createElement('td');
		td3.setAttribute('width', '35%');
		td3.innerHTML = 'column 3.'+i;;
		
		var td4 = document.createElement('td');
		td4.setAttribute('width', '5%');
		td4.innerHTML = i;
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		
		tbl.appendChild(tr);
	}


	var myScroll = new iScroll('mainBodyDiv', {snap: 'tr', scrollbarClass: 'myScrollbar' });
	
}


</script>
</head>
<body onload="GetDepartureStationDashboard_callBack()">
<div id="wrapper">
<div class="login_cont">
<div class="home_icon"><a href="index.html"><img src="images/back-icon.png" alt="Home" title="Home" /></a></div>
<h1 class="fr">Departures</h1>
<div class="cl"></div>
<div class="mid_cont">
<div class="grid_cont">
<div class="heading_bar">
<h1 class="fl" id="headingcontent"></h1>
<input name="" type="button" class="heading_btn fr" value="Change" onclick="location.href='index.html'"/>
<div class="cl"></div>
</div>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="30%">PLATFORM NO.</td><td width="30%">STD - ETD</td><td width="35%">NEXT STATION</td><td width="5%">STATUS</td>
	</tr>
</table>
</div>

<div class="scroll-pane" id="mainBodyDiv">
	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mainBodyDivContent">
		
	</table>
</div>

<div class="grid_error"><img src="images/help-icon.png" /> Departure Schedule</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="hdnStationName" id="hdnStationName" value="" />
</body>
</html>

 that is my index.html

 

 

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Get click event of row

Hi.

 

Since you posted almost all of the example from another post I added the iScroll for you I will add this here too to make the onclick working for the <tr> elements (rows). See the attached source in the "GetDepartureStationDashboard_callBack" function I added some changes to get it working. You mainly will need to copy+paste only the source within the <script> tag I think to make it working in your app.

 

Please note the iScroll var definition and changes made to the oject initialization. It is a little fix I work with to make sure the user can not select an item from the list when list is scrolling/moving up or down.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Get click event of row

sir can you explain what is

(function(id) {
tr.onclick = function() {
if(myScroll.isScrolling) {return;}

console.log(id);
};
}(i));
***********************
(i)); ??? this??
****************
and
"onScrollEnd": function(e) {
window.setTimeout(function() {myScroll.isScrolling = false;}, 120);

what is 120..?
Trusted Contributor
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Get click event of row

Hi ravi,
 

window.setTimeout(function() {myScroll.isScrolling = false;}, 120);

 In the setTimeout method, 120 represent to 120 milisecond.
it will execute the function but show the value after 12o miliSecond. 

Thanks & Regards,
Nitish Subudhi

Feel Free To Press The Like Button On The Right Side To Thank The User That Helped You.
Please Mark Posts As Solved If You Found a Solution.
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Get click event of row

Hi ravi1989.

 

To use the "i" of a for element in another function is little bit tricky. You could do the following:

 

for (var i = 0; i < 50; i++) {
	var tr = document.createElement('tr');
	tr.setAttribute('id', i);
	tr.onclick = function() {
		if(myScroll.isScrolling) {return;}

		console.log(i);
	};
	
	...
}

All times you click a row in the scrollable list it will output (console.log) "50". So we need to make the i somehow safe, that is why I'm using this to get it working:

 

for (var i = 0; i < 50; i++) {
	var tr = document.createElement('tr');
	tr.setAttribute('id', i);
	(function(id) { // this is also "i" now known as "id"
		tr.onclick = function() {
			if(myScroll.isScrolling) {return;} // is user is scrolling the scrollable list we do not need to do something here

			console.log(id); // this is also "i" known as "id"
		};
	}(i));  // this is "i" from the for loop
	
	
	...
}

 

The changes made in the scroller are simple and we need them since every time the user scroll it also will "click" an element in the list so we need to change something to get it working like explained below:

 

myScroll = new iScroll('mainBodyDiv', {
    ....
	"onScrollMove": function(e) {
		// we set the scroller to scrolling mode to prevent click on scroll
		myScroll.isScrolling = true;
	},
	"onScrollEnd": function(e) {
		// since there might be a delay until scroll is finished we need use a delay 
// to make sure we aren't scrolling anymore and set the "isScrolling" variable
// to false after 120 milliseconds; by this user is now able to click after scrolling ended window.setTimeout(function() {myScroll.isScrolling = false;}, 120); } });

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Get click event of row

thanks sir you are great......you help me lot today i learn lot of thing from you ..thanks
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Get click event of row

No problem. I worked the whole night on other stuff so this is really little bit of timeout for me today to write little bit more here Smiley Wink


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Get click event of row

Sir last question
how to set height of table in percentage so that it is compatible in all device.

.scroll-pane
{
width: 100%;
height: 200px;// here i am using fixed pixel
z-index:1;
overflow: auto;
position: relative;

}

But when i take it height in % it show all data in full screen without scrollbar .can you please help me.
Trusted Contributor
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Get click event of row

Hi ravi,
You can't declere height of any thing in percentage in CSS.
You have to declare the value in pixel.
But if you declare minHeight then it takes only the minimum height of the table and if the data crosses the minHeight value then it takes as much height as the data will take.
So in my opinion please declare minHeight for better result. 

Thanks & Regards,
Nitish Subudhi

Feel Free To Press The Like Button On The Right Side To Thank The User That Helped You.
Please Mark Posts As Solved If You Found a Solution.
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Get click event of row


ravi1989 wrote:

height: 200px;// here i am using fixed pixel

You are really right, you need to use fixed height. Ever worked with mediaqueries for css(3)? Have a closer look to the W3C Media Query page  or maybe start with an example showing how it works here. Going this way you can use different heights for different devices, depending on the height of the device used.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.