11 Replies Latest reply on Feb 13, 2017 3:25 AM by fbartolom

    Reproducing UITableView behavior

    fbartolom

      I would like to develop a simple tableview effect with phonegap basically allowing the table contents to scroll while possibly having the table header fixed on the screen as well as the main page and top frame - being constituted by an NVD3 graph that while being shown fine on the iOS and Andorid simulator presents a scrollbar with some tilting when accessed by web. This is the style of my table been inserted in a frame:

      <style>  body, html{ overflow:auto; }  table td { overflow:auto; }  td, th{ border-top: thin solid; border-bottom: thin solid; border-left: 0px; border-right: 0px; text-align:center; }  table{ border-collapse: collapse; width:100%; } </style>

      While the two frames are defined in this way:

      <iframe src="dynamicChart1.html" id="graph" style="overflow:hidden"></iframe> <iframe src="mainTable.html" id="tableFrame" style="overflow:automatic"></iframe>

      What should I do to have the table cells scrolling possibly with an effect similar to the iOS one both on iOS and Android?

      Thanks, Fabrizio

        • 1. Re: Reproducing UITableView behavior
          kerrishotts Adobe Community Professional

          First, I don't think iframes are the best way to accomplish this.

           

          Second, there is no perfect cross-platform way ATM. Some web views understand "position: sticky" which acts a bit like iOS's sticky headings, but it's non-standard and only works on iOS.

           

          Most implementations I've seen on the web involve some degree of JavaScript listening for scroll events and then updating headings as appropriate. A large framework will probably have an implementation of this, but if you're not using one, you're probably going to want to search for a library that implements this for you.

          • 2. Re: Reproducing UITableView behavior
            fbartolom Level 1

            It may be so, but my client asked me to have a top section with a graph representation and the bottom one with a table, both of which to be updated in push, what I implemented by WebKit and I do not know of a better and more modular solution than using iframes for that. Assuming I focus just on the bottom frame with the table, where may I find a JavaScript library allowing me to populate a table and to handle the touch, similar to what an UiTableView does in IOS? At present, by setting auto scrolling at all levels in the CSS, I have some scrolling on Android and none in iPhone and I would thereafter highly appreciate a more reliable solution...

            • 3. Re: Reproducing UITableView behavior
              fbartolom Level 1

              I received a message by which my message was rejected. So I do not know if it is readable to anyone but me. Please confirm.

              • 4. Re: Reproducing UITableView behavior
                kerrishotts Adobe Community Professional

                I see two messages since my reply -- did you send others?

                • 5. Re: Reproducing UITableView behavior
                  fbartolom Level 1

                  Nope, strangely I received two messages by the moderator, once telling the post was accepted and the other aborted.

                   

                  At any rate I would appreciate if you gave me the reference to a better library handling the possibility of dynamically inserting cells in a iOS style table.

                  • 6. Re: Reproducing UITableView behavior
                    kerrishotts Adobe Community Professional

                    Not sure why you'd get two messages, but oh well.

                     

                    It might help to see a screenshot of what you're trying to accomplish so that I can better assist.

                    • 7. Re: Reproducing UITableView behavior
                      fbartolom Level 1

                      That is no rocket science. I have to dynamically update a table according to data I receive by WebSocket and used the example at:

                      Dynamically generate HTML table using JavaScript - document.createElement() method

                      as a template. I understood you know of a better library for perfoming the task and so I would like to know more.

                       

                      Thanks, Fabrizio

                      • 8. Re: Reproducing UITableView behavior
                        kerrishotts Adobe Community Professional

                        Maybe not rocket science, but I need to know that I am on the same page as you. So seeing a screenshot of exactly what you've got now and what you're trying to accomplish will help me make suggestions.

                         

                        Also: if all you're doing is dynamically generating an HTML table, then you don't need iframes. You can use a <div> with "overflow: scroll" and "-webkit-overflow-scrolling: touch" to scroll the internal contents. The link you posted doesn't use iframes either, so not sure why you're using them.

                         

                        Side note: with regard to the linked example: do not use innerHTML in that manner. Use textContent instead. Unescaped unvalidated user input is a security risk when using innerHTML.

                         

                        This (https://www.tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ ) might get you where you need to go, but it assumes a lot of things (like you need to assign cell widths, and have a set height on the table, etc., and isn't targeting IE at all).

                        • 9. Re: Reproducing UITableView behavior
                          fbartolom Level 1

                          First off, I do not use the frames for the table proper, but for inserting both a graph and a table in the same screen and to have some modularity in the quite different implementations of nv.d3 library and the table implementation.

                           

                          Thank you anyway for the example; yet after insering the CSS in the example you referenced the situation is reversed: for some time the scrolling worked fine in iOS but not on Android. Now it does not work on either, unfortunately.

                           

                          Moreover I load the cells with this code, I do not know if this is connected to the behaviour I experiment:

                           

                          function addRow(pipe, date) {

                                  

                              var table = document.getElementById("myTableData");

                              //var rowCount = table.rows.length;

                              var row = table.insertRow(1);

                              row.insertCell(0).textContent=pipe;

                              row.insertCell(1).textContent=date;

                            row.cells[0].value=pipe;

                            row.cells[1].value=pipe;

                            if(row.addEventListener){

                            row.addEventListener('mouseup', touched);

                            } else{

                            row.attachEvent('mouseup', touched);

                            }

                            if(row.addEventListener){

                            row.addEventListener('mousedown', mousedown);

                            } else{

                            row.attachEvent('mousedown', mousedown);

                            }

                          }

                           

                          And so I am not clear how I add add the tbody directive in javascript given the html section is just this:

                           

                          <table id="myTableData" class="fixed_headers">

                              <thead>

                            <tr>

                                  <td><b>Pipe Key</b></td>

                                  <td><b>Date</b></td>

                            </tr>

                              </thead>

                          </table>

                           

                          And so the table has the same color as the thead.

                          • 10. Re: Reproducing UITableView behavior
                            fbartolom Level 1

                            Screenshot from the PC visualization. Now the scrolling works fine on Android and not on iOS: the thing seems random.screenshot pipes.PNG

                            • 11. Re: Reproducing UITableView behavior
                              fbartolom Level 1

                              And finally I would like to highlight the full row the way it happens on iOS rather than the clicked cell. And this does not happen even if I connected the eventListener to the row, as you may see in the code sample above.

                              The issue seems conencted to the getting of the event by the td. If in fact I click on the left of the table in the web implementation, the event is triggered, while if I clock on the cell, the cell is highlighted but no event triggered. How do I make the td transparent so to rely all the events to the tr?