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

Datatable does not display within Tabview

Expand Messages
  • lesgreen123
    I m having a problem displaying a datatable within a TabView. I created a div within the tab to be used as the container for the table:
    Message 1 of 3 , Jan 30, 2009
    View Source
    • 0 Attachment
      I'm having a problem displaying a datatable within a TabView. I
      created a div within the tab to be used as the container for the table:

      <div id="history"><!-- tab 2 -->
      <div id="requestorHistory"></div>
      </div>

      The table is not created when the application first loads, it is
      dynamically created after a user does a search.


      ...
      var histClmnDefs = [
      {key:"request_date", label:"Request Date", sortable:true},
      {key:"info_serv_desc", label:"Requests", sortable:true,
      formatter:this.formatInfoServ},
      {key: "appoint_date", label:"Appointment", sortable:true},
      {key: "interp_date", label:"Mid-Tier", sortable:true},
      {key: "comments", label:"Comments"}
      {key: "check", label:"Delete", formatter:"checkbox"}
      ];

      this.dsHistory = new
      YAHOO.util.DataSource("includes/controllers/dbActionController.php?"+query);
      this.dsHistory.responseType = YAHOO.util.DataSource.TYPE_JSON;
      this.dsHistory.responseSchema = {
      resultsList: "Result",
      fields: ["request_id", "request_date", "appoint_date",
      "service_date", "interp_date", "comments"]

      };

      this.dtHistory = new YAHOO.widget.DataTable("requestorHistory",
      histClmnDefs, this.dsHistory, {
      selectionMode:"single",
      scrollable:true,
      height:"20em"
      });

      ...

      I can see in Firebug that the table is being created with the correct
      columns and I also see the data is loaded. But the table does not
      display on the screen - I only see a vertical line where the left edge
      of the datatable begins.

      Even more interesting, when I return data where the JSON record is
      malformed, the Datatable does display within the tab (the columns
      display, but obviously, no data).

      Has anyone else run into this type of problem? Thanks. Les.
    • kfish_22
      Hi Les - Try making your key attributes within histClmnDefs the same as your fields array elements within dsHistory. I m still kind of new to YUI... but I
      Message 2 of 3 , Jan 30, 2009
      View Source
      • 0 Attachment
        Hi Les -

        Try making your "key" attributes within histClmnDefs the same as
        your "fields" array elements within dsHistory. I'm still kind of new
        to YUI... but I think that might be the issue?!

        Cheers,
        Kevin

        --- In ydn-javascript@yahoogroups.com, "lesgreen123" <green.les@...>
        wrote:
        >
        > I'm having a problem displaying a datatable within a TabView. I
        > created a div within the tab to be used as the container for the
        table:
        >
        > <div id="history"><!-- tab 2 -->
        > <div id="requestorHistory"></div>
        > </div>
        >
        > The table is not created when the application first loads, it is
        > dynamically created after a user does a search.
        >
        >
        > ...
        > var histClmnDefs = [
        > {key:"request_date", label:"Request Date", sortable:true},
        >
        {key:"info_serv_desc", label:"Requests", sortable:true,
        > formatter:this.formatInfoServ},
        > {key: "appoint_date", label:"Appointment", sortable:true},
        > {key: "interp_date", label:"Mid-Tier", sortable:true},
        > {key: "comments", label:"Comments"}
        > {key: "check", label:"Delete", formatter:"checkbox"}
        > ];
        >
        > this.dsHistory = new
        > YAHOO.util.DataSource
        ("includes/controllers/dbActionController.php?"+query);
        > this.dsHistory.responseType = YAHOO.util.DataSource.TYPE_JSON;
        > this.dsHistory.responseSchema = {
        > resultsList: "Result",
        > fields: ["request_id", "request_date", "appoint_date",
        > "service_date", "interp_date", "comments"]
        >
        > };
        >
        > this.dtHistory = new YAHOO.widget.DataTable("requestorHistory",
        > histClmnDefs, this.dsHistory, {
        > selectionMode:"single",
        > scrollable:true,
        > height:"20em"
        > });
        >
        > ...
        >
        > I can see in Firebug that the table is being created with the
        correct
        > columns and I also see the data is loaded. But the table does not
        > display on the screen - I only see a vertical line where the left
        edge
        > of the datatable begins.
        >
        > Even more interesting, when I return data where the JSON record is
        > malformed, the Datatable does display within the tab (the columns
        > display, but obviously, no data).
        >
        > Has anyone else run into this type of problem? Thanks. Les.
        >
      • Satyam
        Make sure the tab is visible before the datatable is drawn into it. It used to have problems when it was drawn within an invisible container as some of the
        Message 3 of 3 , Jan 31, 2009
        View Source
        • 0 Attachment
          Make sure the tab is visible before the datatable is drawn into it. It
          used to have problems when it was drawn within an invisible container as
          some of the browsers reported invalid width and height values and that
          made some calculations fail.

          Als, it is best to provide the query information not in the DataSource
          constructor but in the initialRequest configuration attribute, in the
          fourth attribute to the DataTable constructor. In this way, should you
          want to requery the server with new query values you can change the
          request arguments for the same base URL which will remain stored in
          the DataSource.

          Satyam


          lesgreen123 wrote:
          > I'm having a problem displaying a datatable within a TabView. I
          > created a div within the tab to be used as the container for the table:
          >
          > <div id="history"><!-- tab 2 -->
          > <div id="requestorHistory"></div>
          > </div>
          >
          > The table is not created when the application first loads, it is
          > dynamically created after a user does a search.
          >
          >
          > ...
          > var histClmnDefs = [
          > {key:"request_date", label:"Request Date", sortable:true},
          > {key:"info_serv_desc", label:"Requests", sortable:true,
          > formatter:this.formatInfoServ},
          > {key: "appoint_date", label:"Appointment", sortable:true},
          > {key: "interp_date", label:"Mid-Tier", sortable:true},
          > {key: "comments", label:"Comments"}
          > {key: "check", label:"Delete", formatter:"checkbox"}
          > ];
          >
          > this.dsHistory = new
          > YAHOO.util.DataSource("includes/controllers/dbActionController.php?"+query);
          > this.dsHistory.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > this.dsHistory.responseSchema = {
          > resultsList: "Result",
          > fields: ["request_id", "request_date", "appoint_date",
          > "service_date", "interp_date", "comments"]
          >
          > };
          >
          > this.dtHistory = new YAHOO.widget.DataTable("requestorHistory",
          > histClmnDefs, this.dsHistory, {
          > selectionMode:"single",
          > scrollable:true,
          > height:"20em"
          > });
          >
          > ...
          >
          > I can see in Firebug that the table is being created with the correct
          > columns and I also see the data is loaded. But the table does not
          > display on the screen - I only see a vertical line where the left edge
          > of the datatable begins.
          >
          > Even more interesting, when I return data where the JSON record is
          > malformed, the Datatable does display within the tab (the columns
          > display, but obviously, no data).
          >
          > Has anyone else run into this type of problem? Thanks. Les.
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 8.0.233 / Virus Database: 270.10.16/1925 - Release Date: 01/30/09 07:37:00
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.