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

Res: [ydn-javascript] Can we render a tree view with in datatable formatter?

Expand Messages
  • MingoMax
    Maybe, you would try to render the treevview after elCell html modify, because when you try to render something and this no exist(the element where to render
    Message 1 of 7 , Nov 26, 2009
    • 0 Attachment
      Maybe, you would try to render the treevview after elCell html modify, because when you try to render something and this no exist(the element where to render the widget)  the render() method return a error or nothing happens.
       
      Mingo



      De: nagaraj <manne_swiss@...>
      Para: ydn-javascript@yahoogroups.com
      Enviadas: Quinta-feira, 26 de Novembro de 2009 10:37:57
      Assunto: [ydn-javascript] Can we render a tree view with in datatable formatter?

       

      Hi All,

      I have a requirement in such a way that in need to show a simple treeview structure in datatable cell.
      so for this i am trying to display it with in a formatter like this :

      YAHOO.widget. DataTable. formattName= function( elCell, oRecord, oColumn, oData) {
      var rowid=this.getTrInd ex(oRecord) ;
      tree = new YAHOO.widget. TreeView( "treeDiv1- "+rowid);
      tree.render( );
      elCell.innerHTML= "<span id='treeDiv1- "+rowid+" '><ul><li> Nag<ul> <li>Test</li> </ul></li> </ul></span> ";
      }

      when i try to do like this its throwing js error on fire bug like this:
      "this._el is null[Break on this error] } else if (Lang.trim(this. _el.innerHTML) ) { "

      i belive this is because i am rendering the tree before the "treeDiv1-" element is drawn or instantiated. .

      can any one give me an idea how to overcoming this..

      Thanks!



      Veja quais são os assuntos do momento no Yahoo! + Buscados: Top 10 - Celebridades - Música - Esportes
    • nagaraj
      Thanks for the Reply Mingo..Even i tried by rendering after elCell html..like this YAHOO.widget. DataTable. formattName= function( elCell, oRecord, oColumn,
      Message 2 of 7 , Nov 26, 2009
      • 0 Attachment
        Thanks for the Reply Mingo..Even i tried by rendering after elCell html..like this

        YAHOO.widget. DataTable. formattName= function( elCell, oRecord, oColumn, oData) {
        var rowid=this.getTrInd ex(oRecord) ;
        elCell.innerHTML= "<span id='treeDiv1- "+rowid+" '><ul><li> Nag<ul> <li>Test</li> </ul></li> </ul></span> ";
        tree = new YAHOO.widget. TreeView( "treeDiv1- "+rowid);
        tree.render( );
        }

        but still the same problem... :( correct me if i am doing any thing wrong over here..
        i am rendering in tree view in formatter only because i need to customize the tree nodes based on the data i get for that particular record.

        Thanks!

        --- In ydn-javascript@yahoogroups.com, MingoMax <loucnet@...> wrote:
        >
        > Maybe, you would try to render the treevview after elCell html modify, because when you try to render something and this no exist(the element where to render the widget) the render() method return a error or nothing happens.
        >
        > Mingo
        >
        >
        >
        >
        >
        > ________________________________
        > De: nagaraj <manne_swiss@...>
        > Para: ydn-javascript@yahoogroups.com
        > Enviadas: Quinta-feira, 26 de Novembro de 2009 10:37:57
        > Assunto: [ydn-javascript] Can we render a tree view with in datatable formatter?
        >
        >
        > Hi All,
        >
        > I have a requirement in such a way that in need to show a simple treeview structure in datatable cell.
        > so for this i am trying to display it with in a formatter like this :
        >
        > YAHOO.widget. DataTable. formattName= function( elCell, oRecord, oColumn, oData) {
        > var rowid=this.getTrInd ex(oRecord) ;
        > tree = new YAHOO.widget. TreeView( "treeDiv1- "+rowid);
        > tree.render( );
        > elCell.innerHTML= "<span id='treeDiv1- "+rowid+" '><ul><li> Nag<ul> <li>Test</li> </ul></li> </ul></span> ";
        > }
        >
        > when i try to do like this its throwing js error on fire bug like this:
        > "this._el is null[Break on this error] } else if (Lang.trim(this. _el.innerHTML) ) { "
        >
        > i belive this is because i am rendering the tree before the "treeDiv1-" element is drawn or instantiated. .
        >
        > can any one give me an idea how to overcoming this..
        >
        > Thanks!
        >
        >
        >
        >
        >
        > ____________________________________________________________________________________
        > Veja quais são os assuntos do momento no Yahoo! +Buscados
        > http://br.maisbuscados.yahoo.com
        >
      • Satyam
        You are giving the tree the id of an element that doesn t yet exist so it can contain it, nor can the tree parse what you haven t placed in that element yet.
        Message 3 of 7 , Nov 26, 2009
        • 0 Attachment
          You are giving the tree the id of an element that doesn't yet exist so
          it can contain it, nor can the tree parse what you haven't placed in
          that element yet. First you have to fill the cell, then you may refer
          to its contents.

          Satyam

          nagaraj escribió:
          > Hi All,
          >
          > I have a requirement in such a way that in need to show a simple treeview structure in datatable cell.
          > so for this i am trying to display it with in a formatter like this :
          >
          > YAHOO.widget.DataTable.formattName=function(elCell, oRecord, oColumn, oData) {
          > var rowid=this.getTrIndex(oRecord);
          > tree = new YAHOO.widget.TreeView("treeDiv1-"+rowid);
          > tree.render();
          > elCell.innerHTML="<span id='treeDiv1-"+rowid+"'><ul><li>Nag<ul> <li>Test</li></ul></li></ul></span>";
          > }
          >
          >
          > when i try to do like this its throwing js error on fire bug like this:
          > "this._el is null[Break on this error] } else if (Lang.trim(this._el.innerHTML)) { "
          >
          >
          > i belive this is because i am rendering the tree before the "treeDiv1-" element is drawn or instantiated..
          >
          > can any one give me an idea how to overcoming this..
          >
          > Thanks!
          >
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 9.0.709 / Virus Database: 270.14.83/2526 - Release Date: 11/25/09 20:43:00
          >
          >
        • nagaraj
          Thanks Satyam!     it worked! ..but i ran into another problem :(  which is related to the Distortion of treeview (can find the screeshot(Distortion.JPG)
          Message 4 of 7 , Nov 26, 2009
          • 1 Attachment
          • 46 KB
          Thanks Satyam!
              it worked! ..but i ran into another problem :(  which is related to the Distortion of treeview (can find the screeshot(Distortion.JPG) as attachment)..

          1.The div in which i am displaying tree is getting displayed with borders.

          2.For the datatable i am using "rowClickEvent" to highlight the row where the user knows on which row he is currently in..in this case the tree nodes appears blank(seems white color is overwriting the nodes) we can see this for "S.No" 1  from the Distortion.JPG attachment..

          what are the possibilities for this sort of distortions.

          Thanks!

          --- On Thu, 26/11/09, Satyam <satyam@...> wrote:

          From: Satyam <satyam@...>
          Subject: Re: [ydn-javascript] Can we render a tree view with in datatable formatter?
          To: ydn-javascript@yahoogroups.com
          Date: Thursday, 26 November, 2009, 9:50 PM

           

          You are giving the tree the id of an element that doesn't yet exist so
          it can contain it, nor can the tree parse what you haven't placed in
          that element yet. First you have to fill the cell, then you may refer
          to its contents.

          Satyam

          nagaraj escribió:
          > Hi All,
          >
          > I have a requirement in such a way that in need to show a simple treeview structure in datatable cell.
          > so for this i am trying to display it with in a formatter like this :
          >
          > YAHOO.widget. DataTable. formattName= function( elCell, oRecord, oColumn, oData) {
          > var rowid=this.getTrInd ex(oRecord) ;
          > tree = new YAHOO.widget. TreeView( "treeDiv1- "+rowid);
          > tree.render( );
          > elCell.innerHTML= "<span id='treeDiv1- "+rowid+" '><ul><li> Nag<ul> <li>Test</li> </ul></li> </ul></span> ";
          > }
          >
          >
          > when i try to do like this its throwing js error on fire bug like this:
          > "this._el is null[Break on this error] } else if (Lang.trim(this. _el.innerHTML) ) { "
          >
          >
          > i belive this is because i am rendering the tree before the "treeDiv1-" element is drawn or instantiated. .
          >
          > can any one give me an idea how to overcoming this..
          >
          > Thanks!
          >
          >
          >
          > ------------ --------- --------- ------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------ --------- --------- --------- --------- --------- -
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 9.0.709 / Virus Database: 270.14.83/2526 - Release Date: 11/25/09 20:43:00
          >
          >



          The INTERNET now has a personality. YOURS! See your Yahoo! Homepage.
        • Satyam
          The tree is made out of tables with a varying number of cells to provide the indentation. Somehow, some border-style from the enclosing DataTable is spilling
          Message 5 of 7 , Nov 27, 2009
          • 0 Attachment
            The tree is made out of tables with a varying number of cells to provide
            the indentation. Somehow, some border-style from the enclosing
            DataTable is spilling into the HTML tables that make the treeview so you
            are getting borders inherited from the DataTable. You will have to
            research that one with a real-life example and see what is spilling and
            how to override it. This article will help you:

            http://www.satyam.com.ar/yui/widgetstyles.html


            Regarding the white background, is due to this style:

            .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
            background-color: white; /* workaround for IE font smoothing bug */
            }

            If you pay attention to the examples in the YUI site, you might be able
            to notice that the labels contrast against the background, which is not
            exactly white, though so light that you barely notice. The comment
            says it all, some of the versions of IE still in the support list have
            problems with the edges of the characters on the screen.

            Satyam

            nagaraj escribió:
            > [Attachment(s) <#TopText> from nagaraj included below]
            >
            > Thanks Satyam!
            > it worked! ..but i ran into another problem :( which is related
            > to the Distortion of treeview (can find the screeshot(Distortion.JPG)
            > as attachment)..
            >
            > 1.The div in which i am displaying tree is getting displayed with borders.
            >
            > 2.For the datatable i am using "rowClickEvent" to highlight the row
            > where the user knows on which row he is currently in..in this case the
            > tree nodes appears blank(seems white color is overwriting the nodes)
            > we can see this for "S.No" 1 from the Distortion.JPG attachment..
            >
            > what are the possibilities for this sort of distortions.
            >
            > Thanks!
            >
            > --- On *Thu, 26/11/09, Satyam /<satyam@...>/* wrote:
            >
            >
            > From: Satyam <satyam@...>
            > Subject: Re: [ydn-javascript] Can we render a tree view with in
            > datatable formatter?
            > To: ydn-javascript@yahoogroups.com
            > Date: Thursday, 26 November, 2009, 9:50 PM
            >
            >
            >
            > You are giving the tree the id of an element that doesn't yet
            > exist so
            > it can contain it, nor can the tree parse what you haven't placed in
            > that element yet. First you have to fill the cell, then you may refer
            > to its contents.
            >
            > Satyam
            >
            > nagaraj escribió:
            > > Hi All,
            > >
            > > I have a requirement in such a way that in need to show a simple
            > treeview structure in datatable cell.
            > > so for this i am trying to display it with in a formatter like
            > this :
            > >
            > > YAHOO.widget. DataTable. formattName= function( elCell, oRecord,
            > oColumn, oData) {
            > > var rowid=this.getTrInd ex(oRecord) ;
            > > tree = new YAHOO.widget. TreeView( "treeDiv1- "+rowid);
            > > tree.render( );
            > > elCell.innerHTML= "<span id='treeDiv1- "+rowid+" '><ul><li>
            > Nag<ul> <li>Test</li> </ul></li> </ul></span> ";
            > > }
            > >
            > >
            > > when i try to do like this its throwing js error on fire bug
            > like this:
            > > "this._el is null[Break on this error] } else if
            > (Lang.trim(this. _el.innerHTML) ) { "
            > >
            > >
            > > i belive this is because i am rendering the tree before the
            > "treeDiv1-" element is drawn or instantiated. .
            > >
            > > can any one give me an idea how to overcoming this..
            > >
            > > Thanks!
            > >
            > >
            > >
            > > ------------ --------- --------- ------
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            > > ------------ --------- --------- --------- --------- --------- -
            > >
            > >
            > > No virus found in this incoming message.
            > > Checked by AVG - www.avg.com
            > > Version: 9.0.709 / Virus Database: 270.14.83/2526 - Release
            > Date: 11/25/09 20:43:00
            > >
            > >
            >
            >
            > ------------------------------------------------------------------------
            > The INTERNET now has a personality. YOURS! See your Yahoo! Homepage
            > <http://in.rd.yahoo.com/tagline_yyi_1/*http://in.yahoo.com/>.
            >
            > Attachment(s) from nagaraj
            >
            > 1 of 1 Photo(s)
            >
            > Distortion.JPG
            > <http://groups.yahoo.com/group/ydn-javascript/attachments/folder/1429887582/item/1411404064/view>
            > Distortion.JPG
            > <http://groups.yahoo.com/group/ydn-javascript/attachments/folder/1429887582/item/1411404064/view>
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - www.avg.com
            > Version: 9.0.709 / Virus Database: 270.14.83/2528 - Release Date: 11/26/09 10:10:00
            >
            >
          • nagaraj
            Thanks a lot Satyam!! it worked...the link you have given worked thanks a lot..Sorry for the late reply..          /      Nagaraj ... From: Satyam
            Message 6 of 7 , Dec 7, 2009
            • 0 Attachment
              Thanks a lot Satyam!! it worked...the link you have given worked thanks a lot..Sorry for the late reply..

               
                     / 
                  Nagaraj



              --- On Fri, 27/11/09, Satyam <satyam@...> wrote:

              From: Satyam <satyam@...>
              Subject: Re: [ydn-javascript] Can we render a tree view with in datatable formatter?
              To: ydn-javascript@yahoogroups.com
              Date: Friday, 27 November, 2009, 3:05 PM

               

              The tree is made out of tables with a varying number of cells to provide
              the indentation. Somehow, some border-style from the enclosing
              DataTable is spilling into the HTML tables that make the treeview so you
              are getting borders inherited from the DataTable. You will have to
              research that one with a real-life example and see what is spilling and
              how to override it. This article will help you:

              http://www.satyam. com.ar/yui/ widgetstyles. html

              Regarding the white background, is due to this style:

              .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
              background-color: white; /* workaround for IE font smoothing bug */
              }

              If you pay attention to the examples in the YUI site, you might be able
              to notice that the labels contrast against the background, which is not
              exactly white, though so light that you barely notice. The comment
              says it all, some of the versions of IE still in the support list have
              problems with the edges of the characters on the screen.

              Satyam

              nagaraj escribió:
              > [Attachment( s) <#TopText> from nagaraj included below]
              >
              > Thanks Satyam!
              > it worked! ..but i ran into another problem :( which is related
              > to the Distortion of treeview (can find the screeshot(Distortio n.JPG)
              > as attachment). .
              >
              > 1.The div in which i am displaying tree is getting displayed with borders.
              >
              > 2.For the datatable i am using "rowClickEvent" to highlight the row
              > where the user knows on which row he is currently in..in this case the
              > tree nodes appears blank(seems white color is overwriting the nodes)
              > we can see this for "S.No" 1 from the Distortion.JPG attachment..
              >
              > what are the possibilities for this sort of distortions.
              >
              > Thanks!
              >
              > --- On *Thu, 26/11/09, Satyam /<satyam@satyam. com.ar>/* wrote:
              >
              >
              > From: Satyam <satyam@satyam. com.ar>
              > Subject: Re: [ydn-javascript] Can we render a tree view with in
              > datatable formatter?
              > To: ydn-javascript@ yahoogroups. com
              > Date: Thursday, 26 November, 2009, 9:50 PM
              >
              >
              >
              > You are giving the tree the id of an element that doesn't yet
              > exist so
              > it can contain it, nor can the tree parse what you haven't placed in
              > that element yet. First you have to fill the cell, then you may refer
              > to its contents.
              >
              > Satyam
              >
              > nagaraj escribió:
              > > Hi All,
              > >
              > > I have a requirement in such a way that in need to show a simple
              > treeview structure in datatable cell.
              > > so for this i am trying to display it with in a formatter like
              > this :
              > >
              > > YAHOO.widget. DataTable. formattName= function( elCell, oRecord,
              > oColumn, oData) {
              > > var rowid=this.getTrInd ex(oRecord) ;
              > > tree = new YAHOO.widget. TreeView( "treeDiv1- "+rowid);
              > > tree.render( );
              > > elCell.innerHTML= "<span id='treeDiv1- "+rowid+" '><ul><li>
              > Nag<ul> <li>Test</li> </ul></li> </ul></span> ";
              > > }
              > >
              > >
              > > when i try to do like this its throwing js error on fire bug
              > like this:
              > > "this._el is null[Break on this error] } else if
              > (Lang.trim(this. _el.innerHTML) ) { "
              > >
              > >
              > > i belive this is because i am rendering the tree before the
              > "treeDiv1-" element is drawn or instantiated. .
              > >
              > > can any one give me an idea how to overcoming this..
              > >
              > > Thanks!
              > >
              > >
              > >
              > > ------------ --------- --------- ------
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > >
              > > ------------ --------- --------- --------- --------- --------- -
              > >
              > >
              > > No virus found in this incoming message.
              > > Checked by AVG - www.avg.com
              > > Version: 9.0.709 / Virus Database: 270.14.83/2526 - Release
              > Date: 11/25/09 20:43:00
              > >
              > >
              >
              >
              > ------------ --------- --------- --------- --------- --------- -
              > The INTERNET now has a personality. YOURS! See your Yahoo! Homepage
              > <http://in.rd. yahoo.com/ tagline_yyi_ 1/*http:/ /in.yahoo. com/>.
              >
              > Attachment(s) from nagaraj
              >
              > 1 of 1 Photo(s)
              >
              > Distortion.JPG
              > <http://groups. yahoo.com/ group/ydn- javascript/ attachments/ folder/142988758 2/item/141140406 4/view>
              > Distortion.JPG
              > <http://groups. yahoo.com/ group/ydn- javascript/ attachments/ folder/142988758 2/item/141140406 4/view>
              >
              >
              > ------------ --------- --------- --------- --------- --------- -
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 9.0.709 / Virus Database: 270.14.83/2528 - Release Date: 11/26/09 10:10:00
              >
              >



              The INTERNET now has a personality. YOURS! See your Yahoo! Homepage.
            Your message has been successfully submitted and would be delivered to recipients shortly.