This is a migrated thread and some comments may be shown as answers.

RadGrid Multirow Edit Multiple controls on a column

3 Answers 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DRG
Top achievements
Rank 1
DRG asked on 05 Jan 2014, 04:17 AM
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 ?

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 06 Jan 2014, 04:02 AM
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
0
DRG
Top achievements
Rank 1
answered on 15 Feb 2014, 09:50 PM
After the postback all the records edited are lost. 

Thanks.
0
Viktor Tachev
Telerik team
answered on 19 Feb 2014, 04:24 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
DRG
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
DRG
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or