Get Client ID of ASP.Net controls inside GridView using jQuery

princy
 
on Aug 05, 2021 01:10 PM
Sample_152588.zip
653 Views

I have an asp.net GridView which has 4 controls (3 dropdown and 1 textbox) and I have a toggle button on top of grid.

When toggle is checked/switched then i want to hide only 2 dropdown (column 2 and column 3) and want to reset columns in grid with respect to data selected in column 1 dropdowns.

I have a separate JS file where all functions are available like on dropdown1 selection what data should be populated in subsequent dropdowns. Now, I am trying to call that javascript function using jquery from my aspx page which is expecting client id of controls.

Using jQuery how I can get ClientID of controls to pass as a parameter to javascript function ?

Please help..

<label class="switch">
    <asp:CheckBox ID="chkOnOff" onChange=toggleChange(this); />
    <span class="slider round"></span>
</label>

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Gender">
            <ItemTemplate>
                <asp:DropDownList ID="genderDdl" CssClass="gender" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
                    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="City">
            <ItemTemplate>
                <asp:DropDownList ID="cityDdl" CssClass="city" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="Mumbai" Value="Mumbai"></asp:ListItem>
                    <asp:ListItem Text="Pune" Value="Pune"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:DropDownList ID="countryDdl" CssClass="country" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="India" Value="India"></asp:ListItem>
                    <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Age">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="age" CssClass="age" Text="1"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<script src="../MyScript.js" type="text/javascript">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
    function toggleChange() {
        if(val.checked == true)
	{
	    $("[id*=GridView1] tr:has(td)").find('.gender').each(function () {
	        if ($(this).val() == '') {
		    //call JS function which is expecting clientId of dropdown control and textbox -- ??
	        }
	    });
	}
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 06, 2021 06:18 AM
on Aug 07, 2021 06:41 AM

Hi princy,

Refer below code.

HTML

<asp:CheckBox ID="chkOnOff" runat="server" onChange="toggleChange(this);" />
<span class="slider round"></span>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Gender">
            <ItemTemplate>
                <asp:DropDownList ID="genderDdl" CssClass="gender" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
                    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="City">
            <ItemTemplate>
                <asp:DropDownList ID="cityDdl" CssClass="city" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="Mumbai" Value="Mumbai"></asp:ListItem>
                    <asp:ListItem Text="Pune" Value="Pune"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:DropDownList ID="countryDdl" CssClass="country" runat="server">
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                    <asp:ListItem Text="India" Value="India"></asp:ListItem>
                    <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Age">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="age" CssClass="age" Text="1"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
    function toggleChange() {
        if (document.getElementById('chkOnOff').checked) {
            $("[id*=GridView1] tr:has(td)").find('.gender').each(function () {
                if ($(this).val() == 'None') {
                    var city_ClientId = $(this).closest('tr').find('.city').attr("id");
                    var country_ClientId = $(this).closest('tr').find('.country').attr("id");
                    var age_ClientId = $(this).closest('tr').find('.age').attr("id");
                    alert("City : " + city_ClientId + "\nCountry : " + country_ClientId + "\nAge : " + age_ClientId);
                    // Do your rest task.
                }
            });
        }
    }
</script>

Code

rotected 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");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Screenshot

For more details refer below article.

 

Get Client ID of ASP.Net control in JavaScript and jQuery