DatePicker causing FormView to malfunction - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » DatePicker causing FormView to malfunction

DatePicker causing FormView to malfunction

Options

Previous Topic · Next Topic

Sean Vesce

Posted: Friday, November 5, 2010 6:22:54 PM

Rank: Member
Groups: Member

Joined: 10/26/2010
Posts: 16

Continuing to explore the EO library and ran into an issue today where the addition of a DatePicker control within the EditItemTemplate of a FormView causes the FormView to stop functioning properly -- clicking the Edit button to enter Edit mode does not change the form's mode.

Removing the DatePicker causes the FormView to function properly. I've tested adding a DatePicker to a fresh FormView and the FormView functions properly with the DatePicker.

Looking for any insight as to what might cause this.

Thanks in advance!

Sean

Code: HTML/ASPX

Copy

<div id="Form" class="grid_8">
    <asp:FormView ID="FormView1" runat="server" AllowPaging="True" 
        DataKeyNames="appInstalls_ID" DataSourceID="LinqFormInstalls" >
        <EditItemTemplate>

            <eo:DatePicker ID="DatePicker1" runat="server" ControlSkinID="None" 
                DayCellHeight="16" DayCellWidth="21" DayHeaderFormat="FirstLetter" 
                DisabledDates="" GridLineColor="207, 217, 227" GridLineFrameVisible="False" 
                GridLineVisible="True" SelectedDates="" TitleFormat="MMM yyyy" 
                TitleLeftArrowHtml="&amp;lt;" TitleRightArrowHtml="&amp;gt;" 
                VisibleDate="2010-11-01">
                <CalendarStyle CssText="border-right: #cfd9e3 1px solid; border-top: #cfd9e3 1px solid; font-size: 11px; border-left: #cfd9e3 1px solid; cursor: hand; border-bottom: #cfd9e3 1px solid; font-family: verdana; background-color: #eaeaea" />
                <TitleStyle CssText="padding-right: 3px; padding-left: 3px; font-weight: bold; padding-bottom: 3px; color: white; padding-top: 3px; border-bottom: #cfd9e3 1px solid; background-color: #006699; font-size: 11px; font-family: verdana;" />
                <DayHeaderStyle CssText="font-size: 11px; font-family: verdana;height: 17px" />
                <DayStyle CssText="font-size: 11px; font-family: verdana;border-right: #eaeaea 1px solid; border-top: #eaeaea 1px solid; border-left: #eaeaea 1px solid; border-bottom: #eaeaea 1px solid; background-color: #eaeaea" />
                <DayHoverStyle CssText="font-size: 11px; font-family: verdana;border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: white" />
                <SelectedDayStyle CssText="font-size: 11px; font-family: verdana;border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: white" />
            </eo:DatePicker>

            <asp:TextBox ID="appVersionTextBox" runat="server" 
                Text='<%# Bind("appVersion") %>' />
            <br />
                                
            <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                CommandName="Update" Text="Update" />
             <asp:LinkButton ID="UpdateCancelButton" runat="server" 
                CausesValidation="False" CommandName="Cancel" Text="Cancel" />

        </EditItemTemplate>

        <InsertItemTemplate>
        </InsertItemTemplate>

        <ItemTemplate>
            <asp:Button ID="butEdit" runat="server" CausesValidation="False" 
                CommandName="Edit" Text="Edit" />
        </ItemTemplate>
    </asp:FormView>

    <asp:LinqDataSource ID="LinqFormInstalls" runat="server" 
        ContextTypeName="SlateAppDataContext" EntityTypeName="" 
        TableName="tb_appInstalls" Where="office_ID == @office_ID" 
        EnableUpdate="True">
        <WhereParameters>
            <asp:ControlParameter ControlID="ddlOffices" Name="office_ID" 
                PropertyName="SelectedValue" Type="Int32" />
        </WhereParameters>
    </asp:LinqDataSource>

</div>

eo_support

Posted: Friday, November 5, 2010 6:34:04 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

We are not aware of any issues like this and your code looks fine to us. Please try to isolate the problem into a separate test page that can run independently and demonstrate the problem. Once we have that we will try to run it here and see what we can find. As long as we see the problem we should be able to tell you why.

Thanks!

Sean Vesce

Posted: Friday, November 5, 2010 6:51:40 PM

Rank: Member
Groups: Member

Joined: 10/26/2010
Posts: 16

While attempting to isolate the page, I discovered that the use of an UpdatePanel on the page is the source of the problem. Removing the UpdatePanel causes the FormView to function properly with a DatePicker. Without the UpdatePanel, I get a noticeable page refresh on postback though.

Is there an inherent incompatibility between DatePicker, FormView and UpdatePanel?

Sean

eo_support

Posted: Friday, November 5, 2010 7:37:02 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

No. We are not aware of any issues between these three controls. Please try to produce a test page and we will be happy to take a look.

You may also want to try our CallbackPanel. Our CallbackPanel works very much the same way as UpdatePanel, but because both CallbackPanel and DatePicker are our controls, they are aware of each other so they may work better for you.

Thanks!

Sean Vesce

Posted: Sunday, November 7, 2010 4:30:47 PM

Rank: Member
Groups: Member

Joined: 10/26/2010
Posts: 16

Thank you for the suggestion. Your CallbackPanel works perfectly in this context.

Sean Vesce

Posted: Sunday, November 7, 2010 5:52:21 PM

Rank: Member
Groups: Member

Joined: 10/26/2010
Posts: 16

I take it back.. :( I'd prefer to use an UpdatePanel rather than the EO CallbackPanel, if possible.

Posting an isolated test below to demonstrate the problem with DatePicker, FormView and UpdatePanel combined in one page. Note: I used an odd datasource (EO.Web.DateTimeColumn) for the FormView just so you could test this without a external db datasource.

Comment out the UpdatePanel and ContentTemplate tags to see the FormView function normally. Adding the UpdatePanel and ContentTemplate tags back causes the FormView to not enter Edit mode when clicking the Edit button. Alternatively, replace the EO.DatePicker control with a normal TextBox and the FormView works fine.

Any insight on this is appreciated.

Sean

Code: HTML/ASPX

Copy

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="eoTest.aspx.cs" Inherits="eoTest" %>

<%@ Register Assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %>

<!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></title>
</head>
<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Always">
        <ContentTemplate>

        <div id="Form" class="grid_8">
            <asp:FormView ID="FormView1" runat="server" 
             DataSourceID="ObjectDataSource1" >
                <EditItemTemplate>

                    <eo:DatePicker ID="DatePicker1" runat="server" ControlSkinID="None" 
                        DayCellHeight="16" DayCellWidth="21" DayHeaderFormat="FirstLetter" 
                        DisabledDates="" GridLineColor="207, 217, 227" GridLineFrameVisible="False" 
                        GridLineVisible="True" SelectedDates="" TitleFormat="MMM yyyy" 
                        TitleLeftArrowHtml="&amp;lt;" TitleRightArrowHtml="&amp;gt;" 
                        VisibleDate="2010-11-01">
                        <CalendarStyle CssText="border-right: #cfd9e3 1px solid; border-top: #cfd9e3 1px solid; font-size: 11px; border-left: #cfd9e3 1px solid; cursor: hand; border-bottom: #cfd9e3 1px solid; font-family: verdana; background-color: #eaeaea" />
                        <TitleStyle CssText="padding-right: 3px; padding-left: 3px; font-weight: bold; padding-bottom: 3px; color: white; padding-top: 3px; border-bottom: #cfd9e3 1px solid; background-color: #006699; font-size: 11px; font-family: verdana;" />
                        <DayHeaderStyle CssText="font-size: 11px; font-family: verdana;height: 17px" />
                        <DayStyle CssText="font-size: 11px; font-family: verdana;border-right: #eaeaea 1px solid; border-top: #eaeaea 1px solid; border-left: #eaeaea 1px solid; border-bottom: #eaeaea 1px solid; background-color: #eaeaea" />
                        <DayHoverStyle CssText="font-size: 11px; font-family: verdana;border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: white" />
                        <SelectedDayStyle CssText="font-size: 11px; font-family: verdana;border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: white" />
                    </eo:DatePicker> 
                    <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                        CommandName="Update" Text="Update" />
                     <asp:LinkButton ID="UpdateCancelButton" runat="server" 
                        CausesValidation="False" CommandName="Cancel" Text="Cancel" />

                </EditItemTemplate>

                <InsertItemTemplate>
                </InsertItemTemplate>

                <ItemTemplate>
                    <asp:Button ID="butEdit" runat="server" CausesValidation="False" 
                        CommandName="Edit" Text="Edit" />
                </ItemTemplate>
            </asp:FormView>

            <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="j" 
                TypeName="EO.Web.DateTimeColumn"></asp:ObjectDataSource>
 
        </div>
  
        </ContentTemplate>
        </asp:UpdatePanel>

        </form>

</body>
</html>

eo_support

Posted: Monday, November 8, 2010 9:22:55 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

Please try to place an eo:ScriptManager outside of the UpdatePanel. It will be something like this:

Code: HTML/ASPX

Copy

<eo:ScriptManager runat="server" id="EOScriptManager1" />

<asp:UpdatePanel runat="server" id="UpdatePanel1">
.....
</asp:UpdatePanel>

Our ScriptManager is not needed in most cases. However you need it when there is nothing else in your page to load our initialization code. This is your case because when the page is initially loaded, the DatePicker is not visible, thus our script is initialized. For our controls to work with UpdatePanel correctly, our script must be initialized before the AJAX call took place.

Please let us know if this solves the issue for you.

Thanks!

Sean Vesce

Posted: Monday, November 8, 2010 11:44:53 AM

Rank: Member
Groups: Member

Joined: 10/26/2010
Posts: 16

Thank you for the suggestion. The addition of an EO ScriptManager does the trick!

Sean

eo_support

Posted: Monday, November 8, 2010 1:23:08 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Glad that it works for you. Thank you very much for the update!

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message