How to alternate color of rows in html cfgrid

Hi all
How can I alternate the color of rows in html cfgrid?
I don't have acess to CFIDE/scripts/ajax/resources/ext/css/ext-all.css which is where according to firebug the css styles are kept
Thanks

goodychurro1 wrote:
How can I alternate the color of rows in html cfgrid?
Hi goodychurro1,
The cfgrid attribute you are looking for is "striperows".  Optionally, you can also use the attribute "striperowcolor".  Regarding your question in the other thread about binding href/select to a grid, you can use the following cfscript block to create the 'q' query in the example I posted in that other thread (if you're not on CF10).
<cfscript>
  q = queryNew("myID,myString", "integer,varchar");
  queryAddRow(q, 3);
  querySetCell(q, "myID", 1, 1);
  querySetCell(q, "myID", 2, 2);
  querySetCell(q, "myID", 3, 3);
  querySetCell(q, "myString", "one", 1);
  querySetCell(q, "myString", "two", 2);
  querySetCell(q, "myString", "three", 3);
</cfscript>
<cfform>
  <cfgrid name="myGrid" format="html" width="200" query="q" striperows="yes" striperowcolor="##f9f886">
    <cfgridcolumn name="myID" />
    <cfgridcolumn name="myString" />
  </cfgrid>
</cfform>
Reference:
- cfgrid
Thanks,
-Aaron

Similar Messages

  • Alternate color in Row footer

    alternate color not applied in Table footer.
    Can any one let me know how to acheive this?

    Hi,
    You can use a normal alerter for this.
    A manual alerter can use a formula like Even(LineNumber()) to give a shading or not...
    Then again, don't you want the footers to stand out from the body of the table?
    Hope this helps,
    Marianne

  • Display alternate color in rows  : : : record numbers are not in sequence to display alternate color.

    Post Author: SRK
    CA Forum: General
    Hi ,
      I am using  the following formula to display the alternate white and silver  background color in every reocrd but this does not work because the records numbers are not in sequence  for ex : its showing 54,56,58 which is not allowing the alternate color, Any advice.Thanks if   remainder(recordnumber,2) =0 then    crNoColorelse    Color (218,218,218); 

    Post Author: keiffer6
    CA Forum: General
    Could you simply add a running total for each record. That will give you the 1 2 3 4 5 6 ....
    Then in the details section color formula, use something like this:
    if RunningTotal Mod 2 = 0 then crSilver Else crNoColor.
    HTH

  • How to change color of rows count dispalyed while debugging ssis packages

    Hello,
    in visual 2013 ssdt version I have row count displayed in white color on pale background: bit.ly/1oWP1Cm
    I'd like to have it in black. I know it should be changeable in Options -> Fonts and Colors, but what option should I change from myriads available?
    Thank you in advance.

    My colleague had the same issue in that we couldn't see the numbers.  We couldn't figure out why we couldn't see the numbers and the design screen was white.  It looked like the numbers were displaying in white over the connections lines.  So
    we changed the color scheme to light and the numbers appeared in black.  WHen we switched the color scheme back to dark, the canvas turned dark and the text was in white.
    So there must be a bug when selecting the color scheme on the first run of Visual Studio 2013 in that it doesn't set the correct canvas color for the SSIS designer.  Luckily toggling the color scheme resolves the issue.
    Christian Jones Software Developer, former Network/Sys Admin

  • How can I select the row after a cfgrid refresh?

    I have a form that is bound to a cfgrid.  The grid is populated from a database.  When you navigate in the grid the data displayed in the form changes to match the selected row.  I can edit the data in the form and update the database.  After updating the data I refresh the cfgrid, which then displays the updated data.
    Unfortunately the cfgrid always highlights the first row, row 0, after a refresh.  I want to highlight the same row that was highlighted when the data was edited and saved.  Can anyone advise as to how I can do that?
    I have tried setting a listener when the grid is initiated that responds whenever the store is refreshed and triggers the function refreshSelection():
    g.getStore().on('load', refreshSelection) ;
    Before the form data is saved, the row number is stored in selectedRow[0].  When the grid is refreshed, refreshSelection is run:
    function refreshSelection() {
    if (0 >= selectedRecords.length)
         return;
    alert('Selected row is Row ' + selectedRecords[0] ) ;
    g.getSelectionModel().selectRow(selectedRecords[0]) ;
    selectedRecords[0] = 0 ;
    The alert shows the correct row number each time, but highlighting the last row viewed works intermittently, and only if the alert line is active.  If I comment out the alert, this fails every time, with row 0 being highlighted.  selectedRecords[0] is reset to 0 after the attempt to select the row so that navigation through the grid, such as choosing "Next Page," will properly highlight the first row of the page rather than the last row number that was edited.
    -Rick

    Massage?
    Why not ask the masseuse who gave you the massage?

  • How can I color just one row in a table?

    Hello,
    I'm implementing cut/copy/paste and I want that when I perform cut the row color will be pale/ghost than the regular selectionRow background. And I want this pale color to stay for this row regardless if I select now other rows. I need it for JTable, JTree & JList. So my question is how can I color a row in those components (permanently - till I release it)
    Thanks
    Bnaya.

    Hi,
    for a JTable I would suggest the following:
    1.in the body of the class
    int ghostrow = -1;
    Color ghostColor = Color.lightGray; // for example2. overwrite the prepareRenderer-method this way
    public Component prepareRenderer(TableCellRenderer render,int row, int column) {
    Component c = super.prepareRenderer(renderer,row,column);
    if (row==ghostrow) c.setBackground(ghostColor);
    return c;
    }3. add a method in your JTable subclass for setting of the ghostrow like this, in order to force the JTable to update its display after setting ghostrow
    public void setGhostRow(int row) {
    TableModel tm = getModel();
    int currow = tm.getRowCount();
    int oldrow = ghostrow;
    ghostrow = -1;
    if (row<currow) ghostrow = row;
    // next 2 rows in normal mode displayed, because it will not print the greater than symbol correctif ((oldrow>-1) && (oldrow<currow)) tableChanged(new TableModelEvent(tm,oldrow));
    if ((ghostrow>-1) && (ghostrow<currow)) tableChanged(new TableModelEvent(tm,ghostrow));
    For the other classes, you want this effect to happen in, try to find a similar method, that is central and do it in a similar way there.
    greetings Marsian

  • Simple Question Alternate color for Interactive form

    I can easily change the alternate color in rows for tabular but not interactive,
    can someone show me how.
    Thanks,
    Doug

    Hi,
    At the moment, I don't think that's possible - see: Interactive report template
    You can get the alternating colours when the page is first loaded (the above link has an example of doing that), but when you use the pagination functionality, the colours are lost.
    Andy

  • About inserting color to rows in alv

    hi ,
        could any one tell me how to insert colors to rows in alv.
    regards,
    pavan.

    hi,
    try like this
    TABLES:     ekko.
    TYPE-POOLS: slis.                                 "ALV Declarations
    *Data Declaration
    TYPES: BEGIN OF t_ekko,
      ebeln TYPE ekpo-ebeln,
      ebelp TYPE ekpo-ebelp,
      statu TYPE ekpo-statu,
      aedat TYPE ekpo-aedat,
      matnr TYPE ekpo-matnr,
      menge TYPE ekpo-menge,
      meins TYPE ekpo-meins,
      netpr TYPE ekpo-netpr,
      peinh TYPE ekpo-peinh,
      line_color(4) TYPE c,     "Used to store row color attributes
    END OF t_ekko.
    DATA: it_ekko TYPE STANDARD TABLE OF t_ekko INITIAL SIZE 0,
          wa_ekko TYPE t_ekko.
    *ALV data declarations
    DATA: fieldcatalog TYPE slis_t_fieldcat_alv WITH HEADER LINE,
          gd_tab_group TYPE slis_t_sp_group_alv,
          gd_layout    TYPE slis_layout_alv,
          gd_repid     LIKE sy-repid.
    *Start-of-selection.
    START-OF-SELECTION.
      PERFORM data_retrieval.
      PERFORM build_fieldcatalog.
      PERFORM build_layout.
      PERFORM display_alv_report.
    *&      Form  BUILD_FIELDCATALOG
          Build Fieldcatalog for ALV Report
    FORM build_fieldcatalog.
      fieldcatalog-fieldname   = 'EBELN'.
      fieldcatalog-seltext_m   = 'Purchase Order'.
      fieldcatalog-col_pos     = 0.
      fieldcatalog-outputlen   = 10.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'EBELP'.
      fieldcatalog-seltext_m   = 'PO Item'.
      fieldcatalog-col_pos     = 1.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'STATU'.
      fieldcatalog-seltext_m   = 'Status'.
      fieldcatalog-col_pos     = 2.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'AEDAT'.
      fieldcatalog-seltext_m   = 'Item change date'.
      fieldcatalog-col_pos     = 3.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'MATNR'.
      fieldcatalog-seltext_m   = 'Material Number'.
      fieldcatalog-col_pos     = 4.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'MENGE'.
      fieldcatalog-seltext_m   = 'PO quantity'.
      fieldcatalog-col_pos     = 5.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'MEINS'.
      fieldcatalog-seltext_m   = 'Order Unit'.
      fieldcatalog-col_pos     = 6.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'NETPR'.
      fieldcatalog-seltext_m   = 'Net Price'.
      fieldcatalog-col_pos     = 7.
      fieldcatalog-outputlen   = 15.
      fieldcatalog-datatype     = 'CURR'.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
      fieldcatalog-fieldname   = 'PEINH'.
      fieldcatalog-seltext_m   = 'Price Unit'.
      fieldcatalog-col_pos     = 8.
      APPEND fieldcatalog TO fieldcatalog.
      CLEAR  fieldcatalog.
    ENDFORM.                    " BUILD_FIELDCATALOG
    *&      Form  BUILD_LAYOUT
          Build layout for ALV grid report
    FORM build_layout.
      gd_layout-no_input          = 'X'.
      gd_layout-colwidth_optimize = 'X'.
      gd_layout-info_fieldname =      'LINE_COLOR'.
    ENDFORM.                    " BUILD_LAYOUT
    *&      Form  DISPLAY_ALV_REPORT
          Display report using ALV grid
    FORM display_alv_report.
      gd_repid = sy-repid.
      CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
        EXPORTING
          i_callback_program = gd_repid
          is_layout          = gd_layout
          it_fieldcat        = fieldcatalog[]
          i_save             = 'X'
        TABLES
          t_outtab           = it_ekko
        EXCEPTIONS
          program_error      = 1
          OTHERS             = 2.
      IF sy-subrc <> 0.
    MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
            WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
      ENDIF.
    ENDFORM.                    " DISPLAY_ALV_REPORT
    *&      Form  DATA_RETRIEVAL
          Retrieve data form EKPO table and populate itab it_ekko
    FORM data_retrieval.
      DATA: ld_color(1) TYPE c.
      SELECT ebeln ebelp statu aedat matnr menge meins netpr peinh
       UP TO 10 ROWS
        FROM ekpo
        INTO TABLE it_ekko.
    *Populate field with color attributes
      LOOP AT it_ekko INTO wa_ekko.
    Populate color variable with colour properties
    Char 1 = C (This is a color property)
    Char 2 = 3 (Color codes: 1 - 7)
    Char 3 = Intensified on/off ( 1 or 0 )
    Char 4 = Inverse display on/off ( 1 or 0 )
              i.e. wa_ekko-line_color = 'C410'
        ld_color = ld_color + 1.
    Only 7 colours so need to reset color value
        IF ld_color = 8.
          ld_color = 1.
        ENDIF.
        CONCATENATE 'C' ld_color '10' INTO wa_ekko-line_color.
    wa_ekko-line_color = 'C410'.
        MODIFY it_ekko FROM wa_ekko.
      ENDLOOP.
    ENDFORM.                    " DATA_RETRIEVAL
    reward if usefull....

  • How to set background color in row of JTable ?

    i am new in java please tell me about How to set background color in row of JTable ? please example code. Thnak you.

    Here is an example: http://www.javaworld.com/javaworld/javaqa/2001-09/03-qa-0928-jtable.html
    For more info on how to use tables read the swing tutorial: http://java.sun.com/docs/books/tutorial/uiswing/components/table.html
    ICE

  • How to color specific row in a table....

    Hi all,
    I created a table out of an Array[]. The table is successfully filled up by array's elements. Each element is a row.
    I want to be able to color specific row; instead of every row. How do I do that?
    I was looking rendering to color a row or a string; but not successfull.
    Thank you for your time and assistence.

    My favorite way of doing this is to use CSS. You plan on giving the row you want colored an id attribute, then provide a style like this:
    <style type="text/css">
      tr#colorMe td {
        background-color:blue;
    </style>Then, when you want to color the row, you make the HTML output like this:
    <table ...>
      <tr> //normal row
        <td></td><td></td><td></td>
      </tr>
      <tr id="colorMe"> //colored row
        <td></td><td></td><td></td>
      </tr>
      <tr> //normal row
        <td></td><td></td><td></td>
      </tr>
    </table>

  • How to change background color of row of a table in a panel table

    hi! im trouble right now, somebody help me. i have a matrix of row and column, panel row and panel table in jsp. my problem is how can i change the background color of a row once it clicked. i have row in table which have panel table with panel column and panel row.
    i have already work for it but i only change the background color once i clicked is the first row and first column then the rest row and column is not working..pls.. give me sample code for it..thnx a lot!!!
    Thnank's,
    froilet

    Ok! I have 2 jsp, the input jsp and display.jsp! Once i input value on input.jsp, it will display on display.jsp. I have also my javascript named updateBin.js. Now, how can i update each row once i clicked it... the succeeding rows and columns..hope u help me with this..here is my code:
    Display.jsp
    <html:html locale="true">
    <head>
         <html:base/><meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Strip Map Loader</title><script type="text/javascript" src="js/updateBin.js"></script>
    </head>
         <%      
              int intRow = Integer.parseInt(request.getParameter("intRows"));
              int intColumn = Integer.parseInt(request.getParameter("intColumns"));
              int intPanelRow = Integer.parseInt(request.getParameter("intPanelRows"));
              int intPanelColumn = Integer.parseInt(request.getParameter("intPanelColumns"));
         %>
    <BODY bgcolor="#33b9ec" leftmargin="50%">
         <b>Strip ID:  </b><font color="red" face="arial"><b><bean:write name="strStripID" scope="request" /></b></font>
         <br><br>
         <font size="3" face="tahoma"><b>Bins Updater Tool:</b></font>
         <table border="1" width="365px" bgcolor="#1ea6f7" height="15">
              <tr>
                   <td valign="top" align="center">
                        <table><tr><td><font size="2">Select Bin Type:</font></td>
                        <td><select id="binType" onchange="updateBin()" size="1">
                             <OPTION></OPTION>
                             <OPTION value="green">Good Bin</OPTION>
                             <OPTION value="red">Reject Bin</OPTION>
                        </select></td></tr></table>
                   </td>
    </tr>
    </table>
    <table id="tbl" align="center" border="1" cellspacing="3" cellpadding="5" bgcolor="#CC9900">
    <tr>
    <td>                                                  
         <%for (int pnlrows=1; pnlrows<=intPanelRow; pnlrows++){%>     
              <table id="table" width="100%" border="1" bgcolor="#CC9900" cellspacing="7" cellpadding="0" align="center">
              <tr>
              <%for(int pnlcols=0; pnlcols<intPanelColumn;pnlcols++){%>               
              <td>
                        <%for (int rows=1;rows<=intRow; rows++){%>                    
                        <table cellspacing="5" width="100px" align="center" bgcolor="#CC9900">
                        <tr>
                             <td>                    
                             <%for(int cols=1; cols<intColumn; cols++){%>
                             </td>     
                             <td id="col" bgcolor="#008000" align="center" ondblclick="changeCol()"> X </td>          
                             <%}%>
                             <td id="row" bgcolor="#008000" align="center" ondblclick="changeRow()"> X </td>
                             <td></td>     
                             <%}%>                                                  
                        </tr>
                        </table>
              <%}%>
              </td>
              </tr>
              </table>     
         <%}%>
    </td>
    </tr>
    </table>
    and this is my javascript code:
         function updateBin()
              var binType=document.getElementById("binType")
              if(binType.value == "green")
              [binType.selectedIndex].value
              //binType = changeR();
              //alert('Good Bin Selected');
              if(binType.value == "red")
              [binType.selectedIndex].value
              //binType = changeC();
              //alert('Reject Bin Selected');
              if(binType.value == "")
                   alert('Please select only on the category!')
         function changeRow()
              if(binType.value=="green")
              x=document.getElementById('row').style.background="green";     
              alert('Updated!')     
              if(binType.value=="red")
              x=document.getElementById('row').style.background="red";
              //alert('Reject Bin Updated!')
         function changeCol()
              if(binType.value=="green")
                   x=document.getElementById('col').style.background="green";     
                   alert('Updated!')     
              if(binType.value=="red")
              x=document.getElementById('col').style.background="red";
              //alert('Reject Bin Updated!')
    this code only updates the first row and column..but the succeeding panel row and panel column can't update...what will i do? theres something wrong in my javascript or in my jsp...pls help me......thanx.....in advance!!

  • Alternate color to the rows with sorting

    I have a table which has alternate color to the rows.one row in white and other in blue.when sorting is used, the blue-highlighted lines on the table are randomely re-located. They should not be impacted by the sorting.But they are getting effected.Is it possible to give alternate color to the rows with sorting?if yes,how.

    Go to Service.sap.com and follow the path > Problem Solving > Create Customer Messages. Choose a System and write a Message.
    raising an OSS message

  • HOW TO ADD COLORS TO JTABLE ROWS??

    I want to change the colors of alternate rows in my JTable. I am doing so using CellRenderer, but then I am not able to view the selected rows.
    tell me how can I change the row color as well as a selected row should be identifiable from others, as ordinary JTable.
    thanks

    Hi,
    try this:
    define your own DefaultTableCellRenderer like this:
    class MyRenderer extends DefaultTableCellRenderer     {
    public Component getTableCellRendererComponent(JTable table, Object value,
    boolean isSelected, boolean hasFocus, int row, int column){
    super.getTableCellRendererComponent(table, value, isSelected, hasFocus, row, column);
    if (isSelected) setBackground( Color.anyColor );               
    return this;
    Hope it helps!
    Regards, Paul

  • How to alternate background colour in table rows

    Hi,
    I have been trying to work out how to alternate the background colour for each row so that it made reading easier for people receiving the documents. Does anyone have any suggestions how this could be done?
    Thanks,
    Mark

    Please use the following code in the beginning of the loop:
    <?if@row:position() mod 2=0?>
    <xsl:attribute
    name="background-color"
    xdofo:ctx="incontext">lightgray
    </xsl:attribute>
    <?end if?>
    Thanks
    Bharat
    [email protected]

  • How to color a row using REUSE_ALV_HIERSEQ_LIST_DISPLAY

    Hi,
    I'm able to color a row using REUSE_ALV_GRID_DISPLAY, I tried the same way to color a row at the item level using 'REUSE_ALV_HIERSEQ_LIST_DISPLAY' but I'm not able to get the row color, please let me know how to acheive this.
    Thanks in Advnce
    Narayan

    you need to do 4 things.
    1. Add a field in your final internal table which ur going to display.
    2.Name the field as----
    > color_line(4)   TYPE  c,
                begin of itab,
                              matnr            type  mara-matnr,
                              ernam          type  mara-ernam,
                           color_line(4)   TYPE  c,
               end of itab.
    3.declare layout ....................> data :  it_layout   TYPE lvc_s_layo.
    4. After filled your fieldcat and before display your ALV
            loop at itab assigning to <itab>.
                          if <itab>-ernam eq 'XYZ'.
                          <itab>-color_line = 'C600'.
           end loop.
    it_layout-info_fname = 'COLOR_LINE'.
    CALL FUNCTION 'REUSE_ALV_HIERSEQ_LIST_DISPLAY'
    exporting
        IS_LAYOUT                      = it_layout
        IT_FIELDCAT                    = your_fieldcat
      and pass ur  ITAB.

Maybe you are looking for