Sunday, October 10, 2010

Jquery to read DatakeyNames value of Selected Rows of GridView in Asp.Net




Please visit my new Web Site WWW.Codedisplay.com



As we know GridView is a very popular control. We always experiment to enhance the GridView control to provide better experience to user. Since javascript is also a popular clientside language, most of the times we use this in client side operations like validation, Row coloring, cell coloring etc. Now a days Jquery is more popular so that in this article i will explain how you can capture the selected rows of a GridView control and also read the datakeyname values using JQuery. So at first i will tell you how we capture selected rows of a GridView. In this example i don't consider the built in Select command. Instead of select command here i use checkbox to select rows by user. The another important tip is we cannot directly access DataKeyNames values of a GridView. To get the value, here I will use a template column to store the same DataKeyValue in a hiddenfield. After that through iteration by Jquery I will read the hiddenfield values which looks alike datakeynames values.

For selecting/deselecting all checkboxes of a GridView using Javascript click here.


My example output look like below:
GridView_Datakeynames_jQuery

The GridView Control HTML will be:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID">   
            <Columns>   
                <asp:TemplateField>   
                    <ItemTemplate>   
                        <asp:CheckBox ID="chkSelect" runat="server" />   
                        <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("ID") %>' />   
                    </ItemTemplate>   
                </asp:TemplateField>   
                <asp:TemplateField>   
                    <HeaderTemplate>   
                        Name   
                    </HeaderTemplate>   
                    <ItemTemplate>   
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>   
                    </ItemTemplate>   
                </asp:TemplateField>   
            </Columns>   
        </asp:GridView>

The Jquery Script also given below:
<script type="text/javascript">   
    $(document).ready(function() {  
    var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');   
    $('#<%= cmdGetData.ClientID %>').click(function (e) {
        var DataKeyName="";  
        $('input:checkbox[id$=chkSelect]:checked', gridView1Control).each(function (item, index) {   
            if(DataKeyName.length==0)
            {
                DataKeyName = $(this).next('input:hidden[id$=IDVal]').val();
            }
            else
            {
                DataKeyName += "," + $(this).next('input:hidden[id$=IDVal]').val();
            }
        });   
        alert(DataKeyName);
        return false;   
    });   
   });   
</script>

Now Bind the GridView data within Page_Load Event:
protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("ID");
        dt.Columns.Add("Name");

        DataRow oItem = dt.NewRow();
        oItem[0] = "1";
        oItem[1] = "Shawpnendu Bikash Maloroy";
        dt.Rows.Add(oItem);

        oItem = dt.NewRow();
        oItem[0] = "2";
        oItem[1] = "Bimalendu Bikash Maloroy";
        dt.Rows.Add(oItem);

        oItem = dt.NewRow();
        oItem[0] = "3";
        oItem[1] = "Purnendu Bikash Maloroy";
        dt.Rows.Add(oItem);

        GridView1.DataSource = dt;
        GridView1.DataBind();

    }

The complete markup language of this example is:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView_DataKeyNames_Jquery.aspx.cs" Inherits="GridView_DataKeyNames_Jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Get Selected rows of a GridView using Jquery</title>
<script src="Script/jquery.js" type="text/javascript"></script>

<script type="text/javascript">   
    $(document).ready(function() {  
    var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');   
    $('#<%= cmdGetData.ClientID %>').click(function (e) {
        var DataKeyName="";  
        $('input:checkbox[id$=chkSelect]:checked', gridView1Control).each(function (item, index) {   
            if(DataKeyName.length==0)
            {
                DataKeyName = $(this).next('input:hidden[id$=IDVal]').val();
            }
            else
            {
                DataKeyName += "," + $(this).next('input:hidden[id$=IDVal]').val();
            }
        });   
        alert(DataKeyName);
        return false;   
    });   
   });   
</script>   
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID">   
            <Columns>   
                <asp:TemplateField>   
                    <ItemTemplate>   
                        <asp:CheckBox ID="chkSelect" runat="server" />   
                        <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("ID") %>' />   
                    </ItemTemplate>   
                </asp:TemplateField>   
                <asp:TemplateField>   
                    <HeaderTemplate>   
                        Name   
                    </HeaderTemplate>   
                    <ItemTemplate>   
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>   
                    </ItemTemplate>   
                </asp:TemplateField>   
            </Columns>   
        </asp:GridView>   
  
        <br />   
        <asp:Button ID="cmdGetData" runat="server" Text="Get Data" />    
    </div>
    </form>
</body>
</html>

Hope you got my trick & now you can read get selected rows of a GrodView control using jQuery.

Wednesday, October 6, 2010

Jquery to Get selected items from CheckBoxList




Please visit my new Web Site WWW.Codedisplay.com



In many forums i found that developers asking this question. I have answered in many forums and now i decide to write a post on how to get selected items or selected values of checkboxlist using Jquery. This is not an easy job. You need to loop through the checkbox list to get all selected items/values. Here if you look at my code example you will get the loop structer. Here i use comma separator to identify unique selected items. The output screen is given below:

CheckBox List With Jquery

Jquery Method:
<script type="text/javascript">
    $(document).ready(function() {
    $('#cmdGet').click(function()
    {
        var values='';
        $('#<%=CheckBoxList1.ClientID %> input[type=checkbox]:checked').each(function()
        {
            if(values.length==0)
            {
                values = $('label[for=' + this.id + ']').html();
            }
            else
            {
                values += ","+$('label[for=' + this.id + ']').html();
            }
        });
        alert(values);
        return false;
    });
    });  
    </script>
Complete HTML Markup language to run the example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckboxList_Jquery.aspx.cs" Inherits="CheckboxList_Jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ASP.NET Checkboxlist get values in client side using JQuery</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    $('#cmdGet').click(function()
    {
        var values='';
        $('#<%=CheckBoxList1.ClientID %> input[type=checkbox]:checked').each(function()
        {
            if(values.length==0)
            {
                values = $('label[for=' + this.id + ']').html();
            }
            else
            {
                values += ","+$('label[for=' + this.id + ']').html();
            }
        });
        alert(values);
        return false;
    });
    });  
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>
            <asp:ListItem Text="Three" Value="3"></asp:ListItem>
            <asp:ListItem Text="Four" Value="4"></asp:ListItem>
            <asp:ListItem Text="Five" Value="5"></asp:ListItem>
        </asp:CheckBoxList>
        <hr />
        <asp:Button runat="server" ID="cmdGet" Text="Get Selected Values" />
    </div>
    </form>
</body>
</html>
Now you got an idea of how to access the values in client-side. Hope it will help you to findout the selected items of checkbox list using jquery.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

Tuesday, October 5, 2010

How to Set Get RadioButtonList Selected Value using Jquery




Please visit my new Web Site WWW.Codedisplay.com



In one of my previous post i have written an article on "How to get set RadioButtonList value using javascript". Since Jquery now a popular scripting language thats why in this post i am going to explain how one can access or get or read or set RadioButtonList value using Jquery. Using javascript we can directly use RadioButonList click handler but in Jquery we can't. So what is the solution? Yes every problem has solution. Here i am using a trick to handle RadioButtonList click handler. First add a DIV tag. And then within the DIV tag place your RadioButtonList. After that when user click on the div tag we will fire a div click event & will handle RadioButtonList select value. My example output is given below:

RadioButtonList Jquery

For example the HTML Markup Code is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Radiobuttonlist_jquery.aspx.cs" Inherits="Radiobuttonlist_jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
    <title>Jquery to get set RadioButtonList Value</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
        <div id="RadioDiv">
           <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="One">1</asp:ListItem>
                <asp:ListItem Value="Two">2</asp:ListItem>
                <asp:ListItem Value="Three">3</asp:ListItem>
                <asp:ListItem Value="Four">4</asp:ListItem>
                <asp:ListItem Value="Five">5</asp:ListItem>
            </asp:RadioButtonList>
            <hr />
        </div>
        <input id="cmdSetValue" type="button" value="Set Four" />
        <hr />
        <div id="info" style="font-weight:bold"></div>    
    </form>
</body>
</html>

Now add the below Jquery script:
<script language="javascript">
         $(document).ready(function() {
             $('#RadioDiv input').click(function() {
                 $("#info").text('Selected Value: '+$("#RadioDiv input:radio:checked").val());
            });
            
            $("#cmdSetValue").click(function() {
                $('#<%=RadioButtonList1.ClientID %>').find("input[value='Four']").attr("checked", "checked");
                $('#RadioDiv input:radio:checked').trigger('click');
            });

        });  
    </script> 

Now run the page & hope you will understand the technique that i have applied to capture RadioButtonList click event as well as setting a SelectedValue to the RadioButtonList.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

How to Display / Show Hide toggle a Div using Jquery




Please visit my new Web Site WWW.Codedisplay.com



The man who starts to learn Jquery, basically this post is for you. As a developer i knew that in most web applications we need to do the same job many times. Previously i have explained how one can display/show hide a div using Javascript. For Javascript version please click here. But recent days we were very familiar with Jquery & love to write Jquery method instead of Javascript. In this article i will basically show you how you can display show hide Div content using jquery. To do that first add an aspx page in your project. Then write the link to your jquery libraray. Now add a text link (named Show/Hide Div) in your page. Also add a div tag on your page. Our purpose is when user click on Show/Hide Div link then if the corresponding DIV which you want to display or hide is hidden then the jquery script will display the DIV otherwise hide. Please have a look of my example code snapshot:

Toggle Div Jquery


If you are looking for javascript code to toggle the DIV CLICK HERE.


The Jquery script is given below:
<script type="text/javascript">
        $(document).ready(function(){

            $('#DIV1').hide();
            $('a#lnkShowHide').click(function(){
                $('#DIV1').toggle('slow');
                return false; /** not necessary if you add "#" into Achor href.**/
            });
        });

</script>
The complete HTML markup code is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Show_hide_Div_Jquery.aspx.cs" Inherits="Show_hide_Div_Jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>How to display hide DIV tag using Jquery</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

        $(document).ready(function(){

            $('#DIV1').hide();
            $('a#lnkShowHide').click(function(){
                $('#DIV1').toggle('slow');
                return false; /** not necessary if you add "#" into Achor href.**/
            });
        });

</script>
    
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a id="lnkShowHide" href=""  name="lnkShowHide">Show/Hide Div</a>
            <div id="DIV1">
                <p>Some div content here<br/>Some div content here</p>
            </div>
        </div>
    </form>
</body>
</html>
Hope now you can toggle div using Jquery smoothly.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome
Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash