I made this invoice page.
There is a repeater that generates a table.
There are invoice item descriptions coming into td tags encapsulated with div tags
like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td class="griditem text">
<div class="invoiceDescription" id='<%# "item-" + Eval("ID") %>' value='<%# Eval("ID") %>' onclick="InvoiceItemClicked(this);">
<%# Eval("Description") %>
</div>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:n}", Eval("Quantity"))%>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:c}", Eval("UnitCost"))%>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:c}", Eval("Total"))%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
If you see the first line, I call a javascript onclick. The function is like this (uses jQuery):
function InvoiceItemClicked(elm) {
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.value = $(elm).text();
$(elm).html(textbox);
}
This is the first time I try to do sth like this, and it worked in the first shot. It transforms lines into textboxes with same text set into them. But the problem is when the generated textbox is clicked (focus), the text inside it disappears.
I will also appreciate any other best practices to do this inline editing. I need to then update the items via webservices etc..
Thanks in advance.
yep my bad!
function InvoiceItemClicked(elm) {
var b = $(elm).hasClass('invoiceDescriptionEditing');
if(!b)
{
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('id', 'txt');
$(textbox).css('width', '550px');
textbox.value = $(elm).text();
$(elm).html(textbox);
$(elm).removeClass('invoiceDescriptionEditable');
$(elm).addClass('invoiceDescriptionEditing');
}
}
this is aight! :)
Related
Here is the c# file code in which i want to get radio button to every out put so that i can chosen option as we do in "mcqs".
public HtmlString questions_sec1()
{
int userid = Convert.ToInt32(Session["USERID"]);
List<DAO_getQuestiones> get_question_sec1 = new List<DAO_getQuestiones>(DAO_getQuestiones.get_question_sec1(userid)); // data to fech first section
string content = "";
HtmlString theEnvelopePlease = null;
try
{
foreach (var obj in get_question_sec1)
{
content = content + "<tr><td> " + obj.get_question_id + "</td> <td>" + obj.get_answer_question + "</td><td>"+ <input type="radio" name="d" value="data"> DATA +"</td></tr>";
}
theEnvelopePlease = new HtmlString(content);
return theEnvelopePlease;
}
catch (Exception ex)
{
content = content + ex;
theEnvelopePlease = new HtmlString(content);
return theEnvelopePlease;
}
}
Here is the code of html call which is returning the function of cs file for rendering:
<table>
<thead>
<tr>
<th>Sr.</th>
<th>Questions</th>
<th>Answers</th>
</tr>
</thead>
<tbody>
< %:questions_sec1() % >
</tbody>
</table>
Question: I want the radio button to every out put of answer so that i can chose one option and one more thing.
It is difficult to add form element with HTML string into ASP.NET form.
Instead, I suggest you to use a 'Repeater':
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate>
<table>
<thead>
<tr>
<th>Sr.</th>
<th>Questions</th>
<th>Answers</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td> <%#Eval("get_question_id ") %> </td>
<td> <%#Eval("get_answer_question ") %> </td>
<td> <asp:RadioButton ID="RadioButton" runat="Server" Text="DATA" /> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
And in your .cs file, bind the data to the Repeater like this:
Repeater1.DataSource = get_question_sec1;
Repeater1.DataBind();
Here is the MSDN link of Repeater: https://msdn.microsoft.com/en-US/library/system.web.ui.webcontrols.repeater.itemtemplate(v=vs.110).aspx
Thanks for your responce but i dn't want to you built in control from the tool box of asp.net.
I have a row which has a server side control. Depending on a condition I need to remove the row completely, so that the HTML cannot be read by screen-readers and re-added later when the condition is changed.
here is the code i am trying but it is not working
my original ASPX
table id="tblmain" width="100%">
<tr>
<td valign="top">
<div id="studysub_animal" runat="server">
<h3>
Select the vALUE.</h3>
<asp:RadioButtonList ID="rdb_one" runat="server">
<asp:ListItem Value="Humans">Humans</asp:ListItem>
<asp:ListItem Value="Non-Human primates">Non-Human primates</asp:ListItem>
</asp:RadioButtonList>
</div>
</td>
</tr>
<tr id="tr_optional">
<td>
<h3> Select your second value</h3>
<asp:RadioButtonList ID="rdb_two" runat="server">
<asp:ListItem>Individuals</asp:ListItem>
<asp:ListItem>Population</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
This is the jquery i am writing
$('#<%=rdb_one.ClientID%> input:radio').click(function () {
var currentIdone = 'Humans';
var currentId = $(this).val();
var row = $('#tr_optional');
if (currentId == currentIdone) {
if ($('#tr_studypopul').length) {
}
else {
$('#tblstudysub_animal').append(row);
}
}
else {
$('#tr_studypopul').detach();
}
});
any idea. how can i add and remove the row conditioanlly.
When the page first loads it loads the row it is only hidden or visible depending on the answer
Like David said, you cannot add server-side controls dynamically. However, since it will be shown later on based on conditions, why not just hide it? Try use javascript document.getElementsById().style.display = 'none'. And when you show it, change "none" to "block". It worked for me.
I want the stored value in "val" and assgined to the textbox in the gridview. I'm able to loop and find the rows but not the control. I'm getting a undefined error message. What I'm missing that I cannot find the control . Attached is the sample code:
<!--Javascript Code-->
<script type="text/javascript">
function SetPIN(val)
{
if (Searching == 'eID')
{
var num = val;
var grdvw = document.getElementById('gvEvents');
for (var rowId = 1; rowId < grdvw.rows.length -1; rowId++){
var txtbx = grdvw.getElementById('txtEvtTo').value;
txtbx = num;
}end for
}
}
</script>
<asp:GridView ID:gvEvents runat="server" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtEvtTo" runat="server" Width="250px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I've tried different options that I've online but I haven't been able to get the value to textbox
Any suggestions would be greatly appreciate it.
DR
Don't look at the html markup in the IDE, but the rendered html as shown in "view page source" of your browser. asp control id's get mangled when rendered, so unless you set the control's ClientIDMode to Static, your call to getElementById won't work for finding the gridview or the cell controls.
Here are a couple of sample data rows from one of my gridviews:
<tr class="gvRowStyleContactList " valign="middle">
<td>
<span id="ctl00_ctl00_cphMain_IEHContent_gvEscalationContactListView_ctl02_lblEmailAddress">x#v.com</span>
</td>
</tr>
<tr class="gvRowStyleContactList " valign="middle">
<td>
<span id="ctl00_ctl00_cphMain_IEHContent_gvEscalationContactListView_ctl03_lblEmailAddress">xx#vv.com</span>
</td>
</tr>
How can I hide a specific TD in my Table ?
Rendered page:
<table>
<tr>
<th>Codigo</th>
<th>Tipo</th>
<th>(L/V)</th>
<th>Endereco</th>
<th>Propostas Ativas</th>
<th>Cons</th>
</tr>
<tr>
<td>373054</td>
<td>Apartamento</td>
<td>V</td>
<td>Rua DO FURQUIM</td>
<td>1</td>
<td>0</td>
</tr>
</table>
ASP page:
<asp:GridView ID="grdImoveis" Width="100%" runat="server" AutoGenerateColumns="false" DataSourceID="dsGrid" OnRowDataBound="grdImoveis_DataBound">
<Columns>
<asp:BoundField HeaderText="Código" DataField="Imovel_Id" />
<asp:BoundField HeaderText="Tipo" DataField="TipoDsc1" />
<asp:BoundField HeaderText="(L/V)" DataField="TransacaoSigla" />
<asp:TemplateField HeaderText="Endereco">
<ItemTemplate>
<%# Eval("Descricao") %> <%# Eval("Logradouro") %>, <%# Eval("Numero") %> - <%# Eval("Expr1") %> <%# Eval("Complemento") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Propostas Ativas" DataField="NumeroProposta" />
<asp:BoundField HeaderText="Cons" DataField="FoundInSanNegocio" />
</Columns>
</asp:GridView>
Drawing (Example):
Código Tipo (L/V) Endereço Propostas Ativas Cons
373054 Apartamento V Rua Do Furquim 1 0
I want to get via JQuery the value of the last column (Cons), but the user can't see this column. How can I hide and get the value of this column in each line ?
Easiest way is:
$(document).ready(function(){
$('#<%=grdImoveis.ClientID %>').find('tr').each(function(){
$(this).find('td:last').hide();
});
});
To get the value on click or some other event you can use:
var value= $(this).find('td:last').text();
Assuming your Cons column is always the last one of your table, this should do it:
var myVar = '';
var myArray = new Array();
$('tr').each(function() {
//this fetches the text content of the last cell of the current row:
myVar = $(this).children("td:last").text();
//this puts that value at the end of the myArray array
myArray.push(myVar);
//this hides that td
$(this).children("td:last").hide();
});
I made a jsfiddle for it, seems to work.
http://jsfiddle.net/qnvHM/
Check what the ID of you table is. Assuming it's grdImoveis, then:
// Hide last column and and get its value (text)
var comp = $("#grdImoveis TD:last").hide().text();
I have gridview with four columns. All the data inside is generated in RowDataBound event using Literals
eg.
<asp:TemplateField HeaderText="" >
<ItemTemplate>
<asp:HiddenField ID="ID" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
and
<asp:TemplateField HeaderText="" HeaderStyle-HorizontalAlign="Center"
ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Literal ID="lrtBrief" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
In one of these Literals I am creating a <a> tag and I want to find the <%#Eval("id")%> value in click event of the <a> tag.
I did try something like this but didn't work
$('.contactLink').click(function () {
var grd = $('#MainContent_cphMain_DisplayResults1_gvDisplay');
var txt = $(grd).find("cells[1].innerHTML").html();
});
HTML Looks Like this
<td align="center" style="width:5%;">
<input id="MainContent_cphMain_DisplaySearchResults1_gvListing_Listing_0" type="hidden" value="1" name="ctl00$ctl00$MainContent$cphMain$DisplaySearchResults1$gvListing$ctl02$Listing">
<table class="contact">
<tbody>
<tr>
<td valign="top">
<h3>Test</h3>
<h3>
<a id="hlContact" class="contactLink format" runat="server">Contact</a>
<a id="hlViewF" class="viewLink format" href="CategoriesSearch.aspx?ID=1" runat="server">View </a>
</td>
</tr>
</tbody>
</table>
</td>
Any help will be appreciate
Thanks
Note that you're missing a closing h3 around your two links.
$(".contactLink").click(function() {
var value = $(this).closest("table") // Get the <a>'s closest <table>
.siblings(":hidden") // <hidden>
.val();
});
Fiddle for reference.
if I understand your question right:
In one of these Literals I am creating a tag and I want to find
the <%#Eval("id")%> value in click event of the tag.
I would say something like this would do the trick
$('a').live("click", function () {
alert($(this).attr("id"))
});