CheckBox Column In GridView handled using Client-Site Script (Javascript)

GridViewImage

Purpose:

handled the check box check event without postback using javascript and save the id in the hidden field. in the above

“fig1” user selected the check one by one. after the selection of all the check box the header is selected which is described

in the “fig2”. now user is changed the page index described in the “fig3” and selected the page1 described in the “fig4” here all

the check box is checked.

Steps:

1) Create the Simple Web Application.

2)put the below code in the .aspx file.

<asp:HiddenField  ID="TotalNoOfRecord" Value="," runat="server"/>
    <asp:HiddenField ID="SelectedRecord" Value ="," runat ="server" />
    
        "False" ID="GridView1" 
        runat="server" Style="z-index: 100; left: 326px; position: absolute;
            top: 148px" OnRowDataBound="GridView1_RowDataBound" 
            AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" 
            PageSize="5" CellPadding="4" ForeColor="#333333" GridLines="None">
            
            
            
            "chkHeader" runat="server" />
            
            
            "chkItemTemplate" runat="server" />
            
            
            "Id" Visible="False">
            
            "lblId" Text='' runat="server">
            
            
            "Code">
            
            "lblCode" Text='' runat="server">
            
            
            
            "#507CD1" Font-Bold="True" ForeColor="White" />
            "#EFF3FB" />
            "#2461BF" ForeColor="White" HorizontalAlign="Center" />
            "#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            "#507CD1" Font-Bold="True" ForeColor="White" />
            "#2461BF" />
            "White" />
        

    

3) put the below Javascript in to code.

 "Javascript" type="text/javascript">
    //fire when the header checkbox is click
    function SelectAll(chkid)
    {
    //get the form
     var objfrm = document.forms[0];
     //find the element length of the form
     for (i=0;i
     {
       //check the element type (it is check box) and it in the gridview1 
       if (objfrm.elements[i].type == "checkbox" && objfrm.elements[i].name.indexOf('') >= 0)
       {
           objfrm.elements[i].checked = document.getElementById(chkid).checked;
       }
     }
      //get the hidden field of the selected id
      var SelectedRecord = document.getElementById('SelectedRecord').value;
      //selectedid in the hidden field
      var hdnIds = SelectedRecord.split(",");
      //no of record on the page
      var hdnnoofrecord = document.getElementById('TotalNoOfRecord').value.split(",");

     if(document.getElementById(chkid).checked)
     {    
        //check the value in the SelectedRecord
        for(var i=1;i
        {    
            //if already exist at that time we not added that id into the 
            //SelectedRecord else Add
            if(SelectedRecord.indexOf(',' + hdnnoofrecord[i] +',')
            {
                SelectedRecord += hdnnoofrecord[i] + ',';
            }
        }       
        document.getElementById('SelectedRecord').value =SelectedRecord;
     }
     else
     {
      //check the value in the SelectedRecord
        for(var i=1;i
        {
          //unselected row id is replace (example id 1 is unchecked --> ,1, replace with ,)  
          SelectedRecord = SelectedRecord.replace(',' + hdnnoofrecord[i] + ',',','); ;
        }        
         document.getElementById('SelectedRecord').value =SelectedRecord;
     }

    }

    //header checkbox check /uncheck function
    function HeaderCheckUnCheck()
    {
        var header =true;
        var chkheaderchkbox;
        var AllRecordSelect = true;
        var objfrm = document.forms[0];

        for (i=0;i
        {
          if (objfrm.elements[i].type == "checkbox" && objfrm.elements[i].name.indexOf('') >= 0)
          {
           if(header ==true)
           {
            chkheaderchkbox=objfrm.elements[i];
            header =false;
           } 
           else
           {
            if(objfrm.elements[i].checked ==false) 
            {
             AllRecordSelect =false;
            }
           }
          }
        }
        //all the row check box is checked then header check box is click
         if(AllRecordSelect ==true)
         {
             chkheaderchkbox.checked =true;
         }
         else 
         {
            chkheaderchkbox.checked =false;
         }
    }
    //individual check box click at that time fire
    function Select(chkid,selectedrowvalue)
    {    
        var SelectedIds =document.getElementById('SelectedRecord').value;
        if(document.getElementById(chkid).checked)
        {
            if(SelectedIds.indexOf(',' + selectedrowvalue + ',') 
                SelectedIds += selectedrowvalue + ',';
        }
        else
        {
            SelectedIds = SelectedIds.replace(',' + selectedrowvalue + ',',',');
        }   
        document.getElementById('SelectedRecord').value = SelectedIds;
        HeaderCheckUnCheck();
    }
    

4) Here I Created one class instead of connection with database. here class is serialized because i save the data in the viewstate.

[Serializable]
public class MyData
{
  private int _Id;

  public int Id
  {
    get { return _Id; }
    set { _Id = value; }
  }

  private String _Code;

  public String Code
  {
    get { return _Code; }
    set { _Code = value; }
  }

  public MyData(int id, string code)
  {
    this.Id = id;
    this.Code = code;
  }
}

5) put the below code in the .CS File.

 public System.Collections.Generic.List<MyData> Data
  {
    get { if (ViewState["data"] ==null)
            return new System.Collections.Generic.List<MyData>( );
      return (System.Collections.Generic.List<MyData> ) ViewState["data"]; }
    set { ViewState["data"] = value; }
  }


    protected void Page_Load(object sender, EventArgs e)
    {
      if (!IsPostBack)
      {
        System.Collections.Generic.List<MyData> obj = new System.Collections.Generic.List<MyData>();

        for (int i = 0; i < 10; i++)
        {
          obj.Add(new MyData(i,"a" + i.ToString()  ));
        }

        Data = obj;
        GridView1.DataSource = Data;
        GridView1.DataBind();

      }

      Response.Write(SelectedRecord.Value);
      //Response.Write(TotalNoOfRecord.Value);
    }
  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {
    if (e.Row.RowType == DataControlRowType.Header)
    {
      CheckBox chk = ((CheckBox)e.Row.FindControl("chkHeader"));
      chk.Attributes.Add("onclick", "SelectAll('" + chk.ClientID + "');");
    }
    else if(e.Row.RowType ==DataControlRowType.DataRow)
    {
      CheckBox chk = ((CheckBox)e.Row.FindControl("chkItemTemplate"));
      Label lbl = ((Label)e.Row.FindControl("lblId"));
      chk.Attributes.Add("onclick","Select('" + chk.ClientID + "' ,'" + lbl.Text + "')");

      if (SelectedRecord.Value.Contains("," + lbl.Text + ","))
      {
        chk.Checked = true;
      }

      TotalNoOfRecord.Value += lbl.Text +",";
    }

  }
  protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
  {
    TotalNoOfRecord.Value = ",";
    GridView1.PageIndex = e.NewPageIndex;
    GridView1.DataSource = Data;
    GridView1.DataBind();
  }
Thnx 

Advertising:

Charleston Hematology Oncology Associates (CHOA) is a private practice of 7 Hematologists / Oncologists spanning well over 100 years of combined experience.Cancer Center in Charleston SCOncologist in Charleston SC Our physicians specialize in the diagnosis and treatment of Oncology and Hematology. Services and treatments include Medical Oncology, Hematology, Bone Densitometry, Diagnostic Testing and Clinical Research.

Vijay alone has more than 16 years of construction experience and his varied expertise includes commercial projects and residential builds, along with malls, bungalows, and township projects. Visit the Vijay Gajra project at https://www.youtube.com/channel/UCp9wqe21FPIt5sY6olUOVmw

D3 Dentistry (Dental Clinic in Mount Pleasant)- Preventative Dentistry – It’s our goal to prevent problems before they begin with regular cleanings and exams. Are you looking for DentistDental ClinicFamily Dentist or Pediatric Dentist? We will carefully explain your options and customize a plan to meet your needs.

The former prosecutor, Brian Fishman, founded the Fishman Firm with the goal of providing unparalleled legal representation to individuals in Philadelphia and the surrounding counties charged with criminal offences. Criminal LawyerDUI Lawyer & Criminal Defense Attorney in Philadelphia Brian Fishman represents the criminally accused in Philadelphia, Montgomery, Delaware, Bucks and Chester County.

Over the last 15 years, since its inception, the group has been engaged in providing a wide range of world-class Real Estate projects to a diverse clientele. Chairman Mr. Vijay Gajra – While a local building company, the Ellora Group has a wide reach with projects in Mumbai, Gujarat, and Pune. As one of the top real estate companies in the area today, the Ellora Group is driving the industry forward across India by fostering innovation and bringing the global standards of construction.

 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s