Problem with editable grid created at runtime

[Herman Gouw]

Hi,

I have a grid with 4 columns:

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

Column 2 - an editable GridNumericColumn which displays and accepts an integer

Column 3 - an editable GridBoundColumn which displays and accepts a string

Column 4 - a GridEditCommandColumn

The grid is created at runtime (instead of at design time).

I get the following error message:

"Editor cannot be initialized for column: Date"

when I exit from the edit mode by either clicking Update or Cancel button on the GridEditCommandColumn.

Can you please show me what I have missed or done wrong in my code?

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

The source 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">

        </MasterTableView>

    </telerik:RadGrid>

</div>

</form>

C#:

===

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

{

    private List<Data> _data = null;

    protected void Page_Load(object sender, EventArgs e)

    {

        BuildGrid();

        if (!IsPostBack)

        {

            this._data = Data.Load();

            Session["DATA"] = this._data;

        }

        else

        {

            this._data = (List<Data>)Session["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;

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

            ((Data)(this._data[item.ItemIndex])).Value = int.Parse((item["Value"].Controls[0] as RadNumericTextBox).Text);

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

        }

    }

    private void BuildGrid()

    {

        this.radGrid.Columns.Clear();

        GridDateTimeColumn dateColumn = new GridDateTimeColumn();

        dateColumn.DataField = "Date";

        dateColumn.HeaderText = "Date";

        dateColumn.UniqueName = "Date";

        this.radGrid.Columns.Add(dateColumn);

        this.radGrid.MasterTableView.Columns[0].HeaderStyle.Width = Unit.Percentage(13);

        this.radGrid.MasterTableView.Columns[0].ItemStyle.HorizontalAlign = HorizontalAlign.Left;

        GridNumericColumn valueColumn = new GridNumericColumn();

        valueColumn.DataField = "Value";

        valueColumn.HeaderText = "Value";

        valueColumn.UniqueName = "Value";

        this.radGrid.Columns.Add(valueColumn);

        this.radGrid.MasterTableView.Columns[1].HeaderStyle.Width = Unit.Percentage(13);

        this.radGrid.MasterTableView.Columns[1].ItemStyle.HorizontalAlign = HorizontalAlign.Left;

        GridBoundColumn descriptionColumn = new GridBoundColumn();

        descriptionColumn.DataField = "Description";

        descriptionColumn.HeaderText = "Description";

        descriptionColumn.UniqueName = "Description";

        this.radGrid.Columns.Add(descriptionColumn);

        this.radGrid.MasterTableView.Columns[2].HeaderStyle.Width = Unit.Percentage(64);

        this.radGrid.MasterTableView.Columns[2].ItemStyle.HorizontalAlign = HorizontalAlign.Left;

        GridEditCommandColumn editColumn = new GridEditCommandColumn();

        editColumn.ButtonType = GridButtonColumnType.LinkButton;

        editColumn.UniqueName = "Edit";

        this.radGrid.Columns.Add(editColumn);   

    }

}

public class Data

{

    public DateTime Date { get; set; }

    public int Value { get; set; }

    public string Description { get; set; }

    public Data(DateTime date, int value, string description)

    {

        Date = date;

        Value = value;

        Description = description;

    }

    public static List<Data> Load()

    {

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

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

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

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

        return data;

    }

}

Thanks & regards,

Herman Gouw

Skype: hermangouw

[Yavor]

Hi Herman,

I reviewed the code posted, and noticed that you are not properly creating the control structure.
To see more information on the matter, please refer to the following topic:

http://www.telerik.com/help/aspnet-ajax/grdprogrammaticcreation.html

I hope it gets you started properly.

Greetings,
Yavor
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 Yavor,

Thank you for your reply.

 I have read the topic that you gave me and modified the web page accordingly using ItemTemplate/EditItemTemplate of GridTemplateColumn.

For simplicity, the new grid has 2 columns only:

Column 1 - an editable GridTemplateColumn which displays and accepts a string
Column 2 - a GridEditCommandColumn

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

I got the following runtime error message

Specified argument was out of the range of valid values.

Parameter name: index

when I clicked the Update on the GridEditCommandColumn.

Can you please show me how to extract the new description in radGrid_UpdateCommand?

The new source code is given below:

1. The code behind (BuildGrid and radGrid_UpdateCommand)

private void BuildGrid()
{
    this.radGrid.Columns.Clear();

    GridTemplateColumn description = new GridTemplateColumn();
    description.DataField = "Description";
    description.HeaderText = "Description";
    description.UniqueName = "Description";
    description.ItemTemplate = new ItemTemplate("Description");
    description.EditItemTemplate = new EditTemplate("Description");
    this.radGrid.Columns.Add(description);

    GridEditCommandColumn columnEdit = new GridEditCommandColumn();
    columnEdit.ButtonType = GridButtonColumnType.LinkButton;
    columnEdit.UniqueName = "Edit";
    this.radGrid.Columns.Add(columnEdit);
}

protected void radGrid_UpdateCommand(object sender, GridCommandEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem item = e.Item as GridEditableItem;
        ((Data)(this._data[item.ItemIndex])).Description = (item["Description"].Controls[0] as TextBox).Text;
    }
}

2. The template controls (ItemTemplate and EditTemplate):

public class ItemTemplate : ITemplate
{
    protected string Name { get; set; }

    public ItemTemplate(string name)
    {
        Name = name;
    }

    public void InstantiateIn(Control container)
    {
        Label label = new Label();
        label.ID = Name;
        label.DataBinding += new EventHandler(ItemTemplate_DataBinding);
        container.Controls.Add(label);
    }

    protected void ItemTemplate_DataBinding(object sender, EventArgs e)
    {
        Label label = (Label)sender;
        GridDataItem container = (GridDataItem)label.NamingContainer;
        label.ID = Name;
        label.Text = ((Web.Apps.RadGrid.Data)container.DataItem).Description.ToString();
    }
}

public class EditTemplate : IBindableTemplate, ITemplate
{
    protected string Name { get; set; }

    public EditTemplate(string name)
    {
        Name = name;
    }

    public void InstantiateIn(Control container)
    {
        RadTextBox radTextBox = new RadTextBox();
        radTextBox.ID = Name;
        radTextBox.Width = Unit.Percentage(100);
        radTextBox.DataBinding += new EventHandler(EditTemplate_DataBinding);
        container.Controls.Add(radTextBox);
    }

    public IOrderedDictionary ExtractValues(Control container)
    {
        OrderedDictionary orderedDictionary = new OrderedDictionary();
        orderedDictionary.Add(Name, ((GridTableCell)container.Controls[0]).Text);
        return orderedDictionary;
    }

    public void EditTemplate_DataBinding(object sender, EventArgs e)
    {
        RadTextBox radTextBox = (RadTextBox)sender;
        GridEditableItem container = (GridEditableItem)radTextBox.NamingContainer;
        radTextBox.ID = Name;
        radTextBox.Text = ((Web.Apps.RadGrid.Data)container.DataItem).Description.ToString();
        radTextBox.Width = Unit.Percentage(100);
    }
}

Thanks & regards,

Herman Gouw

Skype: hermangouw

[Yavor]

Hello Herman,

At this point, in order to properly pinpoint the issue at hand, it will be best if you open a formal support ticket, and send us a small working project, demonstrating your logic, and showing the unwanted behavior. I will debug it locally, and get back to you with more information.

Kind regards,
Yavor
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.