[CLOSED] Colorfield in Propertygrid. Allow empty

  1. #1

    [CLOSED] Colorfield in Propertygrid. Allow empty

    Hi,

    Trying to figure out how to allow an empty property when using a 'colorfield' as editor. The customer 'can' pick a color, but is allowed to leave it empty. But when picking a color...I can't make it empty any more.

    This is my code:

    <%@ Page Language="C#" %>
     
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
         
        <style type="text/css">
            .no-image {
                background-image: none;
            }
        </style>
     
        <script type="text/javascript">
            var selectColor = function(cp, color) {
                DropDownField1.setValue("#" + color);
                DropDownField1.el.applyStyles("background-color:" + "#" + color + ";");
            }
        </script>
     
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:PropertyGrid ID="PropertyGrid1" runat="server" Width="400" AutoHeight="true"
                    Layout="FitLayout">
                    <View>
                        <ext:GridView ID="GridView1" ForceFit="true" ScrollOffset="2" runat="server" />
                    </View>
                    <Source>
                        <ext:PropertyGridParameter Name="Color" Value="">
                            <Editor>
                                <ext:DropDownField
                                    ID="DropDownField1"
                                    runat="server"
                                    Editable="true"
                                    Cls="no-image">
                                    <Component>
                                        <ext:Panel ID="Panel1" runat="server" AutoWidth="true" AutoHeight="true">
                                            <Items>
                                                <ext:ColorPalette ID="ColorPalette1" runat="server">
                                                    <Listeners>
                                                        <Select Fn="selectColor" />
                                                    </Listeners>
                                                </ext:ColorPalette>
                                            </Items>
                                        </ext:Panel>
                                    </Component>
                                </ext:DropDownField>
                            </Editor>
                        </ext:PropertyGridParameter>
                    </Source>
                </ext:PropertyGrid>
        
    </body>
    </html
    Martin
    Last edited by Daniil; Jun 20, 2011 at 12:07 PM. Reason: [CLOSED]
  2. #2
    Hi,

    DropDownField has <Triggers>. You can set up "clear" trigger.
  3. #3
    Thanks for pointing me to the right direction:

    <%@ Page Language="C#" %>
     
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
         
        <style type="text/css">
            .no-image {
                background-image: none;
            }
        </style>
     
        <script type="text/javascript">
            var selectColor = function(cp, color) {
                DropDownField1.setValue("#" + color);
                DropDownField1.el.applyStyles("background-color:" + "#" + color + ";");
            }
            var triggerHandler = function() {
            DropDownField1.setValue("");
            DropDownField1.el.applyStyles("background-color:white;"); 
            }
            
        </script>
     
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:PropertyGrid ID="PropertyGrid1" runat="server" Width="400" AutoHeight="true"
                    Layout="FitLayout">
                    <View>
                        <ext:GridView ID="GridView1" ForceFit="true" ScrollOffset="2" runat="server" />
                    </View>
                    <Source>
                        <ext:PropertyGridParameter Name="Color" Value="">
                            <Editor>
                                <ext:DropDownField
                                    ID="DropDownField1"
                                    runat="server"
                                    Editable="true" AllowBlank="true"
                                    Cls="no-image">
                                    <Component>
                                        <ext:Panel ID="Panel1" runat="server" AutoWidth="true" AutoHeight="true">
                                            <Items>
                                                <ext:ColorPalette ID="ColorPalette1" runat="server">
                                                    <Listeners>
                                                        <Select Fn="selectColor" />
                                                    </Listeners>
                                                </ext:ColorPalette>
                                            </Items>
                                        </ext:Panel>
                                    </Component>
                                    <Triggers>
                                        <ext:FieldTrigger Icon="Clear" Qtip="Click to clear field"/>
                                    </Triggers>
                                    <Listeners>
                                        <TriggerClick Fn="triggerHandler" />
                                    </Listeners>
                                </ext:DropDownField>
                            </Editor>
                        </ext:PropertyGridParameter>
                    </Source>
                </ext:PropertyGrid>
        
    </body>
    </html
    Martin

Similar Threads

  1. [CLOSED] Clear PropertyGrid
    By Marcelo in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 02, 2011, 11:55 PM
  2. [CLOSED] Colorfield ?
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2011, 6:47 AM
  3. Replies: 2
    Last Post: Aug 24, 2010, 2:02 PM
  4. Replies: 0
    Last Post: Jun 26, 2009, 11:32 AM
  5. [CLOSED] PropertyGrid
    By Bernard Jourdain in forum 1.x Help
    Replies: 2
    Last Post: Oct 06, 2008, 1:58 PM

Posting Permissions