locked
Using placeholders to display multiple dropdowns which are related from table data RRS feed

  • Question

  • User2129219356 posted

    Hi there,

    I currently have a table in the database which i use to display dropdowns, i am currrently trying to create a interface to manage this table in the same format which it is displayed within my application.

    So i have a table with 3 main columns, ID, CLIENT ID and ParentID, I want to be able to show a dropdown menu which then can drill down each level within the table to show its related parentIDS. So in the first case i want the first dropdown to select columns with a parentid of 0 or NULL from when the user selects this it will show the next dropdown menu which will show all parentids of the first selected ID which the relationship is. For example (dropdown 1 - ID = 1 ParentID = 0) then (dropdown 2 ID- WHATEVER and ParentID = ID of Dropdown1) and this can go on and on and on for other dropdowns till there is no relationship. I want to be able to add a row to the table so need to get the ID of the dropdown menus. I will be looking to create, add, delete and updates for these rows so after a dropdown is displayed i will be showing a 'add' / edit link next to each dropdown which will then show a panel with text boxs to add to or edit.  I am having trouble finding the control for the dropdown so i can get the value, can anyone help? and if so does anyone else have any useful posts i can relate to, which will help me create what i am looking to do? (Some code below) And if i aint taking the right approach if you could point me in the correct direction that would be great, this is my first time attemping something like this so any guidance will be great.

    Thanks

        Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            If ControlCount <> 0 Then
                RecreateControls()
            End If
    
            If Not Page.IsPostBack Then
    
    
                Button_Delete.Attributes.Add("onclick", "return confirm('Are you sure you want to delete this user ?');")
    
            End If
    
        End Sub
      Private Property ControlCount As Int32
            Get
                If ViewState("ControlCount") Is Nothing Then
                    ViewState("ControlCount") = 0
                End If
                Return DirectCast(ViewState("ControlCount"), Int32)
            End Get
            Set(ByVal value As Int32)
                ViewState("ControlCount") = value
            End Set
        End Property
    
    
    
        Private Sub RecreateControls()
            addControls(ControlCount)
        End Sub
    
        Private Sub addControls(ByVal count As Int32)
            For i As Int32 = 1 To count
                ' Dim btn As New DropDownList() ' i use a Button as example'
                ' btn.ID = "Button_" & Me.Container.Controls.Count
                'btn.Text = "Button " & Me.Container.Controls.Count
                Dim tCaseConfig As DataTable = tools.ClientCaseConfig(Session("ClientID"))
                Dim v As New DataView
    
    
                v.Table = tCaseConfig
                'If count = 1 Then
                '    v.RowFilter = "ccParentID ='0' OR ccParentID = NULL"
                'Else
                '    ' v.RowFilter = "ccParentID = " & FindControl("DropDownList2")
                'End If
    
                If count = 1 Then
    
                    v.RowFilter = "ccParentID ='0' OR ccParentID = NULL"
                    Dim DropDownList1 As New DropDownList()
                    With DropDownList1
                        .DataSource = v.ToTable(True, "ccNAME", "ccID")
                        .DataTextField = "ccNAME"
                        .DataValueField = "ccID"
                        .DataBind()
                        .AutoPostBack = True
                        _ui.ControlBuilder_DropDownList_AddRow(DropDownList1, "select...", 0, False, True)
                    End With
    
                    AddHandler DropDownList1.SelectedIndexChanged, AddressOf DdlAddControls1_SelectedIndexChanged
                    Me.PlaceHolder1.Controls.Add(DropDownList1)
    
                    'Session("SESSION") = 911
                    ' Dim Value As DropDownList = ("DropDownList1").
    
                    'Dim Value As String = FindControl("DropDownList1").SkinID;eee
                    'DropDownList1.Text = Session("SESSION")
                    'Dim Value As String = PlaceHolder1.Page.FindControl("DropDownList1").ToString
                    'Session("SESSION") = Value
                End If
            Next
        End Sub
    
        Private Sub Click(ByVal sender As Object, ByVal e As EventArgs)
            ' LblInfo.Text = DirectCast(sender, Button).Id & "clicked"
        End Sub
    
        Protected Sub DdlAddControls_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList_Clients.SelectedIndexChanged
            'Dim newControlCount As Int32 = Int32.Parse(DropDownList_Clients.SelectedValue)
            Dim newControlCount As Int32 = 1
            addControls(newControlCount)
            ControlCount += newControlCount
    
        End Sub
    
        Protected Sub DdlAddControls1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            'Dim newControlCount As Int32 = Int32.Parse(DropDownList_Clients.SelectedValue)
            ' Session("SESSION") = Me.drop
            ' Dim DropDownLIST = DirectCast(sender, "DropDownList1")
            'Session("SESSION1") = DirectCast(item.FindControl("DropDownList1"), System.Web.UI.WebControls.DropDownList)
            Dim newControlCount As Int32 = 1
            addControls(newControlCount)
            ControlCount += newControlCount
    
            Dim tCaseConfig As DataTable = tools.ClientCaseConfig(Session("ClientID"))
            Dim v As New DataView
    
    
            v.Table = tCaseConfig
    
    
            'v.RowFilter = "ccParentID=" & Session("SESSION1")
            ' v.RowFilter = "ccParentID=" & PlaceHolder1.FindControl("DropDownList1")
            Dim DropDownList2 As New DropDownList()
            With DropDownList2
                .DataSource = v.ToTable(True, "ccNAME", "ccID")
                .DataTextField = "ccNAME"
                .DataValueField = "ccID"
                .DataBind()
                .AutoPostBack = True
                _ui.ControlBuilder_DropDownList_AddRow(DropDownList2, "select...", 0, False, True)
            End With
    
            AddHandler DropDownList2.SelectedIndexChanged, AddressOf DdlAddControls1_SelectedIndexChanged
            Me.PlaceHolder1.Controls.Add(DropDownList2)
    
        End Sub

    Tuesday, May 6, 2014 12:13 PM

Answers

  • User-417640953 posted

    Hi heron6,

    Thank you post the issue to our forum.

    According to your descriptioin, I see you want to complete the multiple cascade dropdownlists in asp.net.

    For this issue, I suggest you using the Ajax to do that like below demo made for your issue.

    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            var order = 0;
            function CreateDropdownlist(parentId)
            {   
                $.ajax({
                    type: "Post", 
                    contentType: "application/json", 
                    url: "MultipleCascadeDropDown.aspx/DDLKeyAndValue",
                    data: "{ParentID:'" + parentId + "'}",
                    dataType: 'Json',
                    success: function (result) {
                       
                        var data = eval(result.d);
                        var s = $('<select order="' + order + '" onchange="GetChildDropDown(this)" />');
                        $('<option />', { value: "", text:"Select...." }).appendTo(s);
                        $.each(data, function (index, element) {
    
                            $('<option />', { value: data[index].Key, text: data[index].Value }).appendTo(s);
                        });  
                        s.appendTo('#DropdownlistContainer'); 
                        order++;
                       
                    }
                });
             
    
            }
            //add children dropdownlist
            function GetChildDropDown(e) { 
                if ($(e).val() != "") { 
                    RemoveDoprdown($(e).attr("order"));
                    CreateDropdownlist($(e).val());
                }
            }
            //remove children dropdownlist
            function RemoveDoprdown(myorder) {
              
                $("#DropdownlistContainer").find("select").each(function () {
                    
                    if (parseInt($(this).attr("order")) > parseInt(myorder)) {
                        $(this).remove(); 
                        order--;
                    }
                });
            }
            //add the first dropdownlist
            CreateDropdownlist(0);
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="DropdownlistContainer">  
        </div>
        </form>
    </body>

    code behind:

      public static DataTable testdata = null;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    //test data suppose comes from database
                    testdata = new DataTable();
                    testdata.Columns.Add("ID");
                    testdata.Columns.Add("Value");
                    testdata.Columns.Add("ParentID");
                    testdata.Rows.Add(1,"1",0);
                    testdata.Rows.Add(2, "2", 0);
                    testdata.Rows.Add(3, "3", 1);
                    testdata.Rows.Add(4, "4", 1);
                    testdata.Rows.Add(5, "5", 2);
                    testdata.Rows.Add(6, "6", 2);
                    testdata.Rows.Add(7, "7", 3);
                    testdata.Rows.Add(8, "8", 3);
                    testdata.Rows.Add(9, "9", 7);
                    testdata.Rows.Add(10, "10", 7);
                
                }
    
            }
    
            [WebMethod]
            public static string DDLKeyAndValue(int ParentID) 
            {
                
                var result2 = from r in testdata.Select("ParentID=" + ParentID)
                              select new { Key = r["ID"], Value = r["Value"] };
    
               return JsonConvert.SerializeObject(result2);
            
            }

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 7, 2014 6:23 AM

All replies

  • User2129219356 posted

    Is anyone able to help?

    Wednesday, May 7, 2014 4:35 AM
  • User-417640953 posted

    Hi heron6,

    Thank you post the issue to our forum.

    According to your descriptioin, I see you want to complete the multiple cascade dropdownlists in asp.net.

    For this issue, I suggest you using the Ajax to do that like below demo made for your issue.

    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            var order = 0;
            function CreateDropdownlist(parentId)
            {   
                $.ajax({
                    type: "Post", 
                    contentType: "application/json", 
                    url: "MultipleCascadeDropDown.aspx/DDLKeyAndValue",
                    data: "{ParentID:'" + parentId + "'}",
                    dataType: 'Json',
                    success: function (result) {
                       
                        var data = eval(result.d);
                        var s = $('<select order="' + order + '" onchange="GetChildDropDown(this)" />');
                        $('<option />', { value: "", text:"Select...." }).appendTo(s);
                        $.each(data, function (index, element) {
    
                            $('<option />', { value: data[index].Key, text: data[index].Value }).appendTo(s);
                        });  
                        s.appendTo('#DropdownlistContainer'); 
                        order++;
                       
                    }
                });
             
    
            }
            //add children dropdownlist
            function GetChildDropDown(e) { 
                if ($(e).val() != "") { 
                    RemoveDoprdown($(e).attr("order"));
                    CreateDropdownlist($(e).val());
                }
            }
            //remove children dropdownlist
            function RemoveDoprdown(myorder) {
              
                $("#DropdownlistContainer").find("select").each(function () {
                    
                    if (parseInt($(this).attr("order")) > parseInt(myorder)) {
                        $(this).remove(); 
                        order--;
                    }
                });
            }
            //add the first dropdownlist
            CreateDropdownlist(0);
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="DropdownlistContainer">  
        </div>
        </form>
    </body>

    code behind:

      public static DataTable testdata = null;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    //test data suppose comes from database
                    testdata = new DataTable();
                    testdata.Columns.Add("ID");
                    testdata.Columns.Add("Value");
                    testdata.Columns.Add("ParentID");
                    testdata.Rows.Add(1,"1",0);
                    testdata.Rows.Add(2, "2", 0);
                    testdata.Rows.Add(3, "3", 1);
                    testdata.Rows.Add(4, "4", 1);
                    testdata.Rows.Add(5, "5", 2);
                    testdata.Rows.Add(6, "6", 2);
                    testdata.Rows.Add(7, "7", 3);
                    testdata.Rows.Add(8, "8", 3);
                    testdata.Rows.Add(9, "9", 7);
                    testdata.Rows.Add(10, "10", 7);
                
                }
    
            }
    
            [WebMethod]
            public static string DDLKeyAndValue(int ParentID) 
            {
                
                var result2 = from r in testdata.Select("ParentID=" + ParentID)
                              select new { Key = r["ID"], Value = r["Value"] };
    
               return JsonConvert.SerializeObject(result2);
            
            }

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 7, 2014 6:23 AM