Hi I am trying to use this checkAll function.
If I click on the checkAll checkbox, then all of the row will be selected and the background color will change accordingly.
Here is my javascript:
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
row.style.backgroundColor = "aqua";
inputList[i].checked = true;
}
else {
if (row.rowIndex % 2 == 0) {
row.style.backgroundColor = "#e4edfb";
} else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
This is my code:
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("Id") %>' />
<asp:CheckBox runat="server" ID="chkBoxMultipleSelect" CssClass="chkBoxMultipleSelect" OnClick="checkIfUnselected(this);" />
</ItemTemplate>
</asp:TemplateField>
After click on the checkAll checkBox, I am only able to change the color of that checkbox column only, but not my other column.
Any help is apparated. Thanks.
function checkAll(spanChk) {
var IsChecked = spanChk.checked;
var Chk = spanChk;
Parent = document.getElementById('gvMessageReportShow');
var items = Parent.getElementsByTagName('input');
for (i = 0; i < items.length; i++) {
if (items[i].id != Chk && items[i].type == "checkbox") {
if (items[i].checked != IsChecked) {
spanChk.parentElement.parentElement.style.backgroundColor = 'aqua';
items[i].click();
}
}
}
}
I ended up finding my answer here
http://www.codedigest.com/Articles/ASPNET/132_GridView_with_CheckBox_%E2%80%93_Select_All_and_Highlight_Selected_Row.aspx
Related
i have three controls inside RadGrid Edit form
My objective is to multiply textbox1 and textbox2 and display result on TextBox3 using javascript
function multiply() {
var TextBox1 = document.getElementById('TextBox1').value;
var TextBox2 = document.getElementById('TextBox2').value;
var result = parseInt(TextBox1) * parseInt(TextBox2);
if (!isNaN(result)) {
document.getElementById('TextBox3').value = result;
}
}
THAts code working fine when i use that code for the controls out side radgrid or radgrid edit template, but how to implement same code on RadGRid Edit form
If not mistaken this is what you want ?
Is it in EditMode="EditForms"
<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand">
<MasterTableView EditMode="EditForms">
<EditFormSettings>
<EditColumn Visible="false"></EditColumn>
</EditFormSettings>
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate><asp:Label ID="lbl" runat="server" Text='<%# Eval("A") %>'></asp:Label></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txt1" runat="server" onkeyup="calculate();"></asp:TextBox> *
<asp:TextBox ID="txt2" runat="server" onkeyup="calculate();"></asp:TextBox> =
<asp:TextBox ID="txt3" runat="server" Text='<%# Eval("A") %>'></asp:TextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn>
<ItemTemplate><asp:LinkButton ID="lbtnEdit" runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton></ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lbtnSave" runat="server" Text="Save" CommandName="SaveValue"></asp:LinkButton>
<asp:LinkButton ID="lbtnCancel" runat="server" Text="Cancel" CommandName="Cancel"></asp:LinkButton>
</EditItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<telerik:RadCodeBlock ID="rcb" runat="server">
<script type="text/javascript">
function calculate() {
var grid = $find('<%=RadGrid1.ClientID %>');
var masterTable = grid.get_masterTableView();
var gridCount = masterTable.get_editItems().length;
var item;
var txt1;
var txt2;
var txt3;
var num1 = 0;
var num2 = 0;
var result = 0;
for (var i = 0; i < gridCount; i++) {
item = masterTable.get_editItems()[i];
txt1 = $(item.get_editFormItem()).find("input[id*='txt1']").get(0);
txt2 = $(item.get_editFormItem()).find("input[id*='txt2']").get(0);
txt3 = $(item.get_editFormItem()).find("span[id*='txt3']").get(0);
// Reset
num1 = 0;
num2 = 0;
result = 0;
// Check
if (txt1 != undefined && txt2 != undefined && lblResult != undefined) {
num1 = txt1.value != '' ? parseInt(txt1.value) : 0;
num2 = txt2.value != '' ? parseInt(txt2.value) : 0;
result = num1 * num2;
txt3.value = result + "";
}
}
}
</script>
</telerik:RadCodeBlock>
I have a grid with two checkbox columns.
I want to have separate count for each column. I am unable to access them separately.
here is what I have tried:
function CountChkBxCancel() {
function CountChkBx() {
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
document.getElementById('<%=lblConfirmationCount.ClientID %>').value = numChecked;
CountChkBxCancel();
if (numChecked > 0) {
document.getElementById('<%=lblConfirmationCount.ClientID %>').innerHTML = numChecked;
}else {
document.getElementById('<%=lblConfirmationCount.ClientID %>').innerHTML = '0';
}
}
This id for two checkbox column in grid
<ItemTemplate>
<%-- <asp:Label ID="Label6" runat="server"> <%# Container.DataItemIndex + 1 %></asp:Label> --%>
<asp:CheckBox ID="chkNominee" runat="server" onclick="CountChkBx()" />
</ItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkCancel" runat="server" onclick="CountChkBxCancel()" />
</ItemTemplate>
How to access the checkbox count for these different IDs?
<script type="text/javascript">
function CountChkBx(checkBox) {
var checked = 0;
var checkBoxes = document.getElementsByClassName(checkBox.parentNode.className);
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].getElementsByTagName("INPUT")[0].checked) {
checked++;
}
}
var label = null;
switch (checkBox.parentNode.className) {
case "cbNominee":
label = document.getElementById("<%= lblConfirmationCount.ClientID %>");
break;
case "cbCancel":
label = document.getElementById("<%= lblCancelCount.ClientID %>");
break;
}
if (label) {
label.innerHTML = checked.toString();
}
}
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkNominee" runat="server" CssClass="cbNominee" onclick="CountChkBx(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkCancel" runat="server" CssClass="cbCancel" onclick="CountChkBx(this)" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
Confirmed: <asp:Label runat="server" ID="lblConfirmationCount" />
<br />
Canceled: <asp:Label runat="server" ID="lblCancelCount" />
function CountChkBx() {
var confirmCount = 0;
var cancelCount = 0;
Parent = document.getElementById('<%= this.gvNominationList.ClientID %>');
for (i = 1; i < Parent.rows.length; i++) {
var tr = Parent.rows[i];
// var td = tr.firstChild;
// var item = td.firstChild;
var td1 = tr.childNodes[0];
var td2 = tr.childNodes[1];
var item1 = td1.childNodes[0].firstChild;
var item2 = td2.childNodes[0].firstChild;
if (item1.type == "checkbox") {
if (item1.checked)
confirmCount = confirmCount + 1;
}
if (item2.type == "checkbox") {
if (item2.checked)
cancelCount = cancelCount + 1;
}
}
document.getElementById('<%=lblConfirmationCount.ClientID %>').innerHTML = confirmCount;
document.getElementById('<%=lblCancelCount.ClientID %>').innerHTML = cancelCount;
}
Per this code below, when users check a box, date is automatically inserted into a textbox control called cDate. This works great:
function ClickBox(cb) {
var tr = cb;
while (tr.tagName != "TR") {
tr = tr.parentNode;
if (tr == null) return; // something went wrong
}
var inps = tr.getElementsByTagName("input");
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
if (inp.name.indexOf("cDate") >= 0) {
inp.value = rightDate();
break;
}
}
}
These are the affected controls:
<ItemTemplate>
<asp:CheckBox ID="myrecord" runat="server" onclick="ClickBox(this)" />
</ItemTemplate>
<ItemTemplate>
<asp:TextBox runat="server" style="border: none;" ID="cDate"></asp:TextBox>
</ItemTemplate>
The issue users are currently having is that once a checkbox is checked and date is inserted, only way to remove the inserted dates is the click the Reset button.
They would prefer to have the inserted dates disappear once a checked box is unchecked.
This modified code below isn't working. I am not getting any errors, however, whenever I am checking a box or unchecking it, nothing is happening - no date is getting inserted anymore.
function ClickBox(cb) {
var tr = cb;
var inps = tr.getElementsByTagName("input");
if(cb.checked == 1){ // CheckBox checked condition
while (tr.tagName != "TR") {
tr = tr.parentNode;
if (tr == null) return; // something went wrong
}
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
if (inp.name.indexOf("cDate") >= 0) {
inp.value = rightDate();
break;
}
}
}
else{
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
inp.value = '';
}
}
}
I am not sure what I am doing wrong.
Thanks for your assistance.
Here's a very simple solution that works for me:
ASP.NET Markup:
<div>
<asp:CheckBox ID="cbDate" runat="server" onclick="ClickBox(this)" />
<br />
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</div>
JavaScript:
function ClickBox(checkbox) {
var dateCheckbox = checkbox;
var dateTextBox = document.getElementById("txtDate");
if (dateCheckbox.checked === true) {
dateTextBox.value = "TODAY";
} else {
dateTextBox.value = "";
}
}
Hope this helps.
I have a text box whose value I need to set in javascript function.
I calculate no of checkboxes checked in a grid and then assign the value to a hidden field whose value in turn is assigned to a text box.
Following is JS function.
function CountChkBx_tpm() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn2");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsTPMSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0)
document.getElementById('<%=txtTPMRecom.ClientID %>').Value = numChecked;
else
document.getElementById('<%=txtTPMRecom.ClientID %>').Value = '0';
}
It is being called at OnClick of checkboxes within grid:
<ItemTemplate>
<asp:CheckBox type="checkbox" runat="server" ID="IsTPMSelected" onclick="CountChkBx_tpm()" />
</ItemTemplate>
The same functionality is used for another checkbox with another JS function to set value for another textbox..and that is working absolutely fine!!
What could be the trouble!!
function CountChkBx() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsPocSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0) {
document.getElementById('<%=txtCounterConfirmation.ClientID %>').value = numChecked;
}
else {
document.getElementById('<%=txtCounterConfirmation.ClientID %>').Value = '0';
}
}
this is for following check box
<ItemTemplate>
<asp:CheckBox type="checkbox" runat="server" ID="IsPocSelected" onclick="CountChkBx()" />
</ItemTemplate>
</asp:TemplateField>
The text boxes are:
<td style="width: 100px">
<asp:TextBox ID="txtCounterConfirmation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
</td>
<td style="width: 100px">
<asp:TextBox ID="txtTPMRecom" runat="server"></asp:TextBox>
</td>
As far as I think you need to use
document.getElementById('<%=txtTPMRecom.ClientID %>').value
Instead of
document.getElementById('<%=txtTPMRecom.ClientID %>').Value
Concluding javscript code
function CountChkBx_tpm() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn2");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsTPMSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0)
document.getElementById('<%=txtTPMRecom.ClientID %>').value = numChecked;
else
document.getElementById('<%=txtTPMRecom.ClientID %>').value = '0';
}
I'm trying to get the currently selected item within an asp:RadioButtonList through the java script on the page. I've looked up how to do this, but none of the ways suggested has worked. I'm coding for a dnn module. Here's what I have:
<script type="text/javascript">
function BeginDownload() {
var radioObj = document.getElementsByName('<%= SliderStyles.ClientID %>');
for (var i = 0; i < radioObj.length; ++i ) {
if (radioObj[i].checked) {
if (radioObj[i].value == "0") { __doPostBack("ImgDownload", $("#waterwheel-carousel-horizon").CurrentSelectedImg().toString()); }
else if (radioObj[i].value == "1") { __doPostBack("ImgDownload", $("#slides").CurrentSelectedImg().toString()); }
}
}
}
<asp:Label runat="server" Text="Slider Style" Font-Bold="True" />
<asp:RadioButtonList ID="SliderStyles" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="SliderStyle_OnSelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Text="Default" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="Slide Show" Value="1"></asp:ListItem>
</asp:RadioButtonList>
So far the value I get in my Javascript returns null each time.
Your for loop is incorrect change the "++i" to "i++" like this
for (var i = 0; i < radioObj.length; i++ )
Hello try with getElementsById
<script type="text/javascript">
function BeginDownload() {
var radioObj = document.getElementsById('<%= SliderStyles.ClientID %>');
for (var i = 0; i < radioObj.length; ++i ) {
if (radioObj[i].checked) {
if (radioObj[i].value == "0") { __doPostBack("ImgDownload", $("#waterwheel-carousel-horizon").CurrentSelectedImg().toString()); }
else if (radioObj[i].value == "1") { __doPostBack("ImgDownload", $("#slides").CurrentSelectedImg().toString()); }
}
}
}