For client side checkbox check all or uncheck all in girdview

 

Gridview header checkbox select and deselect all rows using client side JavaScript and server side C#

In this article, I will show you how to add checkbox in gridview header template then select and deselect all rows in gridview using clients side JavaScript and server side as well. 

Introduction

Adding checkbox in gridview header template and select/deselect all rows is a common requirement in most of the asp.net projects and frequently asked questions also. Here I will explain how to add checkbox in header template of gridview and select/deselect all rows using client side javascript and server side code.

Add Checkbox in Gridview header template

Create the asp.net project and drag the gridview control then format as likes below.

Using HeaderTemplate of gridview I had added checkbox and also added in Itemtemplate of same column.

Select and deselect using Client side

I’m loading the few sample employee records in gridview to select/deselect all rows. Below javascript CheckAllEmp function will do select and deselect when check and uncheck in header checkbox. Call this function in gridview headertemplate, checkbox onclick event as shown above.

Above javascript code will get gridview client id and loop the each row and get the checkbox id which is available in itemTemplate and make it select/deselect rows. This is the one of the way using client side script.

Select and deselect using Server side

Same functionality we can able to do with server side also. To do this make the changes in HeaderTemplate as like below.

Make it autopostback as true and create OnCheckedChanged event in checkbox and add the below code in chkboxSelectAll_CheckedChanged event in code behind part.

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox ChkBoxHeader = (CheckBox)GridVwHeaderChckboxSrvr.HeaderRow.FindControl("chkboxSelectAll");
            foreach (GridViewRow row in GridVwHeaderChckboxSrvr.Rows)
            {
                CheckBox ChkBoxRows = (CheckBox)row.FindControl("chkEmp");
                if (ChkBoxHeader.Checked == true)
                {
                    ChkBoxRows.Checked = true;
                }
                else
                {
                    ChkBoxRows.Checked = false;
                }
            }
        }

Above checked changed event will get the header checkbox id and if header checkbox is checked then find all rows checkbox id and make it all select else deselect all rows

For Jquery select and deselect

 function CheckAll(obj) {
   $('#<%=grdData.ClientID %> tbody tr td input:checkbox').attr('checked', obj.checked);
}

  function childclick() {
            if ($("#<%=grdData.ClientID %> input[name$='chkuser']").length == $("#<%=grdData.ClientID %> input[name$='chkuser']:checked").length) {
                $("#<%=grdData.ClientID %> input[name$='chkheaduser']").attr('checked', true);
            } else {
                $("#<%=grdData.ClientID %> input[name$='chkheaduser']").attr('checked', false);
            }
        }

For that grid have this one

Display JSON data direct to table formate

I had found a lot but not find appropriate solution. But now i have done such good thing.
Here you can load your JSON data to table .

For that In HTML

  <div id="example">
    </div>

For Style

 td,th
        {
            padding: 3px;border:1px solid #dedede;
        }

For Script

 var Data = '[{ "User_Code": "abenns1", "First_Name": "Aaron", "Last_Name": "Benns", "Is_Supervisor": 0 }, { "User_Code": "ahansen3", "First_Name": "Alan", "Last_Name": "Hansen", "Is_Supervisor": 1 }, { "User_Code": "ADamasc", "First_Name": "Armel", "Last_Name": "Damasco", "Is_Supervisor": 0 }, { "User_Code": "cjohnso267", "First_Name": "Cliff", "Last_Name": "Johnson", "Is_Supervisor": 0 }, { "User_Code": "dkane", "First_Name": "Donald", "Last_Name": "Kane", "Is_Supervisor": 0 }, { "User_Code": "epangil", "First_Name": "Edgar", "Last_Name": "Pangilinan", "Is_Supervisor": 0 }, { "User_Code": "EBayara", "First_Name": "Enrique", "Last_Name": "Bayaras", "Is_Supervisor": 0 }, { "User_Code": "fcabanl", "First_Name": "Fernando", "Last_Name": "Cabanlig", "Is_Supervisor": 0 }, { "User_Code": "hcabuan1", "First_Name": "Henry", "Last_Name": "Cabuang1", "Is_Supervisor": 1 }, { "User_Code": "ibaaqee", "First_Name": "Ibrahim", "Last_Name": "Baaqee", "Is_Supervisor": 0 }, { "User_Code": "JGangan2", "First_Name": "Jaime", "Last_Name": "Gangano", "Is_Supervisor": 0 }, { "User_Code": "mgaite", "First_Name": "Marcel", "Last_Name": "Gaite", "Is_Supervisor": 0 }, { "User_Code": "mmorris18", "First_Name": "Michael", "Last_Name": "Morris", "Is_Supervisor": 0 }, { "User_Code": "psabido1", "First_Name": "Philip", "Last_Name": "Sabido", "Is_Supervisor": 1 }, { "User_Code": "rcuento", "First_Name": "Reginald", "Last_Name": "Cuento", "Is_Supervisor": 0}]';

  var newdb = JSON.parse(Data);
            //alert(newdb.length);
            $("#example").html("<table>");

            var firstrow = newdb[0];
            $("#example").append("<tr>");
            $.each(firstrow, function (index) {
                $("#example").append("<th>" + index + "</th>");
            });
            $("#example").append("</tr>");


            $.each(newdb, function (index, val) {
                $("#example").append("<tr>");
                $.each(val, function (index) {
                    var code = index;
                    var country = val[index];
                    // $("#example").append("<b>" + code + " : </b>" + country + "&nbsp;&nbsp;");                  
                    $("#example").append("<td>" + country + "</td>");
                });
                $("#example").append("</tr>");
                // $("#example").append("<br/>");

            });
            $("#example").append("</table>");

Here you can give your JSON result to Data.

Show loading image while Page is loading using jQuery

Web pages takes time to load and sometimes when page is heavy (full of images) then it takes more time to load. Would it not be nice to show loading images or message while your page is loading. It creates responsive webpage and gives nice user experience. The user will come to know that something is loading. In this post, I will show you how to show loading icon/image while page is loading using jQuery.

Related Post:

• Execute jQuery code only after Web Page is loaded completely

How to do it?

First create a div element and assign an ID to it. I have assigned ID as "dvLoading". This div element will be used to show the loading icon.

Now create a style which will be applied to the div element. Basically, this CSS style will set the div position in the middle of the page and also assign width and height. And the background of the div will be an loading gif image.

#dvLoading
{
   background:#000 url(images/loader.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

Now, comes the jQuery part. The div element will be always visible but we need to hide it as soon as our page is loaded completely. In this case, we can't use $(document).ready() to show the loading div. Read here why? Therefore, we need to use window.load event to hide the loading div element. Remember to put this code before closing head tag.

That's it!!!!! 

Live Demo

Feel free to contact me for any help related to jQuery, I will gladly help you.

On button click open Jquery calendar

Generally if you find Jquery calendar it will open while you focus the input textbox.

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

So, here is my solution ..while you click on button or link..jquery calendar will open.

Html is

  
    One Time

Style tag

 .ui-datepicker
        {
            top: 29.5px !important;
        }

Script tag

 var textBox = $('#mdatepicker');
        var icon = $('#btnOneTime');
        var mydatepicker = textBox.datepicker
            ({
                minDate: 0, /*Here user can only select future n current date*/
                onSelect: function (selectedDate) {
                    $('#hdnSchdule').val(selectedDate);
                    $('#hdnSchduleType').val(1);
                    $('.button_part a').removeClass("button2").removeClass("button2_active");
                    $('.button_part a').addClass("button2");
                    $('#btnOneTime').addClass("button2_active");
                    // alert(selectedDate);
                    // alert($('#hdnSchdule').val());
                }
            });

        icon.click(function () {
            mydatepicker.datepicker("show");
        });

Multiple selection (checkbox) dropdwon client side

Description

Dropdown Check List is a javascript plugin based on the jQuery library that transforms a regular select html element into a dropdown checkbox list.

How does it work?

Dropdown CheckList uses the existing structure of the html select elements on which it is applied to dynamically build a container with checkboxes and labels, then hides the original select element. The plugin does not change in any way the existing select element, it only synchronizes the checked values from the new container to the original select. This approach has the added benefit to allow the use of the plugin with any server technology.
The widget will hide the existing select element by modifying its display attribute to none. The new widget will keep the replaced select options synchronized with the checkbox list so the postback is not affected. The text of the control is composed on the concatenated text of selected options in the list. Because the width of the control will not allways accomodate all selected options, the control will show the full text on hover by setting its title attribute.

Examples

Simple Multi-selector

Nothing originally selected

$("#s1").dropdownchecklist();

In head tag

In body tag

   
            Low
            Medium
            High
            Low
            Medium
            High
            Low
            Medium
            High
            Low
            Medium
            High
            Low
            Medium
            Low
            Medium
            Low
            Medium
            High
            Low
            Medium
            High
            High
            High
        

Reference link : Click here

 

 

How to get values from an html table column of a selected row using javascript

$('tr').click(function() {
    $('tr').removeClass('selected');
    $(this).addClass('selected');

    var td = $(this).children('td');
    for (var i = 0; i < td.length; ++i) {
        alert(i + ': ' + td[i].innerText);
    }
});

Run demo here: http://jsfiddle.net/VjkML/

Another Reference Link Click Me

Jquery Sorting and Paging html table

Table sorting & pagination with jQuery

http://tablesorter.com/docs/

http://www.datatables.net/

In head

In body

        


                
Last Name
                
                
First Name
                
                
Email
                
                
Due
                
                
Web Site
                
            

        


                
Smith
                
                
John
                
                
jsmith@gmail.com
                
                
$50.00
                
                
http://www.jsmith.com
                
            

                
Bach
                
                
Frank
                
                
fbach@yahoo.com
                
                
$50.00
                
                
http://www.frank.com
                
            

                
Doe
                
                
Jason
                
                
jdoe@hotmail.com
                
                
$100.00
                
                
http://www.jdoe.com
                
            

                
Conway
                
                
Tim
                
                
tconway@earthlink.net
                
                
$50.00
                
                
http://www.timconway.com
                
            

    



        
        
        
        
        
            2
            10
            20
            30
            40
        
        

For MVC3 Razor Paging and Sorting
http://mkdot.net/community/mknetug/mk_web/b/hajan/archive/2011/02/10/table-sorting-amp-pagination-with-jquery-and-razor-in-asp-net-mvc.aspx

Online sources:
http://tablesorter.com/__jquery.tablesorter.js
http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js
http://tablesorter.com/themes/blue/style.css

Find Element with javascipt/jquery1.

Find Element with javascipt/jquery