What's New?

TriggerField Use

  1. #1
    May 13, 2009, 2:32 PM

    TriggerField Use

    Hello,

    Two issues:

    1) Is it possible to attach an ext:Menu to a trigger in a triggerfield? And if so, could you please illustrate how to do it?

    2) Is it possible to use the validation control coolite controls use to display errors? (the exclamation point in a red circle and the bubble showing an error message). I don't see that control in the API.

    Thanks
  2. #2
    May 13, 2009, 8:27 PM

    RE: TriggerField Use

    Any ideas? Thanks for any help you can provide.
  3. #3
    May 14, 2009, 5:59 AM

    RE: TriggerField Use

    Hi,

    1. To show menu use 'show' method of menu
    2. To show validation mark place a field inside form layout and set MsgTarget="Side" for the field

    <%@ Page Language="C#" %>
<%@ Register Src="~/Temp/AjaxEvents/AjaxUC.ascx" TagName="AddressRecords" TagPrefix="uc1" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Coolite Toolkit - GridPanel with ObjectDataSource</title>
</head>
<body style="padding:5px;">
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
        
        <ext:Menu ID="Menu1" runat="server">
            <Items>
                <ext:MenuItem runat="server" Text="Item1"></ext:MenuItem>
                <ext:MenuItem runat="server" Text="Item2"></ext:MenuItem>
            </Items>
        </ext:Menu>
        
        <ext:Panel runat="server" BodyStyle="padding:5px;">
            <Body>
                <ext:FormLayout runat="server">
                    <ext:Anchor>
                        <ext:TriggerField ID="TriggerField1" runat="server" AllowBlank="false" MsgTarget="Side" FieldLabel="Label">
                            <Triggers>
                                <ext:FieldTrigger Icon="Combo" />
                            </Triggers>
                            
                            <Listeners>
                                <TriggerClick Handler="#{Menu1}.minWidth = #{TriggerField1}.getSize().width+17; #{Menu1}.show(#{TriggerField1}.el);" />
                            </Listeners>
                        </ext:TriggerField>
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>
        </ext:Panel>
        
        
    </form>
</body>
</html>
  4. #4
    May 14, 2009, 12:32 PM

    RE: TriggerField Use

    Great! Thank you very much.
  5. #5
    May 14, 2009, 3:54 PM

    RE: TriggerField Use 


    


<cool:TriggerField ID="TriggerField1" runat="server" AllowBlank="false" MsgTarget="Side">
<Triggers>
    <cool:FieldTrigger Icon="Date" />
    <cool:FieldTrigger Icon="Combo" />
</Triggers>
<Listeners>
    <TriggerClick Handler="#{Menu1}.minWidth = #{TriggerField1}.getSize().width+17; #{Menu1}.show(#{TriggerField1}.el);" />
</Listeners>
</cool:TriggerField>
    What would the handler look like if you also attach a DatePicker to the triggerfield? How would the handler change if you want show the datepicker when the Date trigger/button is clicked and the Menu when the Combo trigger/button is clicked?

    Thanks
  6. #6
    May 14, 2009, 4:38 PM

    RE: TriggerField Use



    I figured it out. In case anybody needs it, this is how I did it:

    
<cool:Menu ID="Menu1" runat="server">
        <Items>
            <cool:TextMenuItem ID="TextMenuItem1" runat="server" Text="<b class='menu-title'>Choose a Format[/B]" />
            <cool:CheckMenuItem ID="CheckMenuItem1" runat="server" Text="mm-dd-yyyy" Checked="true" Group="theme" />
            <cool:CheckMenuItem ID="CheckMenuItem2" runat="server" Text="mm-yyyy" Group="theme" />
            <cool:CheckMenuItem ID="CheckMenuItem3" runat="server" Text="yyyy" Group="theme" />
        </Items>
    </cool:Menu>


    <cool:DateMenu ID="DateMenu1" runat="server">
          <Picker runat="server">
               <Listeners>
                    <Select Handler="alert(date.format('MM-dd-yyyy'));" />
                </Listeners>
          </Picker>
     </cool:DateMenu>


   
    <cool:Panel runat="server" BodyBorder="false">
        <Body>
            <cool:FormLayout runat="server" HideLabels="true">
                <cool:Anchor>
                    <cool:TriggerField ID="TriggerField1" runat="server" AllowBlank="false" MsgTarget="Side">
                        <Triggers>
                            <cool:FieldTrigger Icon="Date" />
                            <cool:FieldTrigger Icon="Combo" Qtip="Click to select a date format" />
                        </Triggers>
                        <Listeners>
                            <TriggerClick Handler="if (index == 0) { #{DateMenu1}.minWidth = #{TriggerField1}.getSize().width+17; #{DateMenu1}.show(#{TriggerField1}.el); } else { #{Menu1}.minWidth = #{TriggerField1}.getSize().width+17; #{Menu1}.show(#{TriggerField1}.el); }" />
                        </Listeners>
                    </cool:TriggerField>
                </cool:Anchor>
            </cool:FormLayout>
        </Body>
    </cool:Panel>

Similar Threads

  1. TriggerField and triggers
    By jurel in forum 1.x Help
    Replies: 1
    Last Post: Aug 31, 2010, 7:45 PM
  2. [1.0] Triggerfield resize
    By SouthDeveloper in forum 1.x Help
    Replies: 3
    Last Post: May 13, 2010, 1:03 PM
  3. [0.8.2] Propertygrid and triggerfield
    By plykkegaard in forum 1.x Help
    Replies: 0
    Last Post: Jan 01, 2010, 5:23 PM
  4. TriggerField Validation
    By erey in forum 1.x Help
    Replies: 0
    Last Post: May 15, 2009, 9:11 PM
  5. TriggerField in coolite
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 13, 2008, 3:34 AM

Posting Permissions