 |
|
 |
GOod article I am sure people will use it, thanks for sharing.
cheers, Donsw My Recent Article : Ajax Calendar Control
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
i used the above code but when i click on check box in headtemplate not happens, not able to select the checkbox
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Hi,
Are you following the steps correctly, because while writing this I checked the code and it was working fine and same goes with the other people commented here. See if you are missing anything. If the problem remains the same then try to paste your code here.
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-Web Blog
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
 |
|
|
 |
|
|
 |
|
 |
Can i request snippet again? How about finding footer row grid cell values thru javascript? I'm trying to this all day long but with no luck I'm not able to solve it.
thanks again
Programmer's C# { Do it Better;}
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
well I guess grid.rows.length should be equal to last row of the grid i.e footer.
once you get the row you can use the same way to iterate childNodes of a cell.
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-Web Blog
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
here is exact code where can i place the footer row grid cell to find the childnodes?
function ValidateKBandCodex(sender, args) { var TargetBaseControl = document.getElementById("<%=gvProducts.ClientID %>"); var TargetChildControl; var TargetChildControl2; var chkCodex; var chkKB; if (TargetBaseControl.rows.length > 0) { for(i= 0;i<targetbasecontrol.rows.length;i++)> { TargetChildControl = TargetBaseControl.rows[i].cells[2]; TargetChildControl2 = TargetBaseControl.rows[i].cells[3]; for (j = 0;j < TargetChildControl.childNodes.length; j++) { if (TargetChildControl.childNodes[j].type =="checkbox") { chkCodex= TargetChildControl.childNodes[j].checked; } } for(x = 0;x < TargetChildControl2.childNodes.length;x++) { if (TargetChildControl2.childNodes[x].type =="checkbox") { chkKB = TargetChildControl2.childNodes[x].checked; } } } args.IsValid = (chkCodex == true || chkKB == true); } }
Programmer's C# { Do it Better;}
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
try this
function ValidateKBandCodex(sender, args) { var TargetBaseControl = document.getElementById("<%=gvProducts.ClientID %>"); var TargetChildControl; var TargetChildControl2;
var chkCodex; var chkKB;
if (TargetBaseControl.rows.length > 0) { for(i= 0;i<targetbasecontrol.rows.length;i++) { TargetChildControl = TargetBaseControl.rows[i].cells[2]; TargetChildControl2 = TargetBaseControl.rows[i].cells[3];
for (j = 0;j < TargetChildControl.childNodes.length; j++) { if (TargetChildControl.childNodes[j].type =="checkbox") { chkCodex= TargetChildControl.childNodes[j].checked; }
} for(x = 0;x < TargetChildControl2.childNodes.length;x++) { if (TargetChildControl2.childNodes[i].type =="checkbox") { chkKB = TargetChildControl2.childNodes[i].checked; } } }
//try to place your code here var lrow = TargetBaseControl.rows[TargetBaseControl.rows.length];
//do your task. I hope it will work
args.IsValid = (chkCodex == true || chkKB == true); } } ...(continued)
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-Web Blog
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
the sample is fully working from its original. but when I apply it in my own sample project it only works when the checkbox is place on the first column. in my project i put the checkbox at column 6 then when i test to run I got an error: "Microsoft JScript runtime error: 'childNodes' is null or not an object"
Any help pls.
function SelectAll(id) { //get reference of GridView control var grid = document.getElementById("<%= gvConfirm.ClientID %>"); //variable to contain the cell of the grid var cell;
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[6];
//loop according to the number of childNodes in the cell for (j = 0; j < cell.childNodes.length; j++) { //if childNode type is CheckBox if (cell.childNodes[j].type == "checkbox") { //assign the status of the Select All checkbox to the cell checkbox within the grid cell.childNodes[j].checked = document.getElementById(id).checked; } } } } }
|
| Sign In·View Thread·PermaLink | 2.00/5 (1 vote) |
|
|
|
 |
|
 |
try to modify this line with index 5
cell = grid.rows[i].cells[5]; //since the index starts from 0, column 6 should be on index 5
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-Web Blog
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
|
 |
|
|
 |
|
 |
if i unselect any of the checkboxes in item template, header checkbox should unselect. If i select any one of the checkboxes in item template, it should check remaining checkboxeds are selected or not,if so it has check the header checkbox.Any help how to solve this.......
modified on Wednesday, September 10, 2008 4:12 AM
|
| Sign In·View Thread·PermaLink | 2.00/5 (1 vote) |
|
|
|
 |
|
 |
Hi,
Try to add this javascript function in the script block
function checkStatus(id) { //get reference of GridView control var grid = document.getElementById("<%= GridView1.ClientID %>"); //variable to contain the cell of the grid var cell; var statusCheck = true;
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]; //loop according to the number of childNodes in the cell for (j=0; j<cell.childNodes.length; j++) { //if childNode type is CheckBox if (cell.childNodes[j].type =="checkbox") { if (cell.childNodes[j].checked == false) { statusCheck = false; break; }
} } }
if (statusCheck) //change the status of the Select All checkbox document.getElementById(id).checked = true; else document.getElementById(id).checked = false; } }
modify you code behind like this
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { string cbSelectAllClientID = ""; if (e.Row.RowType == DataControlRowType.Header) { //Find the checkbox control in header and add an attribute ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
cbSelectAllClientID = ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID; }
if (e.Row.RowType == DataControlRowType.DataRow) { //Here the checkboxes have an id cbStatus ((CheckBox)e.Row.FindControl("cbStatus")).Attributes.Add("onclick", "javascript:checkStatus('" + cbSelectAllClientID + "')"); } }
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-Web Blog
|
| Sign In·View Thread·PermaLink | 2.00/5 (1 vote) |
|
|
|
 |
|
|
 |
|
 |
This one is really nice article. Thank you farazsk11. I tried to implement the same kind of concept with the footers but couldn't get it. Is the reason it won't work with footer is the footer are defined after the click event for the check box is defined(As the footer has to go as the parameter for the function). As there any way I can use the exactly the same concept with the footers?
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Thanks for this ... very helpful and easy to understand.
But I can't seem to get it to work.
I have the page contained in a Masterpage. The script generated on the page is:
<script type="text/javascript"> //<![CDATA[ function SelectAll(GridName,SelectAll) { var grid = document.getElementById(GridName); var cell; if (grid.rows.length > 0) { for (i=1; i { cell = grid.rows[i].cells[0]; for (j=0; j { if (cell.childNodes[j].type =="checkbox") { cell.childNodes[j].checked = document.getElementById(SelectAll).checked; } } } } } //]]> </script>
and the grid part that makes use of the script is:
All seems to be fine ... what am I doing wrong. Please help.
Cheers. Ismail
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Hi Ismail,
So far the things you have placed seems fine, could you also please the code behind where you are calling the javascript function, also I would like to see the place where you are binding your GridView.
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net Blog
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Thanks for looking at the problem.
The Grid is bound as follows:
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { LoadMandatesList(); } if (!Page.ClientScript.IsClientScriptBlockRegistered("MandateSelectAll")) { string strScript = Global.GetSelectAllScript(); Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MandateSelectAll", strScript, true); } //I have also tried it by putting this in the code-behind of the master page } protected void LoadMandatesList() { BindMandateList(0); } private void BindMandateList(int intNewPageIndex) { g_dtMandatesList = (GlobalVariables.g_AccessLevel == 1 || GlobalVariables.g_AccessLevel == 2) ? Mandate.GetMandatesList(g_AgencyID) : Mandate.GetMandatesList(g_AgencyID, g_AgentID); Global.BindGridView(ref grdMandatesList, g_dtMandatesList, intNewPageIndex); }
protected void grdMandatesList_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { string strGridName = grdMandatesList.ClientID, strSelectAll = ((CheckBox)e.Row.FindControl("chkSelectAll")).ClientID; string strJavascript = "javascript:SelectAll(" + strGridName + "," + strSelectAll + ")"; ((CheckBox)e.Row.FindControl("chkSelectAll")).Attributes.Add("onclick", strJavascript); } }
public static string GetSelectAllScript() { StringBuilder strRefreshScript = new StringBuilder(); strRefreshScript.Append("function SelectAll(GridName,SelectAll) \n"); strRefreshScript.Append("{\n"); strRefreshScript.Append("\t var grid = document.getElementById(GridName);\n"); strRefreshScript.Append("\t var cell;\n"); strRefreshScript.Append("\t if (grid.rows.length > 0)\n"); strRefreshScript.Append("\t {\n"); strRefreshScript.Append("\t\t for (i=1; i<grid.rows.length;> strRefreshScript.Append("\t\t\t for (j=0; j<cell.childnodes.length;> strRefreshScript.Append("\t\t\t\t {\n"); strRefreshScript.Append("\t\t\t\t\t cell.childNodes[j].checked = document.getElementById(SelectAll).checked;\n"); strRefreshScript.Append("\t\t\t\t }\n"); strRefreshScript.Append("\t\t\t }\n"); strRefreshScript.Append("\t\t }\n"); strRefreshScript.Append("\t }\n"); strRefreshScript.Append("}\n"); } }
Apologies for throwing all this code at you, but hope that you can find what could be wrong.
One this I also noticed is that from the ErrorConsol in Firefox I get this message:
Error: missing ; before statement Source File: javascript: Error: ctl00_ContentPlaceHolder1_grdMandatesList is not defined
Source Code: Error: ctl00_ContentPlaceHolder1_grdMandatesList is not defined
Thanks.
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Hi,
Just to test with I created a sample in which there is one MasterPage and one aspx page. I put the javascript in MasterPage and call it from the aspx page as shown in the following code and works fine.
Master Page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>Untitled Page</title> <script type="text/javascript"> function SelectAll(id, gridId) { //get reference of GridView control var grid = document.getElementById(gridId); //variable to contain the cell of the grid var cell; 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]; //loop according to the number of childNodes in the cell for (j=0; j<cell.childNodes.length; j++) { //if childNode type is CheckBox if (cell.childNodes[j].type =="checkbox") { //assign the status of the Select All checkbox to the cell checkbox within the grid cell.childNodes[j].checked = document.getElementById(id).checked; } } } } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> </form> </body> </html>
-----------------------------------------------------------------------------------
aspx Page:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:TemplateField> <AlternatingItemTemplate> <asp:CheckBox ID="cbSelectAll" runat="server" /> </AlternatingItemTemplate> <HeaderTemplate> <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="cbSelectAll" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ApplicationName" HeaderText="Application Name" /> <asp:BoundField DataField="ServerName" HeaderText="Server Name" /> </Columns> </asp:GridView> </div> </asp:Content>
-----------------------------------------------------------------------------------------------------------------
.cs File
public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //Binding GridView with the datasource this.GridView1.DataSource = FillDataTable(); this.GridView1.DataBind(); } }
/// <summary> /// Method that will add few rows in a DataTable and returns a DataTable /// </summary> /// <returns>DataTable</returns> protected DataTable FillDataTable() { DataTable dt = new DataTable(); dt.Columns.Add("ApplicationID"); dt.Columns.Add("ApplicationName"); dt.Columns.Add("ServerName");
DataRow dr = dt.NewRow(); dr[0] = "1"; dr[1] = "Application 1"; dr[2] = "Server 1"; dt.Rows.Add(dr);
DataRow dr1 = dt.NewRow(); dr1[0] = "2"; dr1[1] = "Application 2"; dr1[2] = "Server 2"; dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow(); dr2[0] = "3"; dr2[1] = "Application 3"; dr2[2] = "Server 3"; dt.Rows.Add(dr2);
DataRow dr3 = dt.NewRow(); dr3[0] = "4"; dr3[1] = "Application 4"; dr3[2] = "Server 4"; dt.Rows.Add(dr3);
DataRow dr4 = dt.NewRow(); dr4[0] = "5"; dr4[1] = "Application 5"; dr4[2] = "Server 5"; dt.Rows.Add(dr4);
DataRow dr5 = dt.NewRow(); dr5[0] = "6"; dr5[1] = "Application 6"; dr5[2] = "Server 6"; dt.Rows.Add(dr5);
return dt; } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { //Find the checkbox control in header and add an attribute ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "','" + this.GridView1.ClientID + "')"); } } }
Now try to use this code and see if you are missing something in your earlier code.
Hope this will solve your problem.
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net Blog
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Hi.
Sorry, didn't have time till today to work on this problem. I tested your code in my App, and it worked perfectly ... Now I just have to test it for all the gridviews in the application.
Thanks a stack...
Ismail ...
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Change the if(cell.childNodes[j].lastChild.type == "checkbox" you checkbox is in a span html control try that.
Ronnie Peretz
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Hi Faraz, Thanks for the Nice post.
Is that possible to write the same code in Child page instead of master page?
i am trying to use your code & it gives error. "rows.lenght" is null or not an object.
Pragnesh Patel
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |
|
 |
Thanks for appriciating the post. Well I don't see any good reason for this not to work on child page. However I will try to create a sample application and test it.
Faraz Shah Khan MCP, MCAD.Net, MCSD.Net, MCTS-Win/Web, MCPD-Web Blog
|
| Sign In·View Thread·PermaLink | |
|
|
|
 |