There is a radgrid with one of the column as checkbox in
itemtemplate.
I want to loop through this radgrid's items. And based on each item's checkbox.checked condition, enable a seperate button control.(in client-side using javascript)
I've deviced code for this, but it is not giving the desired output.
What's wrong in this please.
Javascript:
<telerik:RadScriptBlock ID="scriptBlock1" runat="server">
<script type="text/javascript">
function checkRestrictionAcceptance()
{
var masterTable = $find("<%=RGGroupedCartRestrictedAssets.ClientID%>").get_masterTableView();
var count = masterTable.get_dataItems().length;
var checkbox;
var item;
for (var i = 0; i < count; i++)
{
item = masterTable.get_dataItems()[i];
checkbox = item.findElement("AcceptedCheckbox");
alert(checkbox.checked);
if (checkbox.checked)
{
var DownloadButton = document.getElementById('DownloadButton');
DownloadButton.enabled = false;
}
}
}
</script>
</telerik:RadScriptBlock>
Aspx:
<telerik:RadGrid ID="RGGroupedCartRestrictedAssets" runat="server" DataSourceID="CslaDSGroupedCartRestrictedAssets" AutoGenerateColumns="False"
GridLines="None" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" EnableEmbeddedSkins="false">
<MasterTableView DataSourceID="CslaDSGroupedCartRestrictedAssets" DataKeyNames="RestrictionText">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<asp:Checkbox ID="AcceptedCheckbox" runat="server" />
</ItemTemplate>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:Button ID="DownloadButton" runat="server" Text = "Test" OnClientClick ="checkRestrictionAcceptance();"/>
You need to specify the clientID of the DownloadButton
var DownloadButton = document.getElementById('<%=DownloadButton.ClientID%>');
I'm not sure which browser you're using, but I think that using the 'i' directly in get_dataItems() can be problematic with Firefox. Your code worked fine for me in IE10 using Telerik.Web.UI 2013.3.1324.45 - I am getting the value of checkbox.checked. Try this instead though, it might help:
function checkRestrictionAcceptance() {
var masterTable = $find("<%=RGGroupedCartRestrictedAssets.ClientID%>").get_masterTableView();
var count = masterTable.get_dataItems().length;
var checkbox;
var items = masterTable.get_dataItems();
for (var i = 0; i < count; i++) {
checkbox = items[i].findElement("AcceptedCheckbox");
alert(checkbox.checked);
if (checkbox.checked) {
var downloadButton = document.getElementById('<%=DownloadButton.ClientID%>');
downloadButton.enabled = false;
}
}
Related
I tried this code on jQuery to change the btn text when I click on a span that opens a modal to add a ShipWay.
$(document).ready(function () {
$("#spanOpen").click(function () {
$("#fulldiv").fadeIn(1000);
$('#titleModal').text('הוספת שלוחה');
$("#ContentPlaceHolder1_btnAddShip").prop('value', 'הוסף');
$('#ContentPlaceHolder1_txtShipName').val('');
$('#ContentPlaceHolder1_txtShipPrice').val('');
$('#ContentPlaceHolder1_txtShipStart').val('');
$('#ContentPlaceHolder1_txtShipEnd').val('');
$('#ContentPlaceHolder1_txtShipPremium').val('No');
});
$(".close").click(function () {
$("#fulldiv").fadeOut(500);
});
});
function UpdateClick(btn)
{
$("#fulldiv").fadeIn(1000);
var row = btn.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
$('#ContentPlaceHolder1_txtShipName').val(row.cells[6].innerHTML);
$('#ContentPlaceHolder1_txtShipPrice').val(row.cells[5].innerHTML);
$('#ContentPlaceHolder1_txtShipStart').val(row.cells[4].innerHTML);
$('#ContentPlaceHolder1_txtShipEnd').val(row.cells[3].innerHTML);
$('#ContentPlaceHolder1_txtShipPremium').val(row.cells[2].innerHTML);
$('#titleModal').text('עדכן שלוחה');
$("#ContentPlaceHolder1_btnAddShip").prop('value', 'עדכן');
return false;
}
This is the button I use in my html for Add/Update the row:
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text=""
CssClass="btn" OnClick="btnAddShip_Click" />
When I tried to check his text in the code behind he said that he have nothing like = "".
This is my code in the C#
In the first if I want to ask if the text of the button is Add
and if not it will be Update in the else
the code go for WebService and to Xml
I tried the code he works well I just need that if will work perfect
because I don't want to create another button
ElectricWSL.Ship ship = new ElectricWSL.Ship();
ship.ShipName = txtShipName.Text.Trim();
ship.ShipPremium = txtShipPremium.Text.Trim();
ship.ShipPrice = double.Parse(txtShipPrice.Text);
ship.ShipStartTime = txtShipStart.Text.Trim();
ship.ShipEndTime = txtShipEnd.Text.Trim();
if (btnAddShip.Text == "הוסף")
{
ws.WSLAddShip(ship);
ShowXMLGrid();
}
else
{
int rowIndex = GetRow(txtShipName.Text);
ws.WSLUpdateShip(ship, rowIndex);
ShowXMLGrid();
}
Answering one of your point in details when i tried to check his text in the code behind it contains like =""
Button text is empty in code because
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text=""
CssClass="btn" OnClick="btnAddShip_Click" />
Add some text to it like
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text="Add"
CssClass="btn" OnClick="btnAddShip_Click" />
And get it in code behind like
if (btnAddShip.Text == "Add")
{
ws.WSLAddShip(ship);
ShowXMLGrid();
}
else
{
int rowIndex = GetRow(txtShipName.Text);
ws.WSLUpdateShip(ship, rowIndex);
ShowXMLGrid();
}
I have one dynamic gridview contains one textbox.when user lost focus from the textbox, i want to get the value using javascript.for that i am using onblur() event in the textbox.but i'm not able to get the value .please find the code below
function validateintforDWOnblur(input) {
var row = input.parentNode.parentNode;
var rowindex = row.rowIndex;
var totaldw = document.getElementById('<%=gdvaddmsrcrt.ClientID%>').rows[rowindex].cells[2].innerHTML;
var totaldw1 = document.getElementById(totaldw.id).value;
var dw = document.getElementById('<%=gdvaddmsrcrt.ClientID%>').rows[rowindex].cells[3].innerHTML;
return true;
}
textbox inside the gridview
<asp:TextBox ID="txtdiswei" runat="server" onblur="javascript:return validateintforDWOnblur(this)" Width="100px" Text='<%# Bind("DW") %>' Height="40" CssClass="form-control"></asp:TextBox>
Please help me to sort this out.
I'm not sure that it is what you want but why don't you try
var value = document.getElementById('<%=yourTextBox.ClientID%>').value;
so for your table you can pass the ClietnId property from eachRow and use it in the javascript function
function doSomething(idOfTheTextBox){
var value = document.getElementById(idOfTheTextBox).value;
}
in html
onblur="doSomething('<%# this.ClientID %>')
if you build server side your rows you can do the following
TextBox txt = new TextBox();
txt.ID = "something1";
txt.Text = "text";
txt.Attributes.Add("onBlur","doSomething('" & txt.ClientID & "')");
CellOfTheGrid.Controls.Add(txt);
have two textboxes defined like so, which are inside a repeater:
<asp:TextBox ID="txtHours" runat="server" CssClass="text misch" Width="50px" Text='<%# Eval("laborHours") %>'/>
<asp:TextBox ID="txtCosts" runat="server" CssClass="text misc" Width="50px" Text='<%# Eval("totalCosts") %>'/>
i also have two boxes where i want to put totals:
<asp:TextBox ID="txtMiscH" runat="server" CssClass="text hours" Width="200px" />
<asp:TextBox ID="txtMisc" runat="server" CssClass="text add" Width="200px" />
when the value in the repeater changes, i want to add them up and put in the appropriate total boxes.
this is where i am now:
//add up miscaleneous mnumbers
//dollar amoungs
$("input[class~='misc']").change(function (event) {
var sum = 0;
var num = 0;
$("input[class~='misc']").each(function (event) {
num = parseInt($(this).val()) || 0;
sum = sum + num;
});
$("input[id*='txtMisc']").val(sum);
$("input[class~='add']").trigger('change');
});
//hours
$("input[class~='misch']").change(function (event) {
var sum = 0;
var num = 0;
$("input[class~='misch']").each(function (event) {
num = parseInt($(this).val()) || 0;
sum = sum + num;
});
$("input[id*='txtMiscH']").val(sum);
});
but it does not look like the first option works at all.
also i saw that there are different ways to select input
input[class~ or input[class* or input[class^
am i using the wrong one?
i guess because misc is also part of misch, it does the calculations for hours, even when i only update the misc costs box. please hep. would renaming class type be the easiest way to fix this?
http://jsfiddle.net/SKYDr/
Rather than using $("input[class~='misc']") you can use selectors which indicates the dom element directly such as below
$("input.misc")
$("input.misc[type=text]")
$("input.misc:text")
Same could be done for input[id*='txtMiscH'] e.g.
$("input#txtMiscH")
$("input#txtMiscH[type=text]")
$("input#txtMiscH:text")
Hope this will help !!
I have Radgrid with all rows always in edit mode. I want following functionality in one of the columns: after item is edited, all rows in this colum take this value. Here is how my column looks like.
<telerik:GridTemplateColumn HeaderText="Opis" HeaderStyle-Width="125px" ItemStyle-Width="120px"
UniqueName="poz_nazwa">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "poz_nazwa")%>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadTextBox runat="server" ID="Rtopis" DataTextField="poz_nazwa" DataValueField="poz_nazwa"
Width="120px" Text='<%#Bind("poz_nazwa") %>' onfocus="javascript:podp(this.id);"
AutoCompleteType="Disabled" onpropertychange="Opisblur()">
</telerik:RadTextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
And here is what i tried and is not working:
function OpisBlur() {
if (event.propertyName == 'value') {
var grid = $find("<%=RadGPozycje.ClientID %>");
var masterTableView = grid.get_masterTableView();
var iloop;
if (masterTableView != null) {
var gridItems = masterTableView.get_dataItems();
var i;
for (i = 0; i < gridItems.length; ++i) {
var gridItem = gridItems[1];
var cell = gridItem.get_cell("poz_nazwa");
var controlsArray = cell.getElementsByTagName('input');
if (controlsArray.length > 0) {
var rdo = controlsArray[0];
rdo.value = "valueofchangeditem";
}
}
}
}
}
There are two most obvious problems with my approach:
I change only selected item, not all. When i try to use masterTableView.get_editItems() IE says that there is no such method.
This code produce stack overflow since function occurs on propertychange, and inside of it i change property.
Can you help me find solution to implement desired functionality?
In your ItemTemplate for the column, can you put a label or something that has a className? Then wouldn't you be able to update everything on the page that has that class with the new value?
$('.poz_nazwaClass').val("valueofchangeditem");
If you don't use jQuery, adding a tag then, element.getElementsByTagName('poz_nazwaTag') then loop through the elements I think.
The issue is that no post back occurs. I noticed that if I returned true this would not be the be case .. however there were non-deterministic results so I am at a loss.
Any help appreciated!
<DropDownList ID="ddlS1" runat="server" onclick = "checkHighDegreeCompliance(this, 1);" SelectedIndexChanged = "ddlS1_SelectedIndexChanged" AutoPostBack="true" >
Here is the markup on the actual page after loading
<select name="rptrSection1$ctl00$rptrSection2$ctl00$ddlS2" class="DDLSelector2 SDropDown IsNormal" id="rptrSection1_ctl00_rptrSection2_ctl00_ddlS2" style="width: 200px;" onchange="checkHighDegreeCompliance(this, 2);setTimeout('__doPostBack(\'rptrSection1$ctl00$rptrSection2$ctl00$ddlS2\',\'\')', 0)">
Here is the javascript
function checkHighDegreeCompliance(obj, sectionNum)
{
var parDdl = $(obj);
var parCompLev = parDdl.attr('selectedIndex');
var pnlDiv = parDdl.parents('.Section');
var ddls = pnlDiv.find('.DDLSelector' + (sectionNum + 1));
ddls.each(function ()
{
var childDDL = $(this);
var childComLev = childDDL.attr('selectedIndex');
if (childComLev > parCompLev)
{
parDdl.attr('selectedIndex', childComLev);
}
if (sectionNum < 4)
{
checkHighDegreeCompliance(childDDL, ++sectionNum);
}
});
}
try with return keyword before the onclick event
<DropDownList ID="ddlS1" runat="server" onclick = "return checkHighDegreeCompliance(this, 1);" SelectedIndexChanged = "ddlS1_SelectedIndexChanged" AutoPostBack="true" >
Let me know if it not worked.