What's New?

[CLOSED] DateField range with MasterPage

  1. #1
    Jun 27, 2013, 3:25 PM

    [CLOSED] DateField range with MasterPage

    Hi Support team,

    I try to implement a date range with datefield on page which includes one master page.
    I followed an example code but I found it didn't work with master page environment because asp.net change clientID automatically.
    It displayed an error message on daterange function on Vtype.js.
    I attached a captured images.

    https://examples2.ext.net/#/Form/Dat...From-To_Range/

    
<script type="text/javascript">
	var onKeyUp = function () {
		var me = this,
			v = me.getValue(),
			field;

		if (me.startDateField) {
			field = Ext.getCmp('<%= dtStartDate.ClientID %>');
			field.setMaxValue(v);
			me.dateRangeMax = v;
		} else if (me.endDateField) {
			field = Ext.getCmp('<%= dtEndtDate.ClientID %>');
			field.setMinValue(v);
			me.dateRangeMin = v;
		}

		field.validate();
	};
</script>

== ASPX page
<ext:DateField ID="dtStartDate" runat="server" FieldLabel="Start Date" Width="400" EnableKeyEvents="true" Vtype="daterange">
	<CustomConfig>
		<ext:ConfigItem Name="endDateField" Value="dtEndDate" Mode="Value" />
	</CustomConfig>
	<Listeners>
		<KeyUp Fn="onKeyUp" />
	</Listeners>
</ext:DateField>
<ext:DateField ID="dtEndDate" runat="server" FieldLabel="End Date" Width="400" EnableKeyEvents="true" Vtype="daterange">
	<CustomConfig>
		<ext:ConfigItem Name="startDateField" Value="dtStartDate" Mode="Value" />
	</CustomConfig>
	<Listeners>
		<KeyUp Fn="onKeyUp" />
	</Listeners>
</ext:DateField>
    Click image for larger version.  Name: date1.png  Views: 29  Size: 48.5 KB  ID: 6466Click image for larger version.  Name: date2.png  Views: 26  Size: 27.7 KB  ID: 6467

    Regards,

    Kevin
    Last edited by Baidaly; Jun 28, 2013 at 5:23 PM. Reason: [CLOSED]
  2. #2
    Jun 27, 2013, 3:52 PM
    Hi Kevin,

    Please try:
    <ext:ConfigItem Name="endDateField" Value="#{dtEndDate}" Mode="Value" />
    <ext:ConfigItem Name="startDateField" Value="#{dtStartDate}" Mode="Value" />
    Wrapping in #{} replaces an ID with ClientID.
  3. #3
    Jun 27, 2013, 5:51 PM
    Quote Originally Posted by Daniil View Post
    Hi Kevin,

    Please try:
    <ext:ConfigItem Name="endDateField" Value="#{dtEndDate}" Mode="Value" />
    <ext:ConfigItem Name="startDateField" Value="#{dtStartDate}" Mode="Value" />
    Wrapping in #{} replaces an ID with ClientID.
    Hi Daniil,

    Thank you for your answer and I changed the code what you recommended but I still have a problem.
    The end variable below from daterange function on Vtype.js is undefined because the value of field.endDateField is "App.ContentPlaceHolderMain_dtEndDate". 
    var end = Ext.getCmp(field.endDateField);
    The value need to be changed to "ContentPlaceHolderMain_dtEndDate" instead of "App.ContentPlaceHolderMain_dtEndDate".
    Could you help me to resolve this issue?

    Kevin
  4. #4
    Jun 27, 2013, 11:23 PM
    Hello!

    Try to set IDMode of the ResourceManager to Static:

    <ext:ResourceManager runat="server" IDMode="Static"></ext:ResourceManager>
  5. #5
    Jun 28, 2013, 3:48 AM
    Another approach is:
    <ext:ConfigItem 
    Name="endDateField" 
    Value="<%# DateField2.ConfigID %>" 
    Mode="Value" 
    AutoDataBind="true" />
    Here is a full example.

    Master Page
    <%@ Master Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
    <form runat="server">        
        <ext:ResourceManager runat="server" />

        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </form>
</body>
</html>
    Content Page
    <%@ Page Language="C#" MasterPageFile="~/Site1.master" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <script>
        var onKeyUp = function () {
            var me = this,
                v = me.getValue(),
                field;

            if (me.startDateField) {
                field = Ext.getCmp(me.startDateField);
                field.setMaxValue(v);
                me.dateRangeMax = v;
            } else if (me.endDateField) {
                field = Ext.getCmp(me.endDateField);
                field.setMinValue(v);
                me.dateRangeMin = v;
            }

            field.validate();
        };
    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <ext:Window
        runat="server"
        Width="350"
        Title="DateRange"
        Icon="Date"
        Closable="false"
        BodyPadding="5"
        Layout="Anchor"
        DefaultAnchor="100%">
        <Items>
            <ext:DateField
                ID="DateField1"
                runat="server"
                Vtype="daterange"
                FieldLabel="To"
                EnableKeyEvents="true">
                <CustomConfig>
                    <ext:ConfigItem 
                        Name="endDateField" 
                        Value="<%# DateField2.ConfigID %>" 
                        Mode="Value" 
                        AutoDataBind="true" />
                </CustomConfig>
                <Listeners>
                    <KeyUp Fn="onKeyUp" />
                </Listeners>
            </ext:DateField>

            <ext:DateField
                ID="DateField2"
                runat="server"
                Vtype="daterange"
                FieldLabel="From"
                EnableKeyEvents="true">
                <CustomConfig>
                    <ext:ConfigItem 
                        Name="startDateField" 
                        Value="<%# DateField1.ConfigID %>" 
                        Mode="Value" 
                        AutoDataBind="true" />
                </CustomConfig>
                <Listeners>
                    <KeyUp Fn="onKeyUp" />
                </Listeners>
            </ext:DateField>
        </Items>
    </ext:Window>
</asp:Content>
  6. #6
    Jun 28, 2013, 1:14 PM
    Quote Originally Posted by Daniil View Post
    Another approach is:
    <ext:ConfigItem 
    Name="endDateField" 
    Value="<%# DateField2.ConfigID %>" 
    Mode="Value" 
    AutoDataBind="true" />
    Here is a full example.

    Master Page
    <%@ Master Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
    <form runat="server">        
        <ext:ResourceManager runat="server" />

        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </form>
</body>
</html>
    Content Page
    <%@ Page Language="C#" MasterPageFile="~/Site1.master" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <script>
        var onKeyUp = function () {
            var me = this,
                v = me.getValue(),
                field;

            if (me.startDateField) {
                field = Ext.getCmp(me.startDateField);
                field.setMaxValue(v);
                me.dateRangeMax = v;
            } else if (me.endDateField) {
                field = Ext.getCmp(me.endDateField);
                field.setMinValue(v);
                me.dateRangeMin = v;
            }

            field.validate();
        };
    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <ext:Window
        runat="server"
        Width="350"
        Title="DateRange"
        Icon="Date"
        Closable="false"
        BodyPadding="5"
        Layout="Anchor"
        DefaultAnchor="100%">
        <Items>
            <ext:DateField
                ID="DateField1"
                runat="server"
                Vtype="daterange"
                FieldLabel="To"
                EnableKeyEvents="true">
                <CustomConfig>
                    <ext:ConfigItem 
                        Name="endDateField" 
                        Value="<%# DateField2.ConfigID %>" 
                        Mode="Value" 
                        AutoDataBind="true" />
                </CustomConfig>
                <Listeners>
                    <KeyUp Fn="onKeyUp" />
                </Listeners>
            </ext:DateField>

            <ext:DateField
                ID="DateField2"
                runat="server"
                Vtype="daterange"
                FieldLabel="From"
                EnableKeyEvents="true">
                <CustomConfig>
                    <ext:ConfigItem 
                        Name="startDateField" 
                        Value="<%# DateField1.ConfigID %>" 
                        Mode="Value" 
                        AutoDataBind="true" />
                </CustomConfig>
                <Listeners>
                    <KeyUp Fn="onKeyUp" />
                </Listeners>
            </ext:DateField>
        </Items>
    </ext:Window>
</asp:Content>
    Hi Daniil,

    Thans you so much your answer.
    Your last solution resolved my issue but first option, IDMode="Static", on ResourceManager was not working.
    I attached a captured image file.

    Click image for larger version.  Name: date4.jpg  Views: 22  Size: 76.9 KB  ID: 6470

    Thanks again,

    Kevin
  7. #7
    Jun 28, 2013, 3:14 PM
    Quote Originally Posted by kevinhwang View Post
    but first option, IDMode="Static", on ResourceManager was not working.
    Yes, IDMode="Static" doesn't eliminate "App" from ClientID.

Similar Threads

  1. [CLOSED] DateField - From To Range
    By thchuong in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 08, 2012, 9:17 AM
  2. [CLOSED] Bug in Date Range Example
    By Akpenob in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 02, 2012, 2:46 PM
  3. [CLOSED] From to date range
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 30, 2012, 9:52 AM
  4. [CLOSED] From-To Date Range
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 30, 2012, 9:52 AM
  5. Date Range in Gridpanel?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jan 29, 2009, 3:41 PM

Tags for this Thread

Posting Permissions