Tutorial House
  • Home
  • .Net
    • Asp.Net Questions
    • C#.Net
    • Vb.Net
    • Reporting
    • Sample Applications
  • SQL
    • Sql Questions
  • HTML
  • Scripts
  • Others
    • Links
    • Errors
    • Tips
    • EBooks
  • Jquery

show textbox on radio button selection in gridview

7/4/2012

0 Comments

 
In this article i will explain that how can we show TextBox on selection of radio button in gridview.

In this article two columns will display in gridview. In one column radio button is showing and in second column Textbox will show. But i want that when user select radio button then TextBox should show otherwise it should invisible. So below i will explain how can we accomplish this.



following is the javascript function that will show textbox.
<script>
        function ShowText(radio, textBox) {
            var RadioButton = document.getElementById(radio);
            if (RadioButton.checked == true) {
                document.getElementById(textBox).style.visibility = "visible";
            }
        }
 </script>

following is html code to show gridview on page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            CellPadding="4" ForeColor="#333333" GridLines="None" 
            onrowdatabound="GridView1_RowDataBound">
        <AlternatingRowStyle BackColor="White" />
    <Columns>
       <asp:TemplateField>
        <ItemTemplate>
            <asp:RadioButton ID="aRadioButton" runat="server" Text="test" Checked="false"/>
            <asp:Label ID="Label1" runat="server" Text='Show'></asp:Label>
        </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
        <ItemTemplate>
            <asp:TextBox ID="TextBox3" runat="server" ></asp:TextBox>
        </ItemTemplate>
        </asp:TemplateField>
     </Columns>
        <EditRowStyle BackColor="#2461BF" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#EFF3FB" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F5F7FB" />
        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
        <SortedDescendingCellStyle BackColor="#E9EBEF" />
        <SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>


following method is page_load event that will fill the gridview. In this i am adding only one columns value for just explaination.
 
protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add();
            dt.Rows[i]["ID"] = i;
        }
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }

folloing method will add the onclick attribute to radio button. It will set calling of javascript function.
this is rowdatabound method of gridview so for each row of gridview it will set this functionality.


    protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            RadioButton aRadioButton = (RadioButton)e.Row.FindControl("aRadioButton");
            TextBox textBox1 = (TextBox)e.Row.FindControl("TextBox3");
            aRadioButton.Attributes.Add("onClick", "JavaScript:ShowText('" + aRadioButton.ClientID + "','" + textBox1.ClientID + "')");
        }
    }


after doing above all methods and javascript function we will run the application and we will get the desire output.

I hope it will usefull to you.
0 Comments

select radio button in gridview through keyboard's keys using JavaScript

7/4/2012

0 Comments

 
In this article i will explain how we can select radio button in gridview through keys of keyboard using javascript. 

I was working on asp.net application. i had requirement of selecting radio button in gridview from keyboard.
then I implemented this task with the help of Asp.net forum. Now i am posting this article because i think any other also has same requirement. So record will be show in gridview and when user select a key with alt key from keyboard then Approved radio button will be select in  gridview.
similarly when we press n key with alt key from keyboard then 'Not Approved' radio button will be select.

Step: 1. Firstly we will create the asp.net web application and add a new web form. Now we will add Gridview on page. 
for explaination of this article i am taking single column in gridview in which i will take two radio buttons.
first radio button ill be Approved and second radio button will be of Not Approved. HTML code is shown below:

<br/><pre lang="HTML"><asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
       <asp:TemplateField>
        <ItemTemplate>
            <asp:RadioButton ID="aRadioButton" runat="server" Text="Approved" GroupName="f" Checked="false" />
            <asp:RadioButton ID="dRadioButton" runat="server" Text="Not Approved" GroupName="f" Checked="false" />
        </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView></pre><br/>

Step: 2. In this step we will add rows in gridview using code-behind. which is as follows:
protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add();
        }
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }


Step: 3. In this step we will add javascript code for selecting radio buttons. We will perform 'onkeydown' event of document.
In following code we are using the key code of keyboards like we use code 65, 97, 78, 110. these code are for Keys 'a' and 'n'.


<script >
        document.onkeydown = clickRadio;

        function clickRadio(e) {
            if (window.event)
                var keyCode = window.event.keyCode;       // IE
            else
                var keyCode = e.which;
            if (e.altKey && (keyCode == 65 || keyCode == 97 || keyCode == 78 || keyCode == 110)) {
                setRadioButton(keyCode);
            }
        }
        function setRadioButton(whichKey) {
            //alert(whichKey + "\nhi" + String.fromCharCode(whichKey))
            //get reference of GridView control
            var grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid

            var cell;
            var approvedvalue = false;
            var disapprovedvalue = false;

            if (grid.rows.length > 0) 
            {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];
                   approvedvalue = false;
                   disapprovedvalue = false;
                    //loop according to the number of childNodes in the cell
                    for (j = 0; j < cell.childNodes.length; j++) 
                    {
                        //if childNode type is RadioButton

                        if (cell.childNodes[j].type == "radio") 
                        {
                            if (cell.childNodes[j].value == "aRadioButton") {
                                if (cell.childNodes[j].checked == false) {
                                    approvedvalue = false;
                                }
                                else {
                                    approvedvalue = true;
                                }
                            }
                            if (cell.childNodes[j].value == "dRadioButton") 
                            {
                                if (cell.childNodes[j].checked == false) 
                                {
                                    disapprovedvalue = false;
                                }
                                else 
                                {
                                    disapprovedvalue = true;
                                }
                            }
                        }
                    }
                    for (j = 0; j < cell.childNodes.length; j++) {
                        if (approvedvalue == false && disapprovedvalue == false) {
                            if (whichKey == 65 || whichKey == 97) {
                                if (cell.childNodes[j].value == "aRadioButton") {
                                    if (cell.childNodes[j].checked == false) {
                                        cell.childNodes[j].checked = true;
                                        return;
                                    }
                                }
                            }
                            else  if (whichKey == 78 || whichKey == 110) {
                                if (cell.childNodes[j].value == "dRadioButton") {
                                    if (cell.childNodes[j].checked == false) {
                                        cell.childNodes[j].checked = true;
                                        return;
                                    }
                                }
                            }
                        }
                    }   
                    
                }
            }
        }
</script>


following are the complete source code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script >
        document.onkeydown = clickRadio;

        function clickRadio(e) {
            if (window.event)
                var keyCode = window.event.keyCode;       // IE
            else
                var keyCode = e.which;
            if (e.altKey && (keyCode == 65 || keyCode == 97 || keyCode == 78 || keyCode == 110)) {
                setRadioButton(keyCode);
            }
        }
        function setRadioButton(whichKey) {
            //alert(whichKey + "\nhi" + String.fromCharCode(whichKey))
            //get reference of GridView control
            var grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid

            var cell;
            var approvedvalue = false;
            var disapprovedvalue = false;

            if (grid.rows.length > 0) 
            {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];
                   approvedvalue = false;
                   disapprovedvalue = false;
                    //loop according to the number of childNodes in the cell
                    for (j = 0; j < cell.childNodes.length; j++) 
                    {
                        //if childNode type is RadioButton

                        if (cell.childNodes[j].type == "radio") 
                        {
                            if (cell.childNodes[j].value == "aRadioButton") {
                                if (cell.childNodes[j].checked == false) {
                                    approvedvalue = false;
                                }
                                else {
                                    approvedvalue = true;
                                }
                            }
                            if (cell.childNodes[j].value == "dRadioButton") 
                            {
                                if (cell.childNodes[j].checked == false) 
                                {
                                    disapprovedvalue = false;
                                }
                                else 
                                {
                                    disapprovedvalue = true;
                                }
                            }
                        }
                    }
                    for (j = 0; j < cell.childNodes.length; j++) {
                        if (approvedvalue == false && disapprovedvalue == false) {
                            if (whichKey == 65 || whichKey == 97) {
                                if (cell.childNodes[j].value == "aRadioButton") {
                                    if (cell.childNodes[j].checked == false) {
                                        cell.childNodes[j].checked = true;
                                        return;
                                    }
                                }
                            }
                            else  if (whichKey == 78 || whichKey == 110) {
                                if (cell.childNodes[j].value == "dRadioButton") {
                                    if (cell.childNodes[j].checked == false) {
                                        cell.childNodes[j].checked = true;
                                        return;
                                    }
                                }
                            }
                        }
                    }   
                    
                }
            }
        }
</script>
   
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
       <asp:TemplateField>
        <ItemTemplate>
            <asp:RadioButton ID="aRadioButton" runat="server" Text="approved" GroupName="f" Checked="false" />
            <asp:RadioButton ID="dRadioButton" runat="server" Text="disapproved" GroupName="f" Checked="false" />
        </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

    </form>
</body>
</html>


protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add();
        }
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }


I hope it will help you.


0 Comments

    Archives

    November 2015
    June 2013
    May 2013
    March 2013
    February 2013
    January 2013
    November 2012
    September 2012
    July 2012
    June 2012

    Categories

    All
    Asp.Net
    C#
    Datagridview
    Dropdownlist
    Globalization
    Gridview
    Javascript
    VB.Net
    Window Form

    RSS Feed


    more Quotes

Powered by Create your own unique website with customizable templates.