Loading ...
Sorry, an error occurred while loading the content.

DataTable scrolling...

Expand Messages
  • santini.alberto
    Hello. I have a DataTable defined as var myDataTable = new YAHOO.widget.DataTable( tableDiv1 , myColumnDefs, myDataSource, { draggableColumns: true,
    Message 1 of 3 , Jun 27, 2008
    View Source
    • 0 Attachment
      Hello.

      I have a DataTable defined as

      var myDataTable = new YAHOO.widget.DataTable("tableDiv1",
      myColumnDefs, myDataSource,
      {
      draggableColumns: true,
      selectionMode: "single",
      scrollable: true,
      height: "40em"
      });

      The DataTable contains, for example, 200 elements and only 20 elements
      at once are displayed because I fixed the height (40em). Of course
      there is a vertical scrollbar at the right of the widget.

      Here my two questions.

      1 - After I clicked on a row, setting the focus on the datatable, I
      can use the cursor keys (up/down) to move the row selected. If I reach
      the end of my 20 elements displayed there is no automatic scrolling to
      display the 21st element. How to display always the row selected? Or
      how to scroll using the cursor keys?

      Ok... I suppose I have to work the code about page down/up and paging
      only for one row. Or maybe intercepting tableKeyEvent... See, please,
      question #2. :)

      2 - If I have a search text area, looking for a row of the datatable,
      how to display that row (if it's not displayed)? For example the rows
      displayed are from 23 to 43 and I found the row 57; I would like to
      display the rows from 57 to 77 (or 47 to 67).

      Ok... I tried

      myDataTable.selectRow(myDataTable.getTrEl(myIndex));
      myDataTable.focus();

      but the row is selected but there is no scrolling to that row, so the
      row is not displayed.


      Thanks in advance,
      Alberto Santini
    • y_lsmith
      ... Alberto, You might be able to use a variation on this example: http://yuiblog.com/sandbox/yui/v251/examples/datatable/scroll_to_cell.html Otherwise, look
      Message 2 of 3 , Jun 27, 2008
      View Source
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "santini.alberto"
        <albertosantini@...> wrote:
        >
        > Hello.
        >
        > I have a DataTable defined as
        >
        > var myDataTable = new YAHOO.widget.DataTable("tableDiv1",
        > myColumnDefs, myDataSource,
        > {
        > draggableColumns: true,
        > selectionMode: "single",
        > scrollable: true,
        > height: "40em"
        > });
        >
        > The DataTable contains, for example, 200 elements and only 20 elements
        > at once are displayed because I fixed the height (40em). Of course
        > there is a vertical scrollbar at the right of the widget.
        >
        > Here my two questions.
        >
        > 1 - After I clicked on a row, setting the focus on the datatable, I
        > can use the cursor keys (up/down) to move the row selected. If I reach
        > the end of my 20 elements displayed there is no automatic scrolling to
        > display the 21st element. How to display always the row selected? Or
        > how to scroll using the cursor keys?
        >
        > Ok... I suppose I have to work the code about page down/up and paging
        > only for one row. Or maybe intercepting tableKeyEvent... See, please,
        > question #2. :)
        >
        > 2 - If I have a search text area, looking for a row of the datatable,
        > how to display that row (if it's not displayed)? For example the rows
        > displayed are from 23 to 43 and I found the row 57; I would like to
        > display the rows from 57 to 77 (or 47 to 67).
        >
        > Ok... I tried
        >
        > myDataTable.selectRow(myDataTable.getTrEl(myIndex));
        > myDataTable.focus();
        >
        > but the row is selected but there is no scrolling to that row, so the
        > row is not displayed.
        >
        >
        > Thanks in advance,
        > Alberto Santini
        >

        Alberto,

        You might be able to use a variation on this example:
        http://yuiblog.com/sandbox/yui/v251/examples/datatable/scroll_to_cell.html

        Otherwise, look try
        myDataTable.subscribe('rowSelectEvent', function (args) {
        args.el.scrollIntoView(); // and/or scrollIntoView(true) or (false)
        });

        Hope this helps,
        Luke
      • santini.alberto
        ... Hello Luke. ... Yes, it does. The hint about scrollIntoView was very useful: myDataTable.getTrEl(50).scrollIntoView(); I found this thread
        Message 3 of 3 , Jun 27, 2008
        View Source
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:

          Hello Luke.

          >
          > Otherwise, look try
          > myDataTable.subscribe('rowSelectEvent', function (args) {
          > args.el.scrollIntoView(); // and/or scrollIntoView(true) or (false)
          > });
          >
          > Hope this helps,

          Yes, it does. The hint about scrollIntoView was very useful:

          myDataTable.getTrEl(50).scrollIntoView();

          I found this thread

          http://tech.groups.yahoo.com/group/ydn-javascript/message/31224

          and I checked the reference

          http://developer.mozilla.org/en/docs/DOM:element.scrollIntoView

          Sometimes I forgot there is native DOM api. :)

          Thanks again,
          Alberto
        Your message has been successfully submitted and would be delivered to recipients shortly.