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>
Related
<script language="javascript" type="text/javascript">
function sumCalc() {
var _txt1 = document.getElementById('<%= TextBox1.ClientID %>');
var _txt2 = document.getElementById('<%= TextBox2.ClientID %>');
var _txt3 = document.getElementById('<%= TextBox3.ClientID %>');
var _txt4 = document.getElementById('<%= TextBox4.ClientID %>');
var _txt5 = document.getElementById('<%= TextBox5.ClientID %>');
var t1 = 0, t2 = 0, t3 = 0, t4 = 0;
if (txt1.value != "") t1 = txt1.value;
if (txt2.value != "") t2 = txt2.value;
if (txt3.value != "") t3 = txt3.value;
if (txt4.value != "") t4 = txt4.value;
_txt5.value = parseInt(t1) + parseInt(t2) + parseInt(t3) + parseInt(t4) ;
}
</script>
<div>
<asp:TextBox ID="TextBox2" runat="server" Onchange="return sumCalc();"></asp:TextBox>
<div>
<asp:TextBox ID="TextBox3" runat="server" Onchange="return sumCalc();"></asp:TextBox>
<div>
<asp:TextBox ID="TextBox4" runat="server" Onchange="return sumCalc();"></asp:TextBox>
<div> Total:<asp:TextBox ID="TextBox5" runat="server" ></asp:TextBox></div>
In ASP.Net Code
<div>
<asp:TextBox ID="TextBox1" runat="server" onchange="sumCalc()"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" onchange="sumCalc()"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" onchange="sumCalc()"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server" onchange="sumCalc()"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</div>
In Javascript
<script type="text/javascript">
function sumCalc()
{
var _txt1 = document.getElementById("TextBox1").value;
var _txt2 = document.getElementById("TextBox2").value;
var _txt3 = document.getElementById("TextBox3").value;
var _txt4 = document.getElementById("TextBox4").value;
if (_txt1 == "")
_txt1 = 0;
if (_txt2 == "")
_txt2 = 0;
if (_txt3 == "")
_txt3 = 0;
if (_txt4 == "")
_txt4 = 0;
var total = parseInt(_txt1) + parseInt(_txt2) + parseInt(_txt3) + parseInt(_txt4);
if (!isNaN(total)) {
document.getElementById('TextBox5').value = total;
}
}
</script>
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
I have a GridView that has a TemplateField in it, that has a TextBox inside it. I found code that will allow the user to press enter and go to the next TextBox in the Grid just like the tab key would. The only problem is that it's skipping the next TextBox and going to the TextBox after that. It's weird it skips a TextBox everytime you press enter. I don't know enough about Javascript to fix it. Can someone look at m y code?
My Javascript:
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e;// IE : Moz
if (e.keyCode == 13) { // 9 for Tab and 13 for enter
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 2;
if (obj == ele[i]) {
//focus TextBox on next row
ele[q].focus();
break
}
}
e.returnValue = false;
if (typeof event == 'undefined')
e.preventDefault();
}
}
My GridView
<asp:GridView ID="gvPackRegular" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true"
CssClass="GridView" runat="server" Width="100%">
<AlternatingRowStyle CssClass="alt" />
<Columns>
<asp:TemplateField HeaderText="Carton" HeaderStyle-CssClass="GridViewHeader">
<ItemTemplate>
<asp:Label ID="lblPackName" runat="server" Text='<%# Eval("CartonType.Description") %>'></asp:Label>
<asp:Label ID="lblCartonTypeID" runat="server" Text='<%# Eval("CartonType.CartonTypeId") %>'
Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity" HeaderStyle-CssClass="GridViewHeader">
<ItemTemplate>
<asp:TextBox ID="txtPackQty" runat="server" Text='<%# Bind("Pack") %>' CssClass="SmallTextbox"
onchange="invalidate();" onfocus="selectTextonFocus(this);" onkeydown="tabE(this,event)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The problem is in i+2
Change
var q = (i == ele.length - 1) ? 0 : i + 2;
To
var q = (i == ele.length - 1) ? 0 : i + 1;
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;
}
I have a GridView with three COlumns Which will be like this:
ID Sign Amount
------ -------- ---------
1 + 1000
2 - 500
3 - 750
So the Sum of the Column "Amount" Should be "-250". Consider the Column "Sign" also with the Amount.
Here is my GridView's Source Code:
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID"/>
<asp:TemplateField HeaderText="Sign" >
<ItemTemplate>
<asp:TextBox ID="txtgvSign" runat="server" Text='<%# Bind("Sign") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:TextBox ID="txtAmount" runat="server" Text='<%# Bind("Amount") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
So far, I have written One JavaScript, But It Only Calculate the Sum of Amount. I dont know how to calculate the Sum based on the Sign values. Below is the JavaScript I have written:
function CalculateTax(fixedtotal)
{
var taxgrid = document.getElementById('<%=gvAttribute.ClientID %>');
var taxip = taxgrid.getElementsByTagName('input');
var taxamount = 0*1;
for(i = 0; i < taxip.length; i++)
{
var tax = taxip[i].value;
taxamount = parseFloat(taxamount) + parseFloat(tax);
}
return parseFloat(fixedtotal) + parseFloat(taxamount);
}
So Please Make Changes to this Javascript.
can you try the below code?
function CalculateTax(fixedtotal)
{
var taxgrid = document.getElementById('<%=gvAttribute.ClientID %>');
var taxip = taxgrid.getElementsByTagName('input');
var taxamount = 0*1;
for(i = 0; i < taxip.length; i+= 2)
{
var sign = taxip[i].value;
var tax = taxip[i+1].value;
taxamount = parseFloat(taxamount) + (sign =='+' ? 1 : -1)* parseFloat(tax);
}
return parseFloat(fixedtotal) + parseFloat(taxamount);
}
<script language="javascript" type="text/javascript">
function Calculate() {
var grid = document.getElementById("<%=grid.ClientID%>");
var sum = 0;
for (var i = 1; i < grid.rows.length; i++) {
var Cell = grid.rows[i].getElementsByTagName("input");
if (!Cell[4].value) {sum += 0; } else { sum += parseFloat(Cell[0].value);}
}
alert(sum);
}
</script>
<asp:TemplateField HeaderText="Current payment" >
<ItemTemplate>
<asp:TextBox ID="txtvalue" runat="server" Width="70px" BorderStyle="None" onkeyup="Calculate();" ></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="120px" />
</asp:TemplateField>`enter code here`