6 Replies Latest reply on Nov 14, 2009 3:28 AM by Sonya Ling

    How to get rid of redundant ul li lines generated by rich:da

    Sonya Ling Newbie

      I found rich:datalist generate lots of redundant ul of dr-list rich-datalist class and li of dr-list-item rich-list-item in additional to table cell content desired. How do I get rid of those redundant ul and li lines? It seems it has something to do with 'without skin parameter' . I tried to add my own style class 'myClass'. It does not work either. The followings are Firebug dump.

      <ul id="dashboardForm:productList" class="dr-list rich-datalist myClass">
      <li id="dashboardForm:productList:0" class="dr-list-item rich-list-item even"> </li>
      </ul>
      <ul id="dashboardForm:productList:0:subProfileList" class="dr-list rich-datalist myClass">
      <li id="dashboardForm:productList:0:subProfileList:0" class="dr-list-item rich-list-item"> </li>
      </ul>
      <li id="dashboardForm:productList:0:subProfileList:1" class="dr-list-item rich-list-item"> </li>
      <li id="dashboardForm:productList:0:subProfileList:2" class="dr-list-item rich-list-item"> </li>
      <li id="dashboardForm:productList:0:subProfileList:3" class="dr-list-item rich-list-item"> </li>
      <li id="dashboardForm:productList:0:subProfileList:4" class="dr-list-item rich-list-item"> </li>
      <li id="dashboardForm:productList:0:subProfileList:5" class="dr-list-item rich-list-item"> </li>
      <li id="dashboardForm:productList:0:subProfileList:6" class="dr-list-item rich-list-item"> </li>
      :
      :
      <table class="searchResults tblMain">
      <thead>
      :
      </thead>
      <tbody>
      <tr>
      </tr>
      <tr>
      </tr>
      :
      

      My codes are like the followings
      <rich:dataList id="productList" value="#{Dashboard2Bean.productList}" var="product" rowKeyVar="productRow" rowClasses="even, odd"
       ajaxKeys="#{Dashboard2Bean.productIndexToUpdate}" >
       <tr>
      <td>
       <h:commandLink action="#{Dashboard2Bean.productClick}" immediate="true">
       <a4j:actionparam name="param_productRow" value="#{productRow}" assignTo="#{Dashboard2Bean.productRowIndex}" />
       <h:outputText value="#{product.productName}" />
       </h:commandLink>
       </td>
       <td>
       <h:outputText value="#{product.id}" />
       </td>
       <rich:dataList id="subProfileList" var="profileAssoc" value="#{product.dashboardProfileAssocs}" rowKeyVar="profileRow"
      ajaxKeys="#{Dashboard2Bean.profileIndexToUpdate}" >
       <td >
       <a4j:outputPanel id="dashboardPanel">
       <t:outputText rendered="#{profileAssoc.compositeStatus == 1}">
       <a id="dashboardPeningAnchor">
       <img src="/panda/images/dashboard/icon_status_mini_pending.png" alt="Pending" />
       </a>
       <a4j:commandLink reRender="dashboardPanel" action="#{Dashboard2Bean.publish}" limitToList="true" ajaxSingle="true" value="publish">
       <a4j:actionparam name="param_productRow" value="#{productRow}" assignTo="#{Dashboard2Bean.productRowIndex}" />
       <a4j:actionparam name="param_profileRow" value="#{profileRow}" assignTo="#{Dashboard2Bean.profileRowIndex}" />
       <img src="/panda/images/dashboard/icon_menu_publish.png"
       </a4j:commandLink>
       </t:outputText>
       <t:outputText rendered="#{profileAssoc.compositeStatus == 2}">
       <a id="dashboardPublishedAnchor" >
       <img src="/panda/images/dashboard/icon_status_mini_published.png" alt="Published" />
       </a>
       </t:outputText>
       <t:outputText rendered="#{profileAssoc.compositeStatus == 3}">
       <a id="dashboardExpiredAnchor" >
       <img src="/panda/images/dashboard/icon_status_mini_expired.png" alt="Expired" />
       </a>
       </t:outputText>
       </a4j:outputPanel>
       </td>
       </rich:dataList>
       </tr>
       </rich:dataList>
      


        • 1. Re: How to get rid of redundant ul li lines generated by ric
          Nick Belaevski Master

          Hi,

          rich:dataList renders ul/li, exactly as documentation specifies. It is not correct to insert tr/td tags inside without wrapping them with table/tbody.
          Please take a look at "data iteration" components group at livedemo, I guess you'll find some more suitable component there.

          • 2. Re: How to get rid of redundant ul li lines generated by ric
            Sonya Ling Newbie

            I only show part of codes. It definitely wrap around table tbody as the followings. I used t:dataLists in the first place and replace them with rich:datalist due partial table rerender requirement.

            <table class="searchResults tblMain">
            <thead>
            :
            :
            </thead>
            <tbody>
            <rich:dataList id="productList" value="#{Dashboard2Bean.productList}" var="product" rowKeyVar="productRow" rowClasses="even, odd"
             ajaxKeys="#{Dashboard2Bean.productIndexToUpdate}" >
             <tr>
            <td>
             <h:commandLink action="#{Dashboard2Bean.productClick}" immediate="true">
             <a4j:actionparam name="param_productRow" value="#{productRow}" assignTo="#{Dashboard2Bean.productRowIndex}" />
             <h:outputText value="#{product.productName}" />
             </h:commandLink>
             </td>
             <td>
             <h:outputText value="#{product.id}" />
             </td>
             <rich:dataList id="subProfileList" var="profileAssoc" value="#{product.dashboardProfileAssocs}" rowKeyVar="profileRow"
            ajaxKeys="#{Dashboard2Bean.profileIndexToUpdate}" >
             <td >
             <a4j:outputPanel id="dashboardPanel">
             <t:outputText rendered="#{profileAssoc.compositeStatus == 1}">
             <a id="dashboardPeningAnchor">
             <img src="/panda/images/dashboard/icon_status_mini_pending.png" alt="Pending" />
             </a>
             <a4j:commandLink reRender="dashboardPanel" action="#{Dashboard2Bean.publish}" limitToList="true" ajaxSingle="true" value="publish">
             <a4j:actionparam name="param_productRow" value="#{productRow}" assignTo="#{Dashboard2Bean.productRowIndex}" />
             <a4j:actionparam name="param_profileRow" value="#{profileRow}" assignTo="#{Dashboard2Bean.profileRowIndex}" />
             <img src="/panda/images/dashboard/icon_menu_publish.png"
             </a4j:commandLink>
             </t:outputText>
             <t:outputText rendered="#{profileAssoc.compositeStatus == 2}">
             <a id="dashboardPublishedAnchor" >
             <img src="/panda/images/dashboard/icon_status_mini_published.png" alt="Published" />
             </a>
             </t:outputText>
             <t:outputText rendered="#{profileAssoc.compositeStatus == 3}">
             <a id="dashboardExpiredAnchor" >
             <img src="/panda/images/dashboard/icon_status_mini_expired.png" alt="Expired" />
             </a>
             </t:outputText>
             </a4j:outputPanel>
             </td>
             </rich:dataList>
             </tr>
             </rich:dataList>
            </tbody>
             </table>
            





            • 3. Re: How to get rid of redundant ul li lines generated by ric
              Nick Belaevski Master

              So, it renders as table->tbody->ul->li->tr and that's not a valid HTML markup.

              • 4. Re: How to get rid of redundant ul li lines generated by ric
                Sonya Ling Newbie

                It render as the followings. It does render table content correctly. However, it come with additional ul li lines. I use rich:dataList or dataList in general.
                becuase
                1) I need to display two dimemsion (sources) of data : product and profile. That's why I use two layer of dataLists: one for product and ther other for profile.
                2). As I mentioned, I used Tomahawk dataList first. It worked fine without those additional ul, li lines. However, I couldn't do partal table rerender.

                How do I fit my requirement into rich:dataList framework and get what I want? Please advise. Thanks

                <ul id="dashboardForm:productList" class="dr-list rich-datalist myClass">
                <li id="dashboardForm:productList:0" class="dr-list-item rich-list-item even"> </li>
                </ul>
                <ul id="dashboardForm:productList:0:subProfileList" class="dr-list rich-datalist myClass">
                <li id="dashboardForm:productList:0:subProfileList:0" class="dr-list-item rich-list-item"> </li>
                </ul>
                <li id="dashboardForm:productList:0:subProfileList:1" class="dr-list-item rich-list-item"> </li>
                <li id="dashboardForm:productList:0:subProfileList:2" class="dr-list-item rich-list-item"> </li>
                <li id="dashboardForm:productList:0:subProfileList:3" class="dr-list-item rich-list-item"> </li>
                <li id="dashboardForm:productList:0:subProfileList:4" class="dr-list-item rich-list-item"> </li>
                <li id="dashboardForm:productList:0:subProfileList:5" class="dr-list-item rich-list-item"> </li>
                <li id="dashboardForm:productList:0:subProfileList:6" class="dr-list-item rich-list-item"> </li>
                :
                :
                <table class="searchResults tblMain">
                <thead>
                :
                </thead>
                <tbody>
                <tr>
                </tr>
                <tr>
                </tr>
                



                • 5. Re: How to get rid of redundant ul li lines generated by ric
                  Sonya Ling Newbie

                  I checked the live demo. I might be able to rewrite it using rich:dataTable and rich:subTable. That's the better and graceful way to implement it instead of enhancing on the top of old codes. I will keep you posted.

                  • 6. Re: How to get rid of redundant ul li lines generated by ric
                    Sonya Ling Newbie

                    I realize that I cannot use rich:dataTable and rich:subTable combination because each record in rich:dataTable or rich:subTable render one row of data. I need to display something like the followings. The status of each profile render only one column and product deatils plus the statuses of all the profiles combined render a row; a typical dashboard display.

                    I found out that a4j:repeat does not come with any predefined HTML tags and allow me to take control of tbody, tr, td tags. It fits my needs. Replace both rich:dataList with a4j:repeat. That fixed the problem.

                    
                     profile1 profile2 profile3 profile4 profile 5
                    product1 episode1 program1 V O X O V
                    product2 episode1 program1 X V V O X
                    :
                    :