RadGrid Multirow Edit Multiple controls on a column

[DRG]

For Telerik RadGrid Multirow edit, When editing a row, I have a DropDownList in the grid column. Options can be Date, Number or Text. Based on the option selected, the next column should render the control (date picker, numeric textbox, textbox). How to achieve this functionality ?

[Princy]

Hi,

Please try the below sample code snippet to get controls in editmode based on dropdownlist selection:

ASPX:

<telerik:GridTemplateColumn HeaderText="Controls" Display="false">
    <EditItemTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Text="Text"></asp:ListItem>
            <asp:ListItem Text="Date"></asp:ListItem>
            <asp:ListItem Text="Number"></asp:ListItem>
        </asp:DropDownList>
    </EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />

C#:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList drop = (DropDownList)sender;
    string control = drop.SelectedItem.ToString();
    GridEditableItem edit = (GridEditableItem)drop.NamingContainer;
    TextBox txt = (TextBox)edit["Name"].Controls[0];//Access the textbox in editmode
    if (control == "Date")
    {
        txt.Visible = false;
        RadDatePicker datepicker = new RadDatePicker();
        datepicker.ID = "RadDatePicker1";
        edit["Name"].Controls.Add(datepicker);
    }
    else if (control == "Number")
    {
        txt.Visible = false;
        RadNumericTextBox numtxt = new RadNumericTextBox();
        numtxt.ID = "RadNumericTextBox1";
        edit["Name"].Controls.Add(numtxt);
    }
    else
    {
        txt.Visible = true;
    }
}

Thanks,
Princy

[DRG]

After the postback all the records edited are lost. 

Thanks.

[Viktor Tachev]

Hello,

The described behavior is not available out of the box for RadGrid. However you could achieve such functionality using GridTemplateColumns for the DropDownList and the control that would be added based on the selection from the dropdown.

<telerik:GridTemplateColumn HeaderText="Controls" Display="false">
    <EditItemTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Text="-Select Item-" Value="0"></asp:ListItem>
            <asp:ListItem Text="Text" Value="Text"></asp:ListItem>
            <asp:ListItem Text="Date" Value="Date"></asp:ListItem>
            <asp:ListItem Text="Number" Value="Number"></asp:ListItem>
        </asp:DropDownList>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Name" UniqueName="Name" HeaderText="Name">
    <ItemTemplate>
        <asp:Label Text='<%# Eval("Name") %>' runat="server" />
    </ItemTemplate>
    <EditItemTemplate>
        <asp:PlaceHolder runat="server" ID="PlaceHolder1" />
    </EditItemTemplate>
</telerik:GridTemplateColumn>

In the handler for SelectedIndexChanged event you could set a global variable holding the selected value and rebind the RadGrid:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList ddl = (DropDownList)sender;
    string control = ddl.SelectedItem.ToString();
    GridEditableItem editItem = (GridEditableItem)ddl.NamingContainer;

    PlaceHolder placeHolder = editItem["Name"].FindControl("PlaceHolder1") as PlaceHolder;
    Session["SelectedValue"] = control;

    RadGrid1.Rebind();
}

Adding the control could be implemented in the ItemCreated event handler for RadGrid.

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
    {
        GridEditFormItem editItem = e.Item as GridEditFormItem;

        DropDownList drop = editItem.FindControl("DropDownList1") as DropDownList;

        if (Session["SelectedValue"] != null)
        {
            Control controlToAdd = new Control();

            switch (Session["SelectedValue"].ToString())
            {
                case "Text":
                    controlToAdd = new TextBox();
                    controlToAdd.ID = "TextBox1";
                    break;
                case "Date":
                    controlToAdd = new RadDatePicker();
                    controlToAdd.ID = "RadDatePicker1";
                    break;
                case "Number":
                    controlToAdd = new RadNumericTextBox();
                    controlToAdd.ID = "RadNumericTextBox1";
                    break;
                default:
                    break;
            }

            (editItem["Name"].FindControl("PlaceHolder1") as PlaceHolder).Controls.Add(controlToAdd);
        }
    }
}

In order for the new values to be added you would need to handle the UpdateCommand and get the value depending on the control that is rendered.

protected void RadGrid1_UpdateCommand(object sender, GridCommandEventArgs e)
{
    var editItem = e.Item as GridEditFormItem;

    DataTable newData = (DataTable)Session["GridData"];

    DataRow[] row = newData.Select("ID = " + (editItem["ID"].Controls[0] as TextBox).Text);

    row[0]["ID"] = (editItem["ID"].Controls[0] as TextBox).Text;

    Control control = (editItem["Name"].FindControl("PlaceHolder1") as PlaceHolder).Controls[0] as Control;

    switch (control.GetType().Name)
    {
        case "TextBox":
            row[0]["Name"] = (control as TextBox).Text;
            break;
        case "RadDatePicker":
            row[0]["Name"] = (control as RadDatePicker).SelectedDate;
            break;
        case "RadNumericTextBox":
            row[0]["Name"] = (control as RadNumericTextBox).Text;
            break;
        default:
            break;
    }

    row[0]["Description"] = (editItem["Description"].Controls[0] as TextBox).Text;

    newData.AcceptChanges();

    Session["GridData"] = newData;
    Session["SelectedValue"] = null;
}

For convenience I am also attaching a sample project illustrating the approach.

Regards,
Viktor Tachev
Telerik