Dear SirI am trying to fillup DataGrid DropDownList from another Dropdown list outside of DataGrid using Jquery but its not filled upI want to dropsown fillup idddlFromBranch from iddrpBranchCode based on selection idddlFromLocationTypeltselect name34ctl00ContentPlaceHolder1drpBranchCode34 id34ContentPlaceHolder1drpBranchCode34gt ltoption value3434gtltoptiongt ltoption value34AURANGABAD34gtAURANGABADltoptiongt

Hi AmitabhaCheck this example Now please take its reference and correct your codeNote For this sample i have used temporary DataTable For more details refer Dynamically create DataTable and bind to GridView in ASPNet HTMLltaspDropDownList ID34ddlFormCountry34 runat34server34gt ltaspListItem Text34Select34 Value3434 gt ltaspListItem Text34India34 Value34India34 gt ltaspListItem Text34China34 Value34China34 gt ltaspListItem Text34USA34 Value34USA34 gt ltaspListItem Text34UK34 Value34UK34 gt ltaspListItem Text34Canada34 Value34Canada34 gt ltaspListItem Text34Pakistan34 Value34Pakistan34 gtltaspDropDownListgtlthr gtltaspDataGrid ID34dataGridView134 runat34server34 AutoGenerateColumns34false34 CellPadding34334 Width3410034 HeaderStyleBackColor34Slate

Clone (Copy) DropDownList Items in ASP.Net DataGrid using jQuery

Amitabha

SOLVED CLOSED ACTIVE ANSWERED
User: Amitabha
Posted: on Jun 19, 2021 12:03 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3601
Sample Code: Download

Dear Sir

I am trying to fillup DataGrid DropDownList from another Dropdown list outside of DataGrid using Jquery but it's not filled up.

I want to dropsown fillup $('[id*=ddlFromBranch]') from $('[id*=drpBranchCode]') based on selection $("[id*=ddlFromLocationType]")

<select name="ctl00$ContentPlaceHolder1$drpBranchCode" id="ContentPlaceHolder1_drpBranchCode">
    <option value=""></option>
    <option value="AURANGABAD">AURANGABAD</option>
    <option value="AGRA">AGRA</option>
    <option value="PIRANA">PIRANA</option>	
</select>

<asp:DataGrid ID="gridRate" CssClass="table table-striped table-bordered" runat="server" OnItemDataBound="gridRate_ItemDataBound"
    AutoGenerateColumns="false" CellPadding="3" Width="100%" HeaderStyle-BackColor="SlateGray"
    HeaderStyle-Font-Size="X-Small" HeaderStyle-Font-Names="Calisto MT" ItemStyle-Font-Size="Small" ItemStyle-Font-Names="Calisto MT"
    HeaderStyle-ForeColor="White">
    <Columns>
        <asp:TemplateColumn HeaderText="From Division">
            <ItemTemplate>
                <asp:DropDownList ID="ddlFromDivision" runat="server" CssClass="form-control selectpicker"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="From Location Type">
            <ItemTemplate>
                <asp:DropDownList ID="ddlFromLocationType" runat="server"
                    CssClass="form-control selectpicker">
                </asp:DropDownList>
                <input type="hidden" id="hdnFromLocationType" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "FROM_LOCATION_TYPE") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="From Location">
            <ItemTemplate>
                <asp:TextBox ID="txtFromBranch" runat="server" CssClass="form-control hidden" Width="50px" Text='<%# DataBinder.Eval(Container.DataItem, "FROM_LOCATION") %>'></asp:TextBox>
                <asp:DropDownList ID="ddlFromBranch" runat="server" CssClass="form-control selectpicker" data-dropup-auto="false" data-live-search="true"></asp:DropDownList>
                <input type="hidden" id="hdnFromBranch" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "FROM_LOCATION") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="To Division">
            <ItemTemplate>
                <asp:DropDownList ID="ddlToDivision" onkeydown="return tab(this);" runat="server" CssClass="form-control selectpicker"></asp:DropDownList>
                <input type="hidden" id="hdnToDivision" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "TO_DIVISION") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="To Location Type">
            <ItemTemplate>
                <asp:DropDownList ID="ddlToLocationType" runat="server" CssClass="form-control selectpicker">
                </asp:DropDownList>
                <input type="hidden" id="hdnToLocationType" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "TO_LOCATION_TYPE") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="To Location">
            <ItemTemplate>
                <asp:TextBox ID="txtToBranch" runat="server" CssClass="form-control hidden" Text='<%# DataBinder.Eval(Container.DataItem, "TO_LOCATION") %>'></asp:TextBox>
                <asp:DropDownList ID="ddlToBranch" runat="server" CssClass="form-control selectpicker" Width="130px" data-dropup-auto="false" data-live-search="true"></asp:DropDownList>
                <input type="hidden" id="hdnToBranch" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "TO_LOCATION") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="Services">
            <ItemTemplate>
                <asp:DropDownList ID="ddlServices" onkeydown="return tab(this);" runat="server" CssClass="form-control selectpicker" Width="170px"></asp:DropDownList>
                <input type="hidden" id="hdnServices" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "SERVICE") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="UOM">
            <ItemTemplate>
                <asp:DropDownList ID="ddlUOM" onkeydown="return tab(this);"
                    runat="server" CssClass="form-control selectpicker"
                    Width="150px">
                </asp:DropDownList>
                <input type="hidden" id="hdnUOM" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "UOM") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="UOM 2">
            <ItemTemplate>
                <asp:DropDownList ID="ddlUOM2" runat="server" CssClass="form-control selectpicker" data-dropup-auto="false" data-live-search="true" Width="135px"></asp:DropDownList>
                <input type="hidden" id="hdnUOM2" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "UOM_2") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>  
        <asp:TemplateColumn HeaderText="Currency">
            <ItemTemplate>
                <asp:DropDownList ID="ddlCurrency" onchange="return GridValidation(this);" runat="server" CssClass="form-control selectpicker" Width="70px"></asp:DropDownList>
                <input type="hidden" id="hdnCurrency" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "CURRENCY") %>' />
            </ItemTemplate>
        </asp:TemplateColumn>        
        <asp:BoundColumn DataField="SR_NO" HeaderText="SrNo" Visible="False"></asp:BoundColumn>
    </Columns>
</asp:DataGrid>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=ddlFromLocationType]").change(function () {
            var row = $(this).closest("tr");
            var FrLocCat = $(this).val();
            var FrmBranch = row.find("[id*=ddlToBranch]").val();
            if (FrLocCat == "BRAN") {
                toastr.info('Branch to Branch Rate');
                var Branch = $('[id*=drpBranchCode]').val();
                $('[id*=ddlFromBranch]').selectpicker('val', Branch);

            }
            if (FrLocCat == "CNTR") {
                toastr.info('Controlling to Controlling Rate ');
                var Contr = $('[id*=drpControlling]').val();
                $('[id*=ddlFromBranch]').selectpicker('val', Contr);
                row.find("[id*=ddlFromBranch]").val('default').selectpicker("refresh");
            }
        });
    });
</script>

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Jun 19, 2021 04:16 AM
Modified: on Jan 25, 2022 09:10 AM
Report

Hi Amitabha,

Check this example. Now please take its reference and correct your code.

Note: For this sample i have used temporary DataTable. For more details refer Dynamically create DataTable and bind to GridView in ASP.Net.

HTML

<asp:DropDownList ID="ddlFormCountry" runat="server">
    <asp:ListItem Text="Select" Value="" />
    <asp:ListItem Text="India" Value="India" />
    <asp:ListItem Text="China" Value="China" />
    <asp:ListItem Text="USA" Value="USA" />
    <asp:ListItem Text="UK" Value="UK" />
    <asp:ListItem Text="Canada" Value="Canada" />
    <asp:ListItem Text="Pakistan" Value="Pakistan" />
</asp:DropDownList>
<hr />
<asp:DataGrid ID="dataGridView1" runat="server"
    AutoGenerateColumns="false" CellPadding="3" Width="100%" HeaderStyle-BackColor="SlateGray"
    HeaderStyle-Font-Size="X-Small" HeaderStyle-Font-Names="Calisto MT" ItemStyle-Font-Size="Small"
    ItemStyle-Font-Names="Calisto MT" HeaderStyle-ForeColor="White">
    <Columns>
        <asp:TemplateColumn HeaderText="Name">
            <ItemTemplate>
                <asp:DropDownList ID="ddlName" runat="server">
                    <asp:ListItem Text="Select" Value="" />
                    <asp:ListItem Text="John Hammond" Value="1" />
                    <asp:ListItem Text="Mudassar Khan" Value="2" />
                    <asp:ListItem Text="Suzanne Mathews" Value="3" />
                    <asp:ListItem Text="Robert Schidner" Value="4" />
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="Country">
            <ItemTemplate>
                <asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:BoundColumn DataField="Id" HeaderText="Id" Visible="False"></asp:BoundColumn>
    </Columns>
</asp:DataGrid>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=ddlName]").change(function () {
            var row = $(this).closest("tr");
            var ddlCountry = row.find("[id*=ddlCountry]");
            $(ddlCountry).empty().append($('#ddlFormCountry').html());
            $(ddlCountry).val($('#ddlFormCountry').find('option:selected').val());
        });
    });
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3]
        {
            new DataColumn("Id"),
            new DataColumn("Name"),
            new DataColumn("Country")
        });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        dataGridView1.DataSource = dt;
        dataGridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Id"),
                            New DataColumn("Name"),
                            New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        dataGridView1.DataSource = dt
        dataGridView1.DataBind()
    End If
End Sub

Screenshot

Clone (Copy) DropDownList Items in ASP.Net DataGrid using jQuery

Company

Explore

Follow us

Contact Us