c# - How to select all checkboxes in just one particular column in GridView? -
c# - How to select all checkboxes in just one particular column in GridView? -
i have gridview in there 2 columns of checkboxes want add together 2 seperate "check all" text boxes @ top, "check all" above column should check checkboxes in column only. "check all" above column b should check columns in column b only. not able apply groupvalidation. every row 1 of 2 columns should selected. tried finding solution when click on check @ top checks checkboxes nowadays in gridview , there no grouping validation. here code..
head:
<script type = "text/javascript"> function check_click(objref) { //get row based on checkbox var row = objref.parentnode.parentnode; if (objref.checked) { //if checked alter color aqua row.style.backgroundcolor = "aqua"; } else { //if not checked alter original color if (row.rowindex % 2 == 0) { //alternating row color row.style.backgroundcolor = "#c2d69b"; } else { row.style.backgroundcolor = "white"; } } //get reference of gridview var gridview = row.parentnode; //get input elements in gridview var inputlist = gridview.getelementsbytagname("input"); (var = 0; < inputlist.length; i++) { //the first element header checkbox var headercheckbox = inputlist[0]; //based on or none checkboxes //are checked check/uncheck header checkbox var checked = true; if (inputlist[i].type == "checkbox" && inputlist[i] != headercheckbox) { if (!inputlist[i].checked) { checked = false; break; } } } headercheckbox.checked = checked; } </script> <script type = "text/javascript"> function checkall(objref) { var gridview = objref.parentnode.parentnode.parentnode; var inputlist = gridview.getelementsbytagname("input"); (var = 0; < inputlist.length; i++) { //get cell find out columnindex var row = inputlist[i].parentnode.parentnode; if (inputlist[i].type == "checkbox" && objref != inputlist[i]) { if (objref.checked) { //if header checkbox checked //check checkboxes //and highlight rows row.style.backgroundcolor = "aqua"; inputlist[i].checked = true; } else { //if header checkbox checked //uncheck checkboxes //and alter rowcolor original if (row.rowindex % 2 == 0) { //alternating row color row.style.backgroundcolor = "#c2d69b"; } else { row.style.backgroundcolor = "white"; } inputlist[i].checked = false; } } } } </script> body:
<asp:gridview id="gridview1" runat="server" autogeneratecolumns="false"> <columns> <asp:boundfield datafield="rollno" headertext="rollno" /> <asp:templatefield headertext="date"> <edititemtemplate> <asp:textbox id="textbox1" runat="server"></asp:textbox> <asp:calendarextender id="calendarextender1" runat="server" targetcontrolid="textbox1"> </asp:calendarextender> </edititemtemplate> <headertemplate> </headertemplate> <itemtemplate> <asp:textbox id="textbox2" runat="server"></asp:textbox><asp:calendarextender id="calendarextender2" runat="server" targetcontrolid="textbox2"> </asp:calendarextender> </itemtemplate> </asp:templatefield> <asp:boundfield headertext="time" /> <asp:templatefield headertext="absent"> <itemtemplate> <asp:checkbox id="checkbox1" runat="server" text="absent" /> </itemtemplate> </asp:templatefield> <asp:templatefield headertext="present"> <headertemplate> <asp:checkbox id="checkall" runat="server" onclick = "checkall(this);" /> </headertemplate> <itemtemplate> <asp:checkbox id="checkbox2" runat="server" text="present" onclick = "check_click(this)" /> </itemtemplate> </asp:templatefield> </columns> </asp:gridview>
ok found solution problem. although there still 1 glitch.
head:
<div runat="server"> <script type="text/javascript"> function selectall(id) { //get reference of gridview command var grid = document.getelementbyid("<%= gridview1.clientid %>"); //variable contain cell of grid var cell; if (grid.rows.length > 0) { //loop starts 1. rows[0] points header. (i = 1; < grid.rows.length; i++) { //get reference of first column cell = grid.rows[i].cells[4]; //loop according number of childnodes in cell (j = 0; j < cell.childnodes.length; j++) { //if childnode type checkbox if (cell.childnodes[j].type == "checkbox") { //assign status of select checkbox cell checkbox within grid cell.childnodes[j].checked = document.getelementbyid(id).checked; } } } } } function selectall1(id) { //get reference of gridview command var grid = document.getelementbyid("<%= gridview1.clientid %>"); //variable contain cell of grid var cell; if (grid.rows.length > 0) { //loop starts 1. rows[0] points header. (i = 1; < grid.rows.length; i++) { //get reference of first column cell = grid.rows[i].cells[3]; //loop according number of childnodes in cell (j = 0; j < cell.childnodes.length; j++) { //if childnode type checkbox if (cell.childnodes[j].type == "checkbox") { //assign status of select checkbox cell checkbox within grid cell.childnodes[j].checked = document.getelementbyid(id).checked; } } } } } </script> <script type = "text/javascript"> function checkboxcheck(rb) { var gv = document.getelementbyid("<%=gridview1.clientid%>"); var row = rb.parentnode.parentnode; var rbs = row.getelementsbytagname("input"); (var = 0; < rbs.length; i++) { if (rbs[i].type == "checkbox") { if (rbs[i].checked && rbs[i] != rb) { rbs[i].checked = false; break; } } } } </script> </div> body:
<asp:gridview id="gridview1" runat="server" autogeneratecolumns="false" onrowdatabound="gridview1_rowdatabound"> <columns> <asp:boundfield datafield="rollno" headertext="rollno" /> <asp:templatefield headertext="date"> <edititemtemplate> <asp:textbox id="textbox1" runat="server"></asp:textbox> <asp:calendarextender id="calendarextender1" runat="server" targetcontrolid="textbox1"> </asp:calendarextender> </edititemtemplate> <headertemplate> </headertemplate> <itemtemplate> <asp:textbox id="textbox2" runat="server"></asp:textbox><asp:calendarextender id="calendarextender2" runat="server" targetcontrolid="textbox2"> </asp:calendarextender> </itemtemplate> </asp:templatefield> <asp:boundfield headertext="time" /> <asp:templatefield headertext="present"> <alternatingitemtemplate> <asp:checkbox id="cbselectall1" runat="server" onclick="checkboxcheck(this)" /> </alternatingitemtemplate> <headertemplate> <asp:checkbox id="cbselectall1" runat="server" text="all absent" onclick="checkboxcheck(this)" autopostback="true" validationgroup="a" /> </headertemplate> <itemtemplate> <asp:checkbox id="cbselectall1" runat="server" onclick="checkboxcheck(this)" /> </itemtemplate> </asp:templatefield> <asp:templatefield> <alternatingitemtemplate> <asp:checkbox id="cbselectall" runat="server" onclick="checkboxcheck(this)"/> </alternatingitemtemplate> <headertemplate> <asp:checkbox id="cbselectall" runat="server" text="all present" onclick="checkboxcheck(this)" autopostback="true" validationgroup="a" /> </headertemplate> <itemtemplate> <asp:checkbox id="cbselectall" runat="server" onclick="checkboxcheck(this)" /> </itemtemplate> </asp:templatefield> </columns> </asp:gridview> code behind:
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e) { if (e.row.rowtype == datacontrolrowtype.header) { //find checkbox command in header , add together attribute ((checkbox)e.row.findcontrol("cbselectall")).attributes.add("onclick", "javascript:selectall('" + ((checkbox)e.row.findcontrol("cbselectall")).clientid + "')"); ((checkbox)e.row.findcontrol("cbselectall1")).attributes.add("onclick", "javascript:selectall1('" + ((checkbox)e.row.findcontrol("cbselectall1")).clientid + "')"); } } the glitch user can still select both "check all" , hence both columns selected @ same time. athough 1 can selected when not using select check box.
c# javascript asp.net
Comments
Post a Comment