Printable View
Hi All,
I am trying to hide a tr which contains items subscribed to the lightstreamer.While i try to hide the tr the item is getting unsubscribed.Is it the way it works.Is dere any work arounds while hiding the tr and the item not getting unsubscribed.
Regards,
George Eapen
One more update.The same code works fine with chrome browser.But in IE while hiding its getting unsubscribed :(.Any work arounds?????
hi George,
letting a cell disappear does not unsubscribes from the related items/fields.
what are you doing to make your tr disappear?
can you show me your code?
Hi,
I am sorry its not a tr its a span.I am using a third party menu -visual css menu.In that each table which is subscribed is embedded inside a span tag.Based on the events the span is made visible and invisible.
<ul>
<li>
<span class="qmcbox">
<table border="0" id="datagrid" cellspacing="1">
<thead>
<tr>
<th width="200">
Ask#
</th>
<th width="200">
Ask Volume
</th>
<th width="200">
Bid #
</th>
<th width="200">
Bid Volume
</th>
</tr>
</thead>
<tr id="marketOrder" source="lightstreamer" bgcolor="#ECEFF6" >
<td width="205" align="center" >
<div source="lightstreamer" field="1"></div>
</td>
<td width="200" align="center" >
<div source="lightstreamer" field="2"></div>
</td>
<td width="190" align="center" >
<div source="lightstreamer" field="3"></div>
</td>
<td width="205" align="center">
<div source="lightstreamer" field="4"></div>
</td>
</tr>
</table>
</li>
</ul>.The code works fine with chrome browser.But in IE its getting unsubscribed.
hi,
what I need to know is how the span is made "invisible" (eg: setting its style.display to none).
do you have the chance to let me see a page where I can see the problem?
did you see any javascript error in your page?
i m really sorry for the late reply...i rectified the issue by creating my own tab component .Now it works fine.Thank you for the support.
Hi,
Im also looking for the same solution can you please help me on this
Hi Karthik,
I need the details about your case to help you:
what happens in your case? (automatic unsubscription?)
what are you doing to make your element disappear?
can you show me your code?
Hi,
Im developing a Hybrid app for mobiles. In device its not possible for me to display more than 10 records at a time. Im trying to use a pagination concept with one on-screen table(used DynaGrid) running on higher frequeny and one off-screen table with lower frequency. I subscribed two tables at the same time and i used jquery to switch between the tables. It solved my issue to some extent but when the hidden table come into live i need to increase the frequency and need to decrease the frequency of the table which is going off-screen without resubscription.
Is there any way to do it??
Code:<table cellpadding="2" cellspacing="0" width="790" border="0" >
<thead>
<tr class="tabletitle">
<td width="148" style="text-align: left"> Name</td>
<td width="42">Last</td>
<td width="64" style="text-align: center">Time</td>
<td width="24" style="text-align: center">+/-</td>
<td width="61">Change</td>
<td width="50">Bid Size</td>
<td width="50">Bid</td>
<td width="50">Ask</td>
<td width="50">Ask Size</td>
<td width="50">Min</td>
<td width="50">Max</td>
<td width="50">Ref.</td>
<td width="50">Open</td>
</tr>
</thead>
<tbody>
<tr id="stocks" data-source="lightstreamer" class="lscoldA" border="0">
<td nowrap style="text-align: left">
<a href="#" data-source="lightstreamer" data-field="click" data-update="onclick">
<img src="images/popup.gif" width="16" height="16" border="0" align="left" hspace="1" alt="Graphic Chart">
<div id="stockName" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #000080; background: #eeeeee; font-weight: bold; text-align: left;" data-source="lightstreamer" data-field="stock_name">Loading...</div>
</a>
</td>
<td><div data-source="lightstreamer" data-field="last_price">-</div></td>
<td><div data-source="lightstreamer" data-field="time">-</div></td>
<td>
<div>
<img data-source="lightstreamer" data-field="arrow" data-update="src" src="images/spacer.gif" width="20" height="8" border="0">
</div>
</td>
<td nowrap="nowrap"><div data-source="lightstreamer" data-field="pct_change">-</div></td>
<td><div data-source="lightstreamer" data-field="bid_quantity">-</div></td>
<td><div data-source="lightstreamer" data-field="bid">-</div></td>
<td><div data-source="lightstreamer" data-field="ask">-</div></td>
<td><div data-source="lightstreamer" data-field="ask_quantity">-</div></td>
<td><div data-source="lightstreamer" data-field="min">-</div></td>
<td><div data-source="lightstreamer" data-field="max">-</div></td>
<td><div data-source="lightstreamer" data-field="ref_price">-</div></td>
<td><div data-source="lightstreamer" data-field="open_price">-</div></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disc">Simulated market data.</td>
<td colspan="12" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background: #ffffff; font-weight: bold; text-align: right">
<a href="#" id="switchP2" style="display:none" onClick="changePage(2); return false;"> Next 15 >> </a>
<a href="#" id="switchP1" style="display:none" onClick="changePage(1); return false;"> << Previous 15 </a>
</td>
</tr>
</tfoot>
</table>
<script>
//////////////// Connect to current host (or localhost) and configure a StatusWidget
var hostToUse = document.location.protocol == "file:" ? "http://localhost:8080" : document.location.protocol+"//"+document.location.hostname+(document.location.port?":"+document.location.port:"");
define("sharingClient",["LightstreamerClient","StatusWidget"],function(LightstreamerClient,StatusWidget) {
var sharingClient = new LightstreamerClient(hostToUse,"DEMO");
sharingClient.connectionSharing.enableSharing("DemoCommonConnection", "ATTACH", "CREATE");
sharingClient.addListener(new StatusWidget("right", "0px", true));
sharingClient.connect();
return sharingClient;
});
</script>
<script src="format.js" type="text/javascript"></script>
<script type="text/javascript">
var redColor = "#f8b87a";
var greenColor = "lightgreen";
var backC = "transparent";
var hotTxtCol = "#000000";
var fieldsList = ["last_price", "time", "pct_change", "bid_quantity", "bid", "ask", "ask_quantity", "min", "max", "ref_price", "open_price", "stock_name", "item_status"];
var itemList1 = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10", "item11", "item12", "item13", "item14", "item15"];
var itemList2 = ["item16", "item17", "item18", "item19", "item20", "item21", "item22", "item23", "item24", "item25", "item26", "item27", "item28", "item29", "item30"];
var imgUp = "images/quotes_up.gif";
var imgDown = "images/quotes_down.gif";
var doFade = location.search.indexOf("fade=ON") > -1;
var unique = Math.floor(Math.random() * 1000);
var lsClient;
var subsItemList1;
var subsItemList2;
var styleH = "lshot";
var styleC = "lscold";
var count=0;
var flag=0;
var flag2=0;
require(["sharingClient","Subscription","DynaGrid"],
function(sharingClient,Subscription,DynaGrid) {
var dynaGrid = new DynaGrid("stocks",true);
var cellList = dynaGrid.extractFieldList()
dynaGrid.setSort("stock_name");
dynaGrid.setNodeTypes(["div","span","img","a"]);
dynaGrid.setAutoCleanBehavior(true, false);
dynaGrid.addListener({
onVisualUpdate: function(key,info,domNode) {
if(flag2==0) {
count++;
if(count>=15)
$("table > tbody > tr:gt(16)").hide();
if(count>=31)
flag2=1;
}
if (info == null) {
return;
}
//general style and effects
info.setHotTime(400);
info.setStyle(styleH,styleC);
if (info.getChangedFieldValue("stock_name") != null) {
dynaGrid.updateRow(key,{click:"openPopup('"+key+"');return false;"});
} else if (doFade) {
info.setHotToColdTime(300);
}
var cold = (key.substring(4) % 2 == 1) ? "#eeeeee" : "#ddddee";
domNode.style.backgroundColor = cold;
if (info.getChangedFieldValue("item_status") == "inactive") {
//possible if testing the JMS version of the Data Adapter
//if it happens we want all the cells to be highlighted in grey;
//first we force the highlighting on every cell
forceHighlight(info,true,cellList);
info.setAttribute("#808080","#808080","color");
} else {
if ((info.getChangedFieldValue("item_status") == "active" && dynaGrid.getValue(key,"item_status") == "inactive")) {
//possible if testing the JMS version of the Data Adapter
//so we force again the highlighting on every cell to restore
//the "active" color
forceHighlight(info,true,cellList);
info.setAttribute("#000000","#000000","color");
info.setCellAttribute("stock_name","#000080","#000080","color");
}
// illumination color
// choose the backgroundColor
var lastPrice = info.getChangedFieldValue("last_price");
if (lastPrice !== null) {
var prevPrice = dynaGrid.getValue(key,"last_price");
if (!prevPrice || lastPrice > prevPrice) {
info.setAttribute(greenColor,cold,"backgroundColor");
} else {
info.setAttribute(redColor,cold,"backgroundColor");
}
} else {
info.setAttribute(greenColor,cold,"backgroundColor");
}
//put arrow and handle change style
var pctChange = info.getChangedFieldValue("pct_change");
if (pctChange !== null) {
pctChange = formatDecimal(pctChange,2,true)+"%";
hotTxtCol = (pctChange.charAt(0) == '-') ? "#dd0000" : "#009900";
if (pctChange.indexOf("-") > -1) {
info.setCellValue("arrow",imgDown);
info.setCellAttribute("arrow",cold,cold,"backgroundColor");
info.setCellAttribute("pct_change","black",hotTxtCol,"color");
info.setCellValue("pct_change",pctChange);
} else {
info.setCellValue("arrow",imgUp);
info.setCellAttribute("arrow",cold,cold,"backgroundColor");
info.setCellAttribute("pct_change","black",hotTxtCol,"color");
info.setCellValue("pct_change","+"+pctChange);
}
info.setCellAttribute("pct_change","bold","bold","fontWeight");
}
// format decimal fields.
formatDecimalField(info, "last_price");
formatDecimalField(info, "bid");
formatDecimalField(info, "ask");
formatDecimalField(info, "min");
formatDecimalField(info, "max");
formatDecimalField(info, "ref_price");
formatDecimalField(info, "open_price");
// format the timestamp
var time = info.getChangedFieldValue("time");
if (time != null) {
info.setCellValue("time",formatTime(time));
}
}
}
});
subsItemList1 = new Subscription("MERGE",itemList1,fieldsList);
subsItemList1.addListener(dynaGrid);
subsItemList1.setDataAdapter("QUOTE_ADAPTER");
subsItemList1.setRequestedSnapshot("yes");
subsItemList1.setRequestedMaxFrequency(1);
subsItemList2 = new Subscription("MERGE",itemList2,fieldsList);
subsItemList2.addListener(dynaGrid);
subsItemList2.setDataAdapter("QUOTE_ADAPTER");
subsItemList2.setRequestedSnapshot("yes");
subsItemList2.setRequestedMaxFrequency(0.1);
sharingClient.subscribe(subsItemList1);
sharingClient.subscribe(subsItemList2); //we may also subscribe both lists simultaneously
lsClient = sharingClient;
//enable switch
document.getElementById("switchP2").style.display = "";
});
//////////////// Stock Details Popup Management
function openPopup(item) {
var wdt = window.open("popup.html?item=" + item, "SLDpopup_" + unique + "_" + item, "width=535,height=238,history=0,resizable,status=1,menubar=1");
wdt.focus();
return false;
}
//////////////// Stock Grid Management
function changePage(groupNumber) {
rowlimit =15;
if (groupNumber == 1) {
$("table > tbody > tr:eq(1)").hide();
$("table > tbody > tr:lt(16)").show();
$("table > tbody > tr:gt(16)").hide();
document.getElementById("switchP1").style.display = "none";
document.getElementById("switchP2").style.display = "";
//// lsClient.unsubscribe(subsItemList2);
// lsClient.subscribe(subsItemList1);
} else if (groupNumber == 2) {
$("table > tbody > tr:lt(16)").hide();
$("table > tbody > tr:gt(16)").show();
document.getElementById("switchP1").style.display = "";
document.getElementById("switchP2").style.display = "none";
// lsClient.unsubscribe(subsItemList1);
// lsClient.subscribe(subsItemList2);
}
}
$(document).ready(function() {
// Handler for .ready() called.
$("table > tbody > tr:gt(16)").hide();
});
</script>
</body>
</html>
Hello,
Currently there is no way to change the frequency of a Subscription without unsubscribing and resubscribing it.
Anyway we have such feature in our roadmap for the final release of Lightstreamer 5 Colosseo.
I'll let you know as soon as the feature is available in the pre-release package.
HTH
Thank you...
Hello Mone,
Can you please explain how pagination works in DynaGrid.
I've 15 records in my DynaGrid(Abstract widget) and i want to display 5 records in each page.
following is the code
This successfully divided my grid into 3 pages. The first page is working fine but when i am moving to second page or third page they are not displaying the other 10 records, they are only showing some of (4 or 3) records from the first page.Code:var dynaGrid = new DynaGrid("stocks",true);
var cellList = dynaGrid.extractFieldList()
dynaGrid.setSort("stock_name");
dynaGrid.setNodeTypes(["div","span","img","a"]);
dynaGrid.setAutoCleanBehavior(true, false);
dynaGrid.setMaxDynaRows(5);
Am I missing something??
This has been handled in its own thread.
Hi karthik655,Quote:
I'll let you know as soon as the feature is available in the pre-release package.
We released a new version of the JavaScript client library supporting dynamic change of frequency.
You can see the documentation here: http://www.lightstreamer.com/docs/cl...edMaxFrequency
and a simple demo here (see the max frequency slider on top of the page): http://www.lightstreamer.com/demo/BandwidthDemo/
HTH
PS: the new server is also required for the dynamic frequency change to work.