DateEditRangeSettings.StartDateEditID Property

Gets or sets the ID of an ASPxDateEdit control that will be used to specify the start date of a range.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue("")]
public string StartDateEditID { get; set; }

VB.NET

<DefaultValue("")>
Public Property StartDateEditID As String

Property Value

Type	Default	Description
String	String.Empty	A string value specifying the ID of an ASPxDateEdit control.

Property Paths

You can access this nested property as listed below:

Object Type	Path to StartDateEditID
ASPxDateEdit	.DateRangeSettings .StartDateEditID
DateEditProperties	.DateRangeSettings .StartDateEditID
MVCxColumnDateEditProperties	.DateRangeSettings .StartDateEditID
MVCxDateEdit	.DateRangeSettings .StartDateEditID
MVCxDateEditProperties	.DateRangeSettings .StartDateEditID
RibbonDateEditProperties	.DateRangeSettings .StartDateEditID

Remarks

The ASPxDateEdit control provides the capability to select a date range. To implement this functionality, two ASPxDateEdit controls should be used: for specifying the start and the end date of the range. To link two editors, set the StartDateEditID property of the second editor (end-date editor) to a value specifying the ID of the first editor (start-date editor).

ASPX

<dx:ASPxDateEdit ID="deStart" ClientInstanceName="deStart" runat="server" Caption="Start Date">
</dx:ASPxDateEdit>

<dx:ASPxDateEdit ID="deEnd" ClientInstanceName="deEnd" runat="server" Caption="End Date">
     <DateRangeSettings StartDateEditID="deStart"></DateRangeSettings>
</dx:ASPxDateEdit>

Note

The editor’s date range settings should be specified for the end-date ASPxDateEdit control. The properties specified for the start-date editor are not in effect.

When the Date Range Picker is used in DevExpress ASP.NET and MVC GridView using built-in editors, the StartDateEditID property can be specified using the FieldName property of the Start Edit column.

Web Forms approach:

ASPX

<dx:GridViewDataDateColumn FieldName="StartDate">
</dx:GridViewDataDateColumn>
<dx:GridViewDataDateColumn FieldName="EndDate">
    <PropertiesDateEdit>
        <DateRangeSettings StartDateEditID="StartDate"/>
    </PropertiesDateEdit>
</dx:GridViewDataDateColumn>

MVC approach:

Razor

...
settings.Columns.Add(column=> {
    column.FieldName = "StartDate";
    column.ColumnType = MVCxGridViewColumnType.DateEdit;
});
settings.Columns.Add(column =>
{
    column.FieldName = "EndDate";
    column.ColumnType = MVCxGridViewColumnType.DateEdit;
    var dateProperties = column.PropertiesEdit as DateEditProperties;
    dateProperties.DateRangeSettings.StartDateEditID = "StartDate";
});
...

Example

This example demonstrates how to implement a date range picker in ASPxGridView using a column’s field name.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-implement-a-date-range-picker-in-aspxgridview-using-a-columns-field-name-t425441

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        grid.DataSource = Enumerable.Range(0, 10).Select(x => new SomeData { ProductID = x, StartDate = DateTime.Now, EndDate = DateTime.Now });
        grid.DataBind();
    }
    protected void grid_RowUpdating(object sender, DevExpress.Web.Data.    ASPxDataUpdatingEventArgs e) {
        e.Cancel = true;
    }
    protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
        e.Cancel = true;
    }
    protected void grid_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) {
        e.Cancel = true;
    }

}
public class SomeData
{
    public int ProductID { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

Default.aspx (C#)

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

<%@ Register Assembly="DevExpress.Web.v16.1, Version=16.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="grid" KeyFieldName="ProductID" runat="server" OnRowUpdating="grid_RowUpdating" OnRowInserting="grid_RowInserting" OnRowDeleting="grid_RowDeleting">
            <Columns>
                <dx:GridViewCommandColumn ShowEditButton="true" ShowNewButtonInHeader="true" ShowDeleteButton="true"></dx:GridViewCommandColumn>
                <dx:GridViewDataDateColumn FieldName="StartDate">
                </dx:GridViewDataDateColumn>
                <dx:GridViewDataDateColumn FieldName="EndDate">
                    <PropertiesDateEdit>
                        <DateRangeSettings StartDateEditID="StartDate"/>
                    </PropertiesDateEdit>
                </dx:GridViewDataDateColumn>
            </Columns>

        </dx:ASPxGridView>
    </div>
    </form>
</body>
</html>

Default.aspx (VB.NET)

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v16.1, Version=16.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="grid" KeyFieldName="ProductID" runat="server" OnRowUpdating="grid_RowUpdating" OnRowInserting="grid_RowInserting" OnRowDeleting="grid_RowDeleting">
            <Columns>
                <dx:GridViewCommandColumn ShowEditButton="true" ShowNewButtonInHeader="true" ShowDeleteButton="true"></dx:GridViewCommandColumn>
                <dx:GridViewDataDateColumn FieldName="StartDate">
                </dx:GridViewDataDateColumn>
                <dx:GridViewDataDateColumn FieldName="EndDate">
                    <PropertiesDateEdit>
                        <DateRangeSettings StartDateEditID="StartDate"/>
                    </PropertiesDateEdit>
                </dx:GridViewDataDateColumn>
            </Columns>

        </dx:ASPxGridView>
    </div>
    </form>
</body>
</html>

Default.aspx.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        grid.DataSource = Enumerable.Range(0, 10).Select(Function(x) New SomeData With {.ProductID = x, .StartDate = Date.Now, .EndDate = Date.Now})
        grid.DataBind()
    End Sub
    Protected Sub grid_RowUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
        e.Cancel = True
    End Sub
    Protected Sub grid_RowInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
        e.Cancel = True
    End Sub
    Protected Sub grid_RowDeleting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataDeletingEventArgs)
        e.Cancel = True
    End Sub

End Class
Public Class SomeData
    Public Property ProductID() As Integer
    Public Property StartDate() As Date
    Public Property EndDate() As Date
End Class