Intersoft Community - Date

Unable to Integrating WebInput in Webgrid for date time input is not working

interfung — Mon, 19 Sep 2011 07:08:00 GMT

Hi,

I am trying to input date time in a WebGrid with a Masked WebInput as DateTime picker. But after I changed the date value, the cell become empty.

I don't know if had made wrong settings for the WebGrid/ WebInput, I have attached Code below and the way to reproduce the issue (png file) for your reference. Please kindly assist. Thanks

ASPX Code:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DateInGrid.aspx.vb" Inherits="IntersoftTeseting.DateInGrid" %>
<%@ Register Assembly="ISNet.WebUI.WebInput" Namespace="ISNet.WebUI.WebControls"
    TagPrefix="ISWebInput" %>
<%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISWebGrid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ISWebGrid:WebGrid ID="WebGrid1" runat="server" Height="250px" UseDefaultStyle="true"
            Width="500px">
            <LayoutSettings AllowEdit="Yes">
            </LayoutSettings>
        </ISWebGrid:WebGrid>
        <ISWebInput:WebInput ID="WebInput1" runat="server">
            <HighLight IsEnabled="True" Type="Phrase" />
            <EditFormat Format="dd MMM yyyy" IsEnabled="true" Type="DateTime">
                <MaskInfo MaskExpression="00 LLL 0000">
                </MaskInfo>
            </EditFormat>
            <DisplayFormat>
                <ErrorWindowInfo IsEnabled="False">
                </ErrorWindowInfo>
            </DisplayFormat>
            <DateTimeEditor DateInputLink="" IsEnabled="True">
                <DropDownYearFrameStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid"
                    BorderWidth="1px">
                </DropDownYearFrameStyle>
                <DropDownMonthFrameStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid"
                    BorderWidth="1px">
                </DropDownMonthFrameStyle>
            </DateTimeEditor>
            <CultureInfo CultureName="en-US">
            </CultureInfo>
        </ISWebInput:WebInput>
    </div>
    </form>
</body>
</html>

VB Code:
Imports ISNet.WebUI.WebGrid
Public Class DateInGrid
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    End Sub
    Public Function GetDiffData() As DataTable
        Dim dt As New DataTable
        dt.Columns.Add("Str", GetType(String))
        dt.Columns.Add("Int", GetType(Integer))
        dt.Columns.Add("DateTime", GetType(Date))
        For i As Integer = 1 To 100
            dt.Rows.Add(i & "_" & i, i, Now.AddDays(i).Date)
        Next
        Return dt
    End Function
    Private Sub WebGrid1_InitializeDataSource(ByVal sender As Object, ByVal e As ISNet.WebUI.WebGrid.DataSourceEventArgs) Handles WebGrid1.InitializeDataSource
        e.DataSource = GetDiffData()
    End Sub
    Private Sub WebGrid1_PrepareDataBinding(ByVal sender As Object, ByVal e As ISNet.WebUI.WebGrid.DataSourceEventArgs) Handles WebGrid1.PrepareDataBinding
        Dim wg As WebGrid = sender
        If Not IsPostBack Then
            wg.RetrieveStructure()
        End If
        For Each wgcol As WebGridColumn In wg.RootTable.Columns
            Select Case wgcol.Name.ToLower
                Case "datetime"
                    wgcol.EditType = EditType.Custom
                    'wgcol.DataFormatString = "dd MMM yyyy"
                    wgcol.CustomEditorName = "WebInputNET"
                    wgcol.CustomEditorServerId = "WebInput1"
            End Select
        Next
    End Sub
End Class

Regards,

Fung

Unable to input date with WebInput integrate into WebGrid, produce javascript error

interfung — Wed, 11 May 2011 00:13:10 GMT

Hi,

When I move the highlight (not in EditMode) to the cell (integrated with WebInput) and start typing "0" (e.g. "01"), the page produce a javascript error, and unable to finish the input. If the input starts with a non-zero character(e.g."11") the input is able to be finished, but the cell will show nothing after finish input.

Is there any way to work around for this issue?

Thanks and Regards,

Fung

Unable to reselect date (drop down) for linked input

interfung — Fri, 28 Jan 2011 03:31:56 GMT

Hi,

I am trying to make a linked date input for my project, and so I find the sample below:

http://live.intersoftpt.com/Default.aspx?path=/WebInput/DateTime%20Input&url=cs/WebInput/QuickSelectDateInput.aspx

(for the Linked Input) The date drop down will not response after I selecting both date, until I clicked the quick select date. Is this a design of linked input?

Would there be any way to let the user to use the date drop down after the above senario (drop down is always show after user click the drop down button) ?

Thanks and Regards,

Fung

Extra Information:
Steps to reproduce (Linked Input):
1. use drop down to select the first WebInput's Date.
2. use drop down to select the second WebInput's Date.
3. click on the drop down button, there should be no response.
4. drop down will be re-activate after on of the below method.
    - clicking the quick select date
    - manually input date into one of the WebInput

WebInput 3 Cannot Set Width Using CssClass Style

PRISMAY — Thu, 07 Jan 2010 10:40:07 GMT

Seems that I can't set the width unless I use the WebInput Width property. I've tried everything I can think of via CssClass and the width will not use my class setting.

The styles used on the test page:

<style type="text/css">
.Ctl_Calendar
{
	background-color: #ffffff;
	border: solid 0px #DDCCCC;
	font-family: Calibri;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_Frame
{
	border: solid 1px #DDCCCC;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_DropDown
{
	font-family: Webdings;
	border: none;
	background-color: white;
	color: #DDCCCC;
	cursor: pointer;
}

.Ctl_Calendar_TextBox
{
	background-color: White;
	border-style: none;
	font-family: Calibri;
	font-size: 9pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	border-collapse: collapse;
	width: 100%;
	height: 22px;
}
</style>

Seems that I can't set the width unless I use the WebInput Width property. I've tried everything I can think of via CssClass and the width will not use my class setting.

<ISWebInput:WebInput ID="dt1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="dt2" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="false">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="WebInput1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" Width="100%"
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

The first calendar uses the default style, the second does not and the third uses the Width property. Note that only the third one works because it explicitly uses the Width property. The first and second do not adhere to the CssClass which has the width set to 100%.

You can put the code above in a table and set the cell width to, say, 400px and you'll see that only the third object sizes to fit the cell, the other two do not.

Also, the calendar that does not use the default style, i.e., UseDefaultStyle="false" crashes when I try to pull it down with the error "Microsoft Javascript runtime error: 'd' is null or not an object." The javascript code snippet it breaks at is the dotfuscated v4e272.d.innertHTML=vde196; where v4e272 is valid but d is indeed null.