Gridpanel multiheader From To date filter

  1. #1

    Gridpanel multiheader From To date filter

    Hello Everyone,

    I am using ext.net 2.0 and this is what i am trying to do: i have a gridpanel with a bunch of columns one of them a date column. I included a multiheader so that it will be possible to filter on the columns. By the datecolumn however i need to have a from to date filter. So i inserted a dropdownfield with a container/panel of two date fields. When trying to select a date the dropdown shuts closed on the first click and i cannot select a date. Here is a snippet of my code:

    <ext:DateColumn ID="colDateOfShipment" DataIndex="DateOfShipment" Sortable="true" Width ="150" Text="Datum" runat="server" Format="dd/MM/yyyy" >
                                                    <HeaderItems>
                                                        <ext:Container ID="Container3" runat="server">
                                                            <Items>
                                                                <ext:DropDownField ID="ddfDateFilter" Editable="false" runat="server" EnableKeyEvents="true" TriggerAction="All"> 
                                                                    <Component>
                                                                        <ext:Panel ID="PanelDateFilter" Height="80" Width="200" Layout="Border" runat="server" Border="false">
                                                                            <Items>
                                                                                <ext:DateField ID="DateOfShipmentFromFilter" Editable="false" runat="server" LabelWidth="30" FieldLabel="From" Region="Center" Selectable="true">
                                                                                    <Listeners>
                                                                                        <Select Handler="#{DirectMethods}.SetDropDownFieldText();"/>
                                                                                    </Listeners>
                                                                                </ext:DateField>
                                                                                <ext:DateField ID="DateOfShipmentToFilter" Editable="false" runat="server" LabelWidth="30" FieldLabel="To" Region="South">
                                                                                    <Listeners>
                                                                                         <Select Handler="#{DirectMethods}.SetDropDownFieldText();"/>
                                                                                    </Listeners>
                                                                                </ext:DateField>   
                                                                            </Items>
                                                                        </ext:Panel>   
                                                                    </Component>
                                                                    <ToolTips>
                                                                        <ext:ToolTip ID="ToolTipDateFilter" Html="No date(s) selected." runat="server" />
                                                                    </ToolTips>
                                                                </ext:DropDownField>
                                                            </Items>
                                                        </ext:Container>                                        
                                                    </HeaderItems>
    </ext:DateColumn>
    Can someone help me please? Its a bit urgent :)

    Thank you!!
    Last edited by nomz; Apr 24, 2012 at 8:58 AM.
  2. #2
    Hi,

    Well, it's the functionality of the floating components. The DropDownField Panel is a floating component.

    I would suggest to consider a possibility to use another approach. Try to edit some cell here:
    https://examples2.ext.net/#/Form/Tri...Dialog_Editor/

    I was able to get what you want, but it's a bit tricky and I can't guarantee it will work in all cases and won't be broken in some time after update.

    The solution is the Render listeners for the DateFields.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { DateTime.Now }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!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 runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var onRender = function (field) {
                field.mon(
                    field.getPicker().el,
                    "mousedown",
                    function (e) {
                        var panel = this;
                        panel.on(
                            "beforehide",
                            function () {
                                this.dropDownField.on("collapse", function () {
                                    this.expand(false); 
                                }, this.dropDownField, { single: true });
                                return false;
                            },
                            panel, { single: true });
                    },
                    field.ownerCt);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:DateColumn
                        runat="server"
                        Text="Date"
                        DataIndex="test"
                        Width="150" 
                        Format="dd/MM/yyyy">
                        <HeaderItems>
                            <ext:DropDownField runat="server" Editable="false">
                                    <Component>
                                        <ext:Panel
                                            runat="server" 
                                            Layout="AnchorLayout"
                                            DefaultAnchor="100%"
                                            Floating="false">
                                            <Items>
                                                <ext:DateField 
                                                    runat="server" 
                                                    Editable="false" 
                                                    LabelWidth="30"
                                                    FieldLabel="From">
                                                    <Listeners>
                                                        <Render Fn="onRender" />
                                                    </Listeners>
                                                </ext:DateField>
                                                <ext:DateField 
                                                    runat="server" 
                                                    Editable="false" 
                                                    LabelWidth="30"
                                                    FieldLabel="To">
                                                    <Listeners>
                                                        <Render Fn="onRender" />
                                                    </Listeners>
                                                </ext:DateField>
                                            </Items>
                                        </ext:Panel>
                                    </Component>
                                </ext:DropDownField>
                        </HeaderItems>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
  3. #3
    Oh thats perfect!
    It works now!
    Thank you soooo much! Really appreciate it!

    Have a great day further :)
  4. #4
    I just discovered that the example above doesn't work with the latest sources.

    Here is a working and simpler example.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { DateTime.Now }
                };
                store.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
     
        <script>
            var onRender = function (field) {
                field.getPicker().el.on(
                    "mousedown", 
                    function (e) { 
                        // generally, just e.stopEvent() should work instead of the all code below. I will investigate.
                        var browserEvent = e.browserEvent;
    
                        if (browserEvent) {                    
                            Ext.EventManager.stopPropagation(browserEvent);
                        }
                        e.preventDefault(); 
                    });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:DateColumn
                        runat="server"
                        Text="Date"
                        DataIndex="test"
                        Width="150"
                        Format="dd/MM/yyyy">
                        <HeaderItems>
                            <ext:DropDownField runat="server" Editable="false">
                                 <Component>
                                        <ext:Panel
                                            runat="server"
                                            Layout="AnchorLayout"
                                            DefaultAnchor="100%">
                                            <Items>
                                                <ext:DateField
                                                    runat="server"
                                                    Editable="false"
                                                    LabelWidth="30"
                                                    FieldLabel="From">
                                                    <Listeners>
                                                        <Render Fn="onRender" />
                                                    </Listeners>
                                                </ext:DateField>
                                                <ext:DateField
                                                    runat="server"
                                                    Editable="false"
                                                    LabelWidth="30"
                                                    FieldLabel="To">
                                                    <Listeners>
                                                        <Render Fn="onRender" />
                                                    </Listeners>
                                                </ext:DateField>
                                            </Items>
                                        </ext:Panel>
                                    </Component>
                                </ext:DropDownField>
                        </HeaderItems>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by Daniil; Oct 24, 2012 at 3:15 PM.
  5. #5
    Here is a related post with some details.
    http://forums.ext.net/showthread.php...ll=1#post93810

Similar Threads

  1. Replies: 4
    Last Post: May 16, 2012, 8:14 AM
  2. Replies: 1
    Last Post: May 11, 2012, 3:46 AM
  3. Replies: 2
    Last Post: Nov 30, 2010, 9:41 AM
  4. [CLOSED] Missing filter column using MultiHeader Filter.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 12, 2010, 1:07 PM
  5. Replies: 2
    Last Post: Feb 11, 2009, 7:04 AM

Tags for this Thread

Posting Permissions