Welcome Guest Search | Active Topics | Sign In | Register

Adding multiple datepicker in a gird Options
bskumar
Posted: Tuesday, October 27, 2009 3:11:32 AM
Rank: Member
Groups: Member

Joined: 9/22/2009
Posts: 24
Hi,

we have created "DatePickerColumn" using EO datepicker. Now when we are adding "DatePicker Column" in our grid, if the grid has 200 rows then the following script error is showing.



i think this is happening because the EO datepicker control is create multiple times. Can you please tell us how to use datepicker control in grid using single instance.

Thanks in advance
Kumar.
eo_support
Posted: Tuesday, October 27, 2009 8:51:27 AM
Rank: Administration
Groups: Administration

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

If you use our Grid, then it will automatically do that for you. If you do not use that, you will need to have a single invisible DatePicker outside of the Grid, then when your Grid cell enters edit mode, you show the DatePicker and also align the DatePicker to your Grid cell. To show/align the DatePicker requires some JavaScript coding. The code has nothing to do with our DatePicker but we will be happy to provide sample code to you if you have a license.

Thanks!
bskumar
Posted: Wednesday, October 28, 2009 8:09:53 AM
Rank: Member
Groups: Member

Joined: 9/22/2009
Posts: 24
Hi,
We have license for EOControls. Please share sample code with us and let us know any more information is required.

Thanks in advance,
Kumar.
eo_support
Posted: Wednesday, October 28, 2009 8:14:06 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Can you let us know your license id?
bskumar
Posted: Wednesday, October 28, 2009 8:39:18 AM
Rank: Member
Groups: Member

Joined: 9/22/2009
Posts: 24
Hi,

To which mail ID i need to send license or order ID.

Thanks,
Kumar.
eo_support
Posted: Wednesday, October 28, 2009 8:43:52 AM
Rank: Administration
Groups: Administration

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

You can click "PM ME" button below any of our post to send a private message to us.

Thanks
eo_support
Posted: Saturday, November 7, 2009 3:15:54 PM
Rank: Administration
Groups: Administration

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

Here is a sample that uses a single DatePicker for editing:

Code: HTML/ASPX
<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false" 
    onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>Time</HeaderTemplate>
            <ItemTemplate>
                <%#Eval("Time", "{0:yyyy/MM/dd}") %>
            </ItemTemplate>
            <EditItemTemplate>
                <eo:DatePicker runat="server" ID="DatePicker1" ControlSkinID="None" 
                    DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter" 
                    DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" 
                    TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" 
                    TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2009-11-01">
                    <TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
                    <SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                    <DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                    <PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
                    <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
                    <TitleArrowStyle CssText="cursor:hand" />
                    <DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
                    <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
                    <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
                    <OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                    <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
                    <DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                </eo:DatePicker>
            </EditItemTemplate>
        </asp:TemplateField>            
        <asp:CommandField EditText="Edit" ShowEditButton="true" />            
    </Columns>
</asp:GridView>
<asp:Label runat="server" ID="Label1">
</asp:Label>


Code: C#
protected void Page_Load(
    object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        BindGrid();
}

private void BindGrid()
{
    //This sample always create a DataTable from
    //memory. You will need to change this part to
    //load data from your DB
    DataTable table = new DataTable();
    table.Columns.Add(new DataColumn("Time", typeof(DateTime)));
    table.Rows.Add(DateTime.Today);
    table.Rows.Add(DateTime.Today.AddDays(1));
    GridView1.DataSource = table;
    GridView1.DataBind();
}

protected void GridView1_RowEditing(
    object sender, GridViewEditEventArgs e)
{
    //Entering edit mode
    GridView1.EditIndex = e.NewEditIndex;
    BindGrid();
}

protected void GridView1_RowUpdating(
    object sender, GridViewUpdateEventArgs e)
{
    //Get the new date user has entered
    GridViewRow row = GridView1.Rows[e.RowIndex];
    EO.Web.DatePicker datePicker = 
        (EO.Web.DatePicker)row.FindControl("DatePicker1");

    //Here we use a Label to display the new 
    //date for demonstration purpose. You will
    //need to change this code to save the
    //changes into your DB
    Label1.Text = datePicker.SelectedDate.ToString();

    //Cancel edit mode and rebind the Grid.
    //Because the sample code does not change
    //the data source, you will see the Grid
    //displays the original date again. However
    //once you change the code to load/save
    //data from and to your DB, the Grid should
    //work fine
    GridView1.EditIndex = -1;
    BindGrid();
}


The sample uses a single DatePicker to edit the date and use a data binding expression to display the date when the row is not in edit mode.

Please let us know if this helps or you actually meant something else.

Thanks!


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.