Skip to main content
A
avejidah
Participant
November 17, 2009
Answered

cfgrid after edit

  • November 17, 2009
  • 1 reply
  • 1461 views

I have 2 questions about a cfgird:

1) After editing an item in a cfgrid a red arrow appears above the edited item.  I have a custom afterEdit event handler that notifies the user that the field has been successfully updated, so I don't want the red arrow to appear.  How can I get rid of that red aarow?

2) When a row is in edit mode, if the user presses enter to complete the editing, the next row automatically goes into edit mode.  How can I prevent that?  I would like the current row to simply finish editing.

Thanks for your help.

    This topic has been closed for replies.
    Correct answer Daverms

    Thanks.  I don't have access to ext-all.css unfortunately. However, looking that file, I don't see which part controls that red arrow.  The only commentes I see are these:

    .x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{
         //color: white;
    }


    .x-grid-row-selected span, .x-grid-row-selected b, .x-grid-row-selected div, .x-grid-row-selected strong, .x-grid-row-selected i{
         //color: white !important;
    }

    .x-grid-row-selected .x-grid-cell-text{
         //color: white;
    }

    .x-grid-cell-selected{
         background-color: #316ac5 !important;
         //color: white;
    }

    .x-grid-cell-selected span{
         //color: white !important;
    }

    .x-grid-cell-selected .x-grid-cell-text{
         // color: white;
    }

    Which part do I need to override?

    Thanks again.

    Yeah.. Thats where the changes has to be done.

    It should look like this, after the modification,

    .x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{
    /*color: white;*/
    }
    .x-grid-row-selected div, .x-grid-row-selected div, .x-grid-row-selected b, .x-grid-row-selected strong, .x-grid-row-selected i{
    /* color: white !important;*/
    }
    .x-grid-row-selected .x-grid-cell-text{
    /*color: white;*/
    }
    .x-grid-cell-selected{
    background-color: #316ac5 !important;
    /*color: white;*/
    }
    .x-grid-cell-selected span{
    /*color: white !important;*/
    }
    .x-grid-cell-selected .x-grid-cell-text{
    /* color: white;*/
    }


    HTH.

    (Please post a note here @ forums, if it successfully resolved your issue :-)  )

    1 reply

    D
    Daverms
    Inspiring
    November 18, 2009

    Hi,

    Can you please post your code here?.

    A
    avejidahAuthor
    Participant
    November 18, 2009

    Sure.  This is the relevant part of the code.  There is nothing special about this particular grid - no custom renderer or anything - it's vanilla.

        <!------------------------------------------------------------------------
           - Product Lines grid.
         ------------------------------------------------------------------------->
         <cflayoutarea style="width: 210px; text-align; left">
           <cfform name="frmProdLines">
            
             <cfgrid name="gvExhibLines"
               format="html"
               pagesize="15"
               striperows="yes"
               selectmode="edit"
               bindonload="false"
               width="200"
               height="430"
              bind="cfc:prodLines.getLines({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{frmShowsAndBooths:lbBooths})"
               onchange="cfc:prodLines.updProdLines({cfgridaction},{cfgridrow},{cfgridchanged})">
              
               <cfgridcolumn name="exhibLineID"
                 header="exhibLineID"
                 width="0"
                 display="no"/>
                
               <cfgridcolumn name="description"
                 header="Product Lines"
                 width="200" />
             </cfgrid>
           </cfform>
         </cflayoutarea>

      <!---------------------------------------------------------------------------
        - getLines - Pull all the lines for a passed booth.
       ---------------------------------------------------------------------------->
       <cffunction name="getLines" access="remote">
         <cfargument name="page"           type="numeric" required="yes">
         <cfargument name="pageSize"       type="numeric" required="yes">
         <cfargument name="gridsortcolumn" type="string"  required="no" default="">
         <cfargument name="gridsortdir"    type="string"  required="no" default="">
         <cfargument name="bthRequestID"   type="string"  required="no" default="">

        <cfset var qGetLines = "">
          
         <!--- If the required arguments are missing return a blank query. --->
         <cfif #ARGUMENTS.bthRequestID# eq "">
           <cfquery name="qGetLines" datasource="#request.datasource#">
             SELECT ''
           </cfquery>
           <cfreturn QueryConvertForGrid(qGetLines,
             ARGUMENTS.page, ARGUMENTS.pageSize)>
         </cfif>
        
         <!---
             - Get all the product lines for the passed booth request.
         ---->
         <cfquery name="qGetLines" datasource="#request.datasource#">
           SELECT el.exhibLineID, el.description
             FROM exhib_line_list ell
            INNER JOIN exhib_lines el ON ell.exhibLineID = el.exhibLineID
            WHERE ell.bthRequestID = #ARGUMENTS.bthRequestID#
           
           <cfif ARGUMENTS.gridsortcolumn NEQ "" and ARGUMENTS.gridsortdir NEQ "">
             ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir#
           <cfelse>
             ORDER BY description
           </cfif>
         </cfquery>
        
         <cfreturn QueryConvertForGrid(qGetLines,
           ARGUMENTS.page, ARGUMENTS.pageSize)>
        
       </cffunction>

    The red arrow above "Printers" is the one I'm trying to get rid of.  Regarding the first question, if I were to change the name of "Test in Area 1", "Printers" would automatically enter edit mode.  I'd like to disable that.

    Thanks for looking at it.

    D
    Daverms
    Inspiring
    November 18, 2009

    Hi avejidah,

    This is purely a "CSS" issue,

    Here is the workaround,

    1) Open up the "ext-all.css" file which can be found under "/CFIDE/SCRIPTS/AJAX/RESOURCES/EXT/CSS/" directory.

    2) Search for the "//" occurences (single line comments) and replace those lines with multi line comments like "/*  */"

    3) Save the file, and re-run your page.

    HTH.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices