Using GridDateTimeColumn and GridTextBoxColumnEditor in a RadGrid

[Herman Gouw]

Hi,

I have a grid with 3 columns:

Column 1 - an editable GridDateTimeColumn which displays and accepts a date

Column 2 - an editable GridBoundColumn (with GridTextBoxColumnEditor) which displays and accepts a string

Column 3 - a GridEditCommandColumn

In edit mode, I would like to do the following:

Column 1 - to force the user to select the date from the DatePicker only (i.e. to disable the text box)

Column 2 - to restrict the length of the string which can be entered by the user to 60

Can you please show me how to do these?

Can you please also show me how to set the width of the GridTextBoxColumnEditor from the code behind instead of from ASPX?

The web page is available on http://www.gouw.ws/RadGrid

The code is given below:

ASPX

====

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

<div>

    <telerik:RadScriptManager ID="radScriptManager" runat="server" />

    <telerik:RadGrid ID="radGrid" AutoGenerateColumns="false" GridLines="Vertical" OnNeedDataSource="radGrid_NeedDataSource" OnUpdateCommand="radGrid_UpdateCommand" runat="server">

        <ClientSettings>

            <Scrolling UseStaticHeaders="true" />

        </ClientSettings>

        <MasterTableView EditMode="InPlace" TableLayout="Fixed">

            <Columns>

                <telerik:GridDateTimeColumn DataField="Date" PickerType="DatePicker" DataFormatString="{0:dd/MM/yyyy}" DataType="System.DateTime" HeaderText="Date" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="13%" ItemStyle-HorizontalAlign="Left" UniqueName="Date" />

                <telerik:GridBoundColumn DataField="Description" ColumnEditorID="gridTextBoxColumnEditor" DataType="System.String" HeaderText="Description" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="77%" ItemStyle-HorizontalAlign="Left" UniqueName="Description" />

                <telerik:GridEditCommandColumn ButtonType="LinkButton" HeaderStyle-Width="10%" UniqueName="Edit" />

            </Columns>

        </MasterTableView>

    </telerik:RadGrid>

    <telerik:GridTextBoxColumnEditor ID="gridTextBoxColumnEditor" TextBoxStyle-Width="920px" runat="server" />

</div>

</form>

C#

==

public partial class Default : System.Web.UI.Page

{

    private List<Datum> _data = null;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (IsPostBack)

        {

            this._data = (List<Datum>)Session["DATA"];

        }

        else

        {

            this._data = Datum.Load();

            Session["DATA"] = this._data;

        }

    }

    protected void radGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

    {

        this.radGrid.DataSource = this._data;

    }

    protected void radGrid_UpdateCommand(object sender, GridCommandEventArgs e)

    {

        if (e.Item is GridEditableItem && e.Item.IsInEditMode)

        {

            GridEditableItem item = e.Item as GridEditableItem;

            ((Datum)(this._data[item.ItemIndex])).Date = ((RadDatePicker)item["Date"].Controls[0]).SelectedDate.Value.Date;

            ((Datum)(this._data[item.ItemIndex])).Description = ((TextBox)item["Description"].Controls[0]).Text;

        }

    }

}

public class Datum

{

    public DateTime Date { get; set; }

    public string Description { get; set; }

    public Datum(DateTime date, string description)

    {

     Date = date;

     Description = description;

    }

    public static List<Datum> Load()

    {

     List<Datum> data = new List<Datum>();

        data.Add(new Datum(DateTime.Now, "This date is today"));

        data.Add(new Datum(DateTime.Now.AddDays(1), "This date is tomorrow"));

        data.Add(new Datum(DateTime.Now.AddDays(2), "This date is the day after tomorrow"));

        return data;

    }

}

Thanks &  regards,

Herman Gouw

Skype: hermangouw

[Tsvetoslav]

Hi Herman Gouw,

1. Concerning your first question: You need to attach an event handler to the ItemCreated event of the grid and disable the textbox in the bound column as follows:

if (e.Item.InEditMode && e.Item is GridEditableItem)
{

 GridEditableItem item = e.Item as GridEditableItem;
 item["BoundColumnUniqueName"].Controls[0].Enabled = false;

}

2. With regards to the second issue - just set the MasLength property of the bound column to the desired value.

I hope this helps.

Kind regards,

Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Herman Gouw]

Hi Tsvetoslav,

Thank you for your reply.

1. I got the following syntax error when trying to compile this.

'System.Web.UI.Control' does not contain a definition for 'Enabled' and no extension method 'Enabled' accepting a first argument of type 'System.Web.UI.Control' could be found (are you missing a using directive or an assembly reference?)

2. This one works.

Thanks & regards,

Herman

[Princy]

Hello Herman,

To disable the textbox for a GridBoundColumn when the grid is in EditMode, you can use the following code:
c#:

 if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (GridEditableItem)e.Item;
            ((TextBox)item["BoundColumnUniqueName"].Controls[0]).Enabled = false;
         }

Thanks
Princy.

[Herman Gouw]

Hi Princy,

Thank you for your reply.

Now I got the following compilation error message:

Unable to cast object of type 'Telerik.Web.UI.RadDatePicker' to type 'System.Web.UI.WebControls.TextBox'.

Regards,

Herman

[Herman Gouw]

Hi Princy,

I meant to say that I got the following runtime error when I clicked the Edit button:

Unable to cast object of type 'Telerik.Web.UI.RadDatePicker' to type 'System.Web.UI.WebControls.TextBox'.

The web page is available on http://www.gouw.ws/RadGrid

Regards,

Herman

[Tsvetoslav]

Hi Herman,

If you need to disable the box of the bound column you need to cast the first control of the TableCell to a TextBox type. On the other hand, if you should disable the datepicker of the date time column (which evidently is the case given the exception you are getting), you need to cast the control in question to a RadDatePicker type:

    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
      GridEditableItem item = e.Item as GridEditableItem;

      ((RadDatePicker)item["DateTimeColumnUniqueName"].Controls[0]).Enabled = false;

    }

All the best,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Herman Gouw]

Hi Tsvetoslav,

Thank you for your reply.

I just want to disable the box of the bound column and not the DatePicker of the date time column.

The reason being I want to force the user to change the date by using the date picker instead of typing in the new date.

If I use
((TextBox)item["BoundColumnUniqueName"].Controls[0]).Enabled = false; 
I got the following runtime error:

Unable to cast object of type 'Telerik.Web.UI.RadDatePicker' to type 'System.Web.UI.WebControls.TextBox'.

The web page is available on http://www.gouw.ws/RadGrid

Regards,

Herman

[Princy]

Hello Herman,

You can try out the following code to disable the date input of the RadDatePicker when the DateTime column is in edit mode:
c#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = e.Item as GridEditableItem;
            RadDatePicker picker = (RadDatePicker)item["Date"].Controls[0];
            picker.DateInput.Enabled = false;
        }
    }

Thanks
Princy.

[Herman Gouw]

Thanks a lot Princy. It works now.

Best regards,

Herman