HiddenField aspx from TableRow - javascript

I have the following setup currently:
<tr class="NoBackgroundTR">
<asp:HiddenField runat="server" Value='<%# Eval("Adresse").ToString() %>' ></asp:HiddenField></td>
</tr>
This would be pretty much be the code I would want to write:
function setBGColor()
{
var table = document.getElementById("AlleAnzeigenTable");
for (var i = 0, row; row = table.rows[i]; i++) {
// here I would like to get the HiddenField inside of my TableRow
if(row.HiddenField.value != 'someValue')
row.style.backgroundColor = '#F79A03';
}
}
How would I access the Hiddenfield inside of my TableRow?

With jQuery, you can access it like this:
var myHiddenField = $(row).find('input[type="hidden"]');
var value = myHiddenField.val();

If you have hidden field as very first control you can use below code.
But i would recommend to use an ID or ClassName in order to access the HiddenFeild inside row.
var table = document.getElementById("AlleAnzeigenTable");
for (var i = 0, row; row = table.rows[i]; i++) {
var value = row.getElementsByTagName("input")[0].value;
}

Related

How to use javascript AJAX response to create table dynamically

I am working on javascript.
I have some API calls(Using Ajax) in my code.
There is a button in my UI
on click of this button I am making some API call using AJAX and displaying below HTML UI:
In the table above there are 2 rows. Now if I close this popup and then again click on User Dashboard button it will append those 2 rows again in the table. I dont want to append those rows again.
My code to form table using AJAX response looks like below:
getUserAccountDetailsCallback : function(userid, appid, response){
if(response != "")
{
var res = JSON.parse(response);
var totalNoOfApps = document.getElementById('totalSites');
var totalNoOfSubscriptions = document.getElementById('totalSubscribers');
totalNoOfApps.innerHTML = res.totalNoOfApps;
totalNoOfSubscriptions.innerHTML = res.totalNoOfSubscriptions;
if(res.subscriptionsForCurrentAppId.length > 0){
for(var i = 0; i < res.subscriptionsForCurrentAppId.length; i++){
var td1=document.createElement('td');
td1.style.width = '30';
td1.innerHTML=i+1;
var td2=document.createElement('td');
td2.innerHTML=res.subscriptionsForCurrentAppId[i].gatewayName;
var td3=document.createElement('td');
td3.innerHTML=res.subscriptionsForCurrentAppId[i].priceCurrencyIso;
var td4=document.createElement('td');
td4.innerHTML=res.subscriptionsForCurrentAppId[i].amountPaid;
var date = new Date(res.subscriptionsForCurrentAppId[i].subscribedDate);
date.toString();
var td5=document.createElement('td');
td5.innerHTML=date.getMonth()+1 + '/' +date.getDate() + '/' + date.getFullYear();//res.subscriptionsForCurrentAppId[i].subscribedDate;
var td6=document.createElement('td');
td6.innerHTML=res.subscriptionsForCurrentAppId[i].transactionId;
var td7=document.createElement('td');
td7.innerHTML=res.subscriptionsForCurrentAppId[i].active;
var tr=document.createElement('tr');
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
var table = document.getElementById('tbl');
table.appendChild(tr);
}
}
}
}
Please help. Where I am doing wrong.
add thead and tbody
<table>
<thead><tr><th>#</th><th>Gateway.....</tr></thead>
<tbody id="tBodyId"></tbody>
</table>
remove the content of tbody before appending
like this:
var tBody = document.getElementById("tBodyID");
while (tBody.firstChild) {
tBody.removeChild(tBody.firstChild);
}
if(res.subscriptionsForCurrentAppId.length > 0){

Looping RadGrid item in clientside

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;
}
}

How to access radiobutton list value through Javascript?

I am using an ASP.NET RadioButton List which is bind with ObjectDatasource as given in following
Sample code:
<asp:RadioButtonList runat="server" ID="rdabcType" DataSourceID="roleSource" DataTextField="ABCName" DataValueField="ABCID" RepeatDirection="Horizontal">
</asp:RadioButtonList>
<asp:ObjectDataSource ID="abcSource" SelectMethod="GetABCType" runat="server">
<asp:ObjectDataSource/>
I want to access "value" of radio button list in Javascript. Can anyone suggest how to do that.
I believe you can iterate through the collection and look for selected
var radioObj = document.getElementById("rdabcType");
for(radioItem in radioObj){
if(radioObj[radioItem].selected == true){
//TODO: Implement
var radioValue = radioObj[radioItem].value;
}
}
The easiest way to iterate correctly through all the items is:
var types= document.getElementsByName("<%=rdabcType.UniqueID%>");
for (var j = 0; j < types.length; j++) {
var whatYouWant = types[j].value;
}

How can I assign one value to column by js in RadGrid

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.

Loop through gridview rows on client-side javascript

I have a gridview with a template field of check boxes.
I have my rows color coded in BLUE color in the gridview based on a database value on page load.
Now I want a button on the page to loop through the gridview and select the the checkbox for the rows that are in BLUE Color without a post back.
any help would be appreciated.
thanks.
Loop through gridview rows on client-side javascript
var GridviewRows = $("#<%=gvbooksdetails.ClientID%> tr").length;
var rowlenght = GridviewRows - 1;
for (var i = 0; i < rowlenght; i++)
{
var Aname = document.getElementById("MainContent_gvbooksdetails_lblgvauthorname_" +[i]+"").innerHTML;
var Bname = document.getElementById("MainContent_gvbooksdetails_lblgvbookname_" +[i]+ "").innerHTML;
var BType = document.getElementById("MainContent_gvbooksdetails_lblgvbooktype_" +[i]+ "").innerHTML;
var Pubilication = document.getElementById("MainContent_gvbooksdetails_lblgvPublisher_" + [i] + "").innerHTML;
var Bid = document.getElementById("MainContent_gvbooksdetails_hiddenid_"+[i]+"").value;
}
Instead of foreach we can use this method.
$('#mygrid tr.blueClass input[type="checkbox"]').each(
function() {
this.checked = true;
});
Assuming mygrid is the name of your gridview, and each blue row has a class called blueClass

Categories

Resources