<tr>hide-item unsubscribed

[karthik655]

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??

[karthik655]

<table cellpadding="2" cellspacing="0" width="790" border="0" >
  <thead>
   <tr class="tabletitle">
     <td width="148" style="text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>

[Mone]

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

[karthik655]

Thank you...

[karthik655]

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

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);

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.

Am I missing something??

[DarioCrivelli]

This has been handled in its own thread.

[Mone]

I'll let you know as soon as the feature is available in the pre-release package.

Hi karthik655,

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.