[CLOSED] hide controls on radio button selection change

[sharmav1]

I have a group of 4 radio buttons, and I am using change direct event to create dynamic content upon their click/selection. now, I don't know how to hide/show that dynamic content upon radio button checked/unchecked.

Below is my code:

controller :

public class SearchController : Controller
    {
        // GET: AddTrainee
        public ActionResult Index()
        {
            return View();
        }

        public AjaxResult AddUserDropDownToSearch()
        {
            AjaxResult response = new AjaxResult();
            
            Panel pnlToSearchEmployee = MakePanel("Search by Name: ");
            ComboBox cboNames = new ComboBox();
            pnlToSearchEmployee.Add(cboNames);
            response.Script = pnlToSearchEmployee.ToScript(RenderMode.AddTo, "Container1");
            
            return response;
        }

        private static Panel MakePanel(string title)
        {
            Panel pnlToSearchEmployee = new Panel()
            {
                Title = title,
                Layout = LayoutType.HBox.ToString(),
                MarginSpec = "10",
                ID = "pnlToSearchEmployee",
                MaxWidth = 1600,
                AutoScroll = true
            };
            return pnlToSearchEmployee;
        }
    }

View:

@
{
    Layout = null;
    var X = Html.X();
}

@(X.Window().ID("AddSearch").Title("Add Search").Layout(LayoutType.Fit).Height(600).Width(800).Modal(true).Hidden(true)
    .Items
    (

        X.Panel().Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
    .Items
    (
        X.FormPanel().Layout(LayoutType.HBox).Border(false).MinWidth(640).BodyBorder(0).BodyStyle("padding:5px 5px 5px;").Flex(1)
        .Items
        (
            X.Panel().Flex(1).Layout(LayoutType.Anchor).Border(false).BodyBorder(0)
            .Items
            (
                       X.RadioGroup()
                            .FieldLabel("Category: ")
                            .ColumnsNumber(4)
                            .AutomaticGrouping(false)
                            .Items(
                                X.Radio().Name("search").ID("rdFName").InputValue("0").BoxLabel("First Name")
                                    .DirectEvents(d => { d.Change.Url = Url.Action("AddUserDropDownToSearch", "Search"); }),
                                
                                X.Radio().Name("search").ID("rdlName").InputValue("1").BoxLabel("Last Name")
                                    .DirectEvents(d => { d.Change.Url = Url.Action("AddUserDropDownToSearch", "Search"); }),
                                X.Radio().Name("search").ID("rdLoc").InputValue("2").BoxLabel("Location")
                                    .DirectEvents(d => { d.Change.Url = Url.Action("AddUserDropDownToSearch", "Search"); }),
                                X.Radio().Name("search").ID("rdDep").InputValue("3").BoxLabel("Department")
                                    .DirectEvents(d => { d.Change.Url = Url.Action("AddUserDropDownToSearch", "Search"); })
                            ),

                                X.Container().ID("Container1")
                       
            )

        )
          )
    ))

so upon selecting first name radio button, a drop down will appear, and then if I select Last name radio button, then last name dynamic drop down should appear and first name drop down should be hidden...same with other two radio buttons as well. how to do that??

Thanks

[Daniil]

Hi @sharmav1,

Please try adding this

X.GetCmp<Ext.Net.Container>("Container1").RemoveAll();

to the controller action.

The full source of the controller action would be:

public AjaxResult AddUserDropDownToSearch()
{
    AjaxResult response = new AjaxResult();

    Panel pnlToSearchEmployee = MakePanel("Search by Name: ");
    ComboBox cboNames = new ComboBox();
    pnlToSearchEmployee.Add(cboNames);

    X.GetCmp<Ext.Net.Container>("Container1").RemoveAll();
    response.Script = pnlToSearchEmployee.ToScript(RenderMode.AddTo, "Container1");

    return response;
}