how to change cell backcolor in gridpanel checkbox cecked column

  1. #1

    how to change cell backcolor in gridpanel checkbox cecked column

    Hello everyone, I have a gridpanel with 2 columns that contain a ceckbox, I would change the background color of the checkbox checked on the load cell data.
    the gridpanel have RowEditor plugin this is the code of the grid:
       <%--GRIDPANEL PEAR--%>
        <ext:GridPanel ID="gridPanelPear" Layout="Fit"  runat="server" StoreID="storePear" AutoExpandColumn="DescrizioneLavorazioni" StripeRows="true">
                                   
        <%--TOOLBAR PEAR--%>
                    <TopBar>
                         <ext:Toolbar ID="ToolBarPear" runat="server">
                               <Items>
                                       <ext:ToolbarSpacer ID="tblSpacerUno" runat="server"></ext:ToolbarSpacer>
    
                  <%--BOTTONE INSERT PEAR--%>
                              <ext:Button ID="btnInsert" runat="server" Icon="CalculatorAdd" Text="Inserisci Ordine">
    				<Listeners>
    					<Click Handler="WindowAddPEAR.show()" />
    				</Listeners>
                                                <ToolTips>
    						 <ext:ToolTip runat="server" ID="tlpInsertArtPear" Target="btnInsert" Html="Aggiungi nuovo Ordine PEAR">
    		                                  </ext:ToolTip>
    					   </ToolTips>
                                   </ext:Button>
    		 <%--FINE BOTTONE INSERT PEAR--%>
    
                           <ext:ToolbarSeparator ID="tblSeparatoreUno" runat="server"></ext:ToolbarSeparator>
    												
    												<%--BOTTONE DELETE PEAR--%>      
    												<ext:Button ID="btnDeletePear" runat="server" Icon="CalculatorDelete" Text="Cancella Ordine">
    													<DirectEvents>
    														<Click OnEvent="btnDeletePear_Click">
    															<Confirmation ConfirmRequest="true" Title="Conferma Cancellazione" Message="Sei sicuro di voler cancellare gli Ordini?" />
    															<EventMask ShowMask="true" />
    														</Click>
    													</DirectEvents>
    													<ToolTips>
    														<ext:ToolTip runat="server" ID="tlpCancella" Target="btnDeletePear" Html="Cancella Ordini">
    														</ext:ToolTip>
    													</ToolTips>
    												</ext:Button>
    												<%--FINE BOTTONE DELETE PEAR--%>
    
                                                     <ext:ToolbarSpacer ID="ToolbarSpacerDue" runat="server"></ext:ToolbarSpacer>
                                                     <ext:ToolbarSeparator ID="ToolbarSeparatorDue" runat="server"></ext:ToolbarSeparator>
                                                  </Items>
                                               </ext:Toolbar>
                                              </TopBar>
    										   <%--FINE TOOLBAR PEAR--%>
                                            
                                            <Plugins>
    											<ext:RowEditor ID="editorPear" runat="server" SaveText="Aggiorna" CancelText="Annulla" CommitChangesText="È necessario accettare o annullare le modifiche" ErrorText="Errore"></ext:RowEditor>
    
                                                <ext:GridFilters runat="server" ID="GridFiltersPear" Local="true">
                                                    <Filters>
                                                        <ext:StringFilter DataIndex="CodiceArticoliPearVari" />
                                                        <ext:NumericFilter DataIndex="QuantitaVari" />
                                                        <ext:DateFilter DataIndex="DataScadenza">
                                                            <DatePickerOptions runat="server" TodayText="Now" />
                                                        </ext:DateFilter>
                                                    </Filters>
                                                 </ext:GridFilters>
    										</Plugins>
                                            <ColumnModel ID="columnModelPear" runat="server">
                                                <Columns>
                                                    <ext:Column ColumnID="ID" DataIndex="ID" Hidden="true"></ext:Column>
                                                     <ext:RowNumbererColumn />
                                                    <ext:Column ColumnID="CodiceArticoliPearVari" Width="150"  DataIndex="CodiceArticoliPearVari" Header="Codice Articolo">
    													<Editor>
    														<ext:TextField ID="txtCodiceArticoliPearVari"  runat="server"></ext:TextField>
    													</Editor>
    												</ext:Column>
    
                                                    <ext:Column ColumnID="QuantitaVari" Width="80"  DataIndex="QuantitaVari" Header="Quantita">
    													<Editor>
    														<ext:TextField ID="txtQuantita"  runat="server"></ext:TextField>
    													</Editor>
    												</ext:Column>
    
                                                    <ext:Column ColumnID="DescrizioneLavorazioni" DataIndex="DescrizioneLavorazioni" Header="Descrizione">
    													<Editor>
    														<ext:TextField ID="txtDescrizioneLavorazioni"  runat="server"></ext:TextField>
    													</Editor>
    												</ext:Column>
    
                                                    <ext:Column ColumnID="DataScadenza" DataIndex="DataScadenza" Width="100" Header="Data Scadenza">
                                                        <Renderer Fn="Ext.util.Format.dateRenderer('d-m-Y')" />
    														<Editor>
    															<ext:DateField ID="dtfDataScadenza" runat="server"></ext:DateField>
    														</Editor>
    												</ext:Column>
    
    												<ext:Column ColumnID="Consegnati" Width="80" DataIndex="Consegnati"  Header="Consegnati">
    													<Renderer Fn="meRenderer" />
    													<Editor>
    														<ext:Checkbox ID="chkConsegnati" runat="server" Cls="x-editor-center" />
    													</Editor>
    												</ext:Column>
    
    												<ext:Column ColumnID="InLavorazione" Width="80" DataIndex="InLavorazione" Editable="True" Header="In Lavorazione">
    													<Renderer Fn="meRenderer" />
    													<Editor>
    														<ext:Checkbox ID="chkInLavorazione" runat="server" Cls="x-editor-center" />
    													</Editor>
    												</ext:Column>

    And this is the function meRender:
       	<script type="text/javascript" language="javascript">
    		var meRenderer = function (v, p, record) {
    			p.css += " x-grid3-check-col-td";
    			return '<div class="x-grid3-check-col' + (v ? "-on" : "") + " x-grid3-cc-" + this.dataIndex + '">&#160;</div>';
    		}
    	</script>
    
    Can anyone help me please?
    Thanks a lot
    Fabrizio
  2. #2
    Hi,

    It can look something like this.

    Example
    <style type="text/css">
        .my-cell-1 {
            background-color: green;
        }
        .my-cell-2 {
            background-color: red;
        }
    </style>
    
    <script type="text/javascript">
        var myRenderer = function (v, p, record) {
            p.css += " x-grid3-check-col-td";
            return '<div class="x-grid3-check-col' + (v ? "-on" : "") + " x-grid3-cc-" + this.dataIndex + " " + (v ? "my-cell-1" : "my-cell-2") + '">&#160;</div>';
        }
    </script>
  3. #3

    so thanks for the reply but the plugin RowEditor does not work anymore

    Daniil Hello, I tried the code that I've suggested, and the cells are stained red, but the plugin RowEditor does not work anymore .could be easier to change the background of the entire row instead of the cell?
    Thanks a lot
    Fabrizio
  4. #4

    Ok works

    Thanks a lot Daniil , (My brother called Daniil, translated into Italian Danilo)
    it's works perfect
    I thank you and Congratulations!
    Fabrizio
  5. #5
    No problem, glad to help:)

Similar Threads

  1. [CLOSED] Disabling checkbox grid column cell based on data.
    By SymSure in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 09, 2012, 4:25 AM
  2. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  3. How to change GridPanel editing row backcolor
    By kakagu in forum 1.x Help
    Replies: 0
    Last Post: May 08, 2012, 7:06 AM
  4. Problem to Change The GridPanel Rows BackColor
    By hmily6033 in forum 2.x Help
    Replies: 1
    Last Post: Mar 19, 2012, 7:20 AM
  5. Replies: 0
    Last Post: May 26, 2009, 5:17 AM

Tags for this Thread

Posting Permissions