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

DataTable hiding header and knowing when a header is clicked

Expand Messages
  • wikkid_bigshot
    Hello, I have a set of 4 tables, all containing the same datatype (i.e. same column) grouped by 4 countries. How would one go about showing only one of the
    Message 1 of 8 , Apr 25, 2008
    • 0 Attachment
      Hello,

      I have a set of 4 tables, all containing the same datatype (i.e. same
      column) grouped by 4 countries.

      How would one go about showing only one of the header. I searched and
      found that headers can be hidden with the use of CSS, but I need to
      show one and hide the other 3. Is there an easy way, or do I have to
      hide all of them and create my own header and hiding all 4?

      Also, when the user click on the a column header of the only showing
      header of the table, all the tables have to be sorted. I am not sure
      what to call to get the Datatable sorted after searching through the
      API. I believe I need a Event Listener on the theadCellClickEvent,
      but what do I call after I received such an event to sort the datatables?

      Thanks for your help!
      Victor
    • y_lsmith
      ... datatables? ... Victor, You can still use CSS to hide the headers from the second, third, and fourth DataTables. Your instinct is right. You ll need to
      Message 2 of 8 , Apr 25, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "wikkid_bigshot" <viclai777@...> wrote:
        >
        > Hello,
        >
        > I have a set of 4 tables, all containing the same datatype (i.e. same
        > column) grouped by 4 countries.
        >
        > How would one go about showing only one of the header. I searched and
        > found that headers can be hidden with the use of CSS, but I need to
        > show one and hide the other 3. Is there an easy way, or do I have to
        > hide all of them and create my own header and hiding all 4?
        >
        > Also, when the user click on the a column header of the only showing
        > header of the table, all the tables have to be sorted. I am not sure
        > what to call to get the Datatable sorted after searching through the
        > API. I believe I need a Event Listener on the theadCellClickEvent,
        > but what do I call after I received such an event to sort the datatables?
        >
        > Thanks for your help!
        > Victor
        >


        Victor,

        You can still use CSS to hide the headers from the second, third, and fourth DataTables.

        Your instinct is right.  You'll need to subscribe to the theadCellClickEvent on the first DataTable and from that function, call sortColumn on the other DataTables.

        I put together this example  to illustrate.

        Hope this helps,
        Luke
      • wikkid_bigshot
        ...
        Message 3 of 8 , Apr 27, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "wikkid_bigshot" <viclai777@>
          > wrote:
          > >
          > > Hello,
          > >
          > > I have a set of 4 tables, all containing the same datatype (i.e. same
          > > column) grouped by 4 countries.
          > >
          > > How would one go about showing only one of the header. I searched and
          > > found that headers can be hidden with the use of CSS, but I need to
          > > show one and hide the other 3. Is there an easy way, or do I have to
          > > hide all of them and create my own header and hiding all 4?
          > >
          > > Also, when the user click on the a column header of the only showing
          > > header of the table, all the tables have to be sorted. I am not sure
          > > what to call to get the Datatable sorted after searching through the
          > > API. I believe I need a Event Listener on the theadCellClickEvent,
          > > but what do I call after I received such an event to sort the
          > datatables?
          > >
          > > Thanks for your help!
          > > Victor
          > >
          >
          >
          > Victor,
          >
          > You can still use CSS to hide the headers from the second, third, and
          > fourth DataTables.
          >
          > Your instinct is right. You'll need to subscribe to the
          > theadCellClickEvent on the first DataTable and from that function, call
          > sortColumn on the other DataTables.
          >
          > I put together this example
          >
          <http://yuiblog.com/sandbox/yui/v251/examples/datatable/multi_dt_sort.ht\
          > ml> to illustrate.
          >
          > Hope this helps,
          > Luke
          >
          Thank you very much for your help Luke. That is exactly what I was
          looking for! I will study it. Your example is greatly appreciated.

          Victor
        • wikkid_bigshot
          ...
          Message 4 of 8 , Apr 29, 2008
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "wikkid_bigshot" <viclai777@>
            > wrote:
            > >
            > > Hello,
            > >
            > > I have a set of 4 tables, all containing the same datatype (i.e. same
            > > column) grouped by 4 countries.
            > >
            > > How would one go about showing only one of the header. I searched and
            > > found that headers can be hidden with the use of CSS, but I need to
            > > show one and hide the other 3. Is there an easy way, or do I have to
            > > hide all of them and create my own header and hiding all 4?
            > >
            > > Also, when the user click on the a column header of the only showing
            > > header of the table, all the tables have to be sorted. I am not sure
            > > what to call to get the Datatable sorted after searching through the
            > > API. I believe I need a Event Listener on the theadCellClickEvent,
            > > but what do I call after I received such an event to sort the
            > datatables?
            > >
            > > Thanks for your help!
            > > Victor
            > >
            >
            >
            > Victor,
            >
            > You can still use CSS to hide the headers from the second, third, and
            > fourth DataTables.
            >
            > Your instinct is right. You'll need to subscribe to the
            > theadCellClickEvent on the first DataTable and from that function, call
            > sortColumn on the other DataTables.
            >
            > I put together this example
            >
            <http://yuiblog.com/sandbox/yui/v251/examples/datatable/multi_dt_sort.ht\
            > ml> to illustrate.
            >
            > Hope this helps,
            > Luke
            >
            Luke,

            Thanks to your help, I was able to split my table into 3 separate
            ones without the header following your example, but I am unable to
            successfully get the other tables to be sorted (which I believe is due
            to a failure to subscribe the header to a theadClickEvent and/or
            function).

            My situation is a little bit different from you example. We are
            making asycnRequest calls which returns array of JSON data as the
            datatable daatasource. We build the datatable inside the success
            return from the asynRequest call (i.e.

            <html>
            ...
            <div id="tbl1"></div>
            <div id="tbl2"></div>
            <div id="tbl3"></div>

            var postData ="";

            YAHOO.util.Connect.asyncRequest('POST', 'table_1/URL/',
            {success:createTable,argument:"tbl1",postData);

            YAHOO.util.Connect.asyncRequest('POST', 'table_2/URL/',
            {success:createTable,argument:"tbl2",postData);

            YAHOO.util.Connect.asyncRequest('POST', 'table_3/URL/',
            {success:createTable,argument:"tbl3",postData);

            )

            The createTable function reads the response text from the async
            call like so:

            var databTable1, databTable2, databTable3;

            function createTable(response) {

            var myColumnHeaders=[
            {key:"key1", label:"text1", sortable:true},
            {key:"key2", label:"text2", sortable:true},
            {key:"key3", label:"text3", sortable:true}];

            var
            myDataSource=new(YAHOO.util.DataSource(YAHOO.lang.JSON.parse(response.responseText));

            myDataSource.responseType = YAHOO,util.DataSource.TYPE_JSARRAY;

            myDataSource.responseSchema = {
            fields: [
            {key:"key1"},
            {key:"key2"},
            {key:"key3"}
            };

            var myConfigs = {
            paginator:true, // Enables built-in client-side pagination
            paginatorOptions:{ // Configurable options
            rowsPerPage: 5, // Show up to 500 rows per page
            dropdownOptions: [25,50,100,500]
            }
            };


            if (response.argument == "tbl1") {
            dataTable1 = new YAHOO.widget.DataTable(
            response.argument, new
            YAHOO.widget.ColumnSet(myColumnHeaders), myDataSource,
            myConfigs,
            {sortedBy:{key:"key1", dir:"desc"}});

            dataTable1.subscribe('theadCellClickEvent',function (oArgs) {
            YAHOO.util.Event.preventDefault(oArgs);
            alert("tested and true");
            });

            } else if (response.arugment=="tbl2" {

            dataTable2 = new YAHOO.widget.DataTable(
            response.argument, new
            YAHOO.widget.ColumnSet(myColumnHeaders), myDataSource,
            myConfigs,
            {sortedBy:{key:"key1", dir:"desc"}});

            dataTable2.subscribe('theadCellClickEvent',function (oArgs) {
            YAHOO.util.Event.preventDefault(oArgs);
            alert("tested and true2");
            });

            } else {

            dataTable3 = new YAHOO.widget.DataTable(
            response.argument, new
            YAHOO.widget.ColumnSet(myColumnHeaders), myDataSource,
            myConfigs,
            {sortedBy:{key:"key1", dir:"desc"}});

            dataTable3.subscribe('theadCellClickEvent',function (oArgs) {
            YAHOO.util.Event.preventDefault(oArgs);
            alert("tested and true3");
            });

            }

            Im not getting the alert box to show. Is there a scope issue with the
            createTable function?

            Thanks,
            Victor
          • wikkid_bigshot
            Hello, Just an update, I ve realized if I change the tHeadCellClickEvent to other events (i.e. mouseover, mousedown), the alert message will show up. I ve
            Message 5 of 8 , Apr 30, 2008
            • 0 Attachment
              Hello,

              Just an update, I've realized if I change the tHeadCellClickEvent'
              to other events (i.e. mouseover, mousedown), the alert message will
              show up. I've basically copied the table and subscribe code into my
              javascript callback function using my own datasource and it doesnt
              seem to work neither. Is there some sort of magic I need to weave to
              get theadCellClivkEvent to work? :)

              Thanks,
              Victor
            • y_lsmith
              Did you mean to declare the three tables as var databTable1, databTable2, databTable3; Looks like an extra b in each var name.
              Message 6 of 8 , Apr 30, 2008
              • 0 Attachment
                Did you mean to declare the three tables as
                var databTable1, databTable2, databTable3;

                Looks like an extra b in each var name.
              • Satyam
                theadCellClivkEvent gets caught and processed by the sorting function. If the column is declared as sortable, it won t fall through. For non-sortable
                Message 7 of 8 , Apr 30, 2008
                • 0 Attachment
                  theadCellClivkEvent gets caught and processed by the sorting function. If
                  the column is declared as sortable, it won't fall through. For non-sortable
                  columns, it will work.

                  I would check the spelling, the event is theadCellClickEvent as you posted
                  in your previous message. tHeadCellClickEvent does not exist. Nor does
                  theadCellClivkEvent or, to answer your question, yes, you would need some
                  sort of magic to make it work.

                  Satyam



                  ----- Original Message -----
                  From: "wikkid_bigshot" <viclai777@...>
                  To: <ydn-javascript@yahoogroups.com>
                  Sent: Wednesday, April 30, 2008 5:57 PM
                  Subject: [ydn-javascript] Re: DataTable hiding header and knowing when a
                  header is clicked


                  > Hello,
                  >
                  > Just an update, I've realized if I change the tHeadCellClickEvent'
                  > to other events (i.e. mouseover, mousedown), the alert message will
                  > show up. I've basically copied the table and subscribe code into my
                  > javascript callback function using my own datasource and it doesnt
                  > seem to work neither. Is there some sort of magic I need to weave to
                  > get theadCellClivkEvent to work? :)
                  >
                  > Thanks,
                  > Victor
                  >
                  >
                  > ------------------------------------
                  >
                  > Yahoo! Groups Links
                  >
                  >
                  >
                  >
                  >
                  > --
                  > No virus found in this incoming message.
                  > Checked by AVG.
                  > Version: 7.5.524 / Virus Database: 269.23.6/1404 - Release Date:
                  > 29/04/2008 18:27
                  >
                  >
                • wikkid_bigshot
                  ... Luke, Thanks for the reply! I redid my code using your example as a base. Got everything to work. Thanks!
                  Message 8 of 8 , May 6, 2008
                  • 0 Attachment
                    --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
                    >
                    > Did you mean to declare the three tables as
                    > var databTable1, databTable2, databTable3;
                    >
                    > Looks like an extra b in each var name.
                    >

                    Luke,

                    Thanks for the reply! I redid my code using your example as a base.
                    Got everything to work. Thanks!
                  Your message has been successfully submitted and would be delivered to recipients shortly.