I have an ASP.NET MVC application that popup a jQuery dialog. Inside the dialog I have a table that I built dynamicly from a Model I get from controller:
This is the dialog table html:
<script type="text/javascript">
$(function () {
$('#btnslide').click(function () {
});
$('#dtnotes tr').click(function () {
var noteUid = $(this).attr("noteuid");
//*******
// here somehow i need to filter my #Model to get the item
// and then update my DIV 'slideinner' with the details data.
//*******
$(".slideinner").slideToggle();
});
});
</script>
<div class="widget widget-table">
<div class="widget-header">
<span class="icon-list"></span>
<h3 class="icon chart">
Notes</h3>
</div>
<div class="widget-content">
<table id="dtnotes" class="table table-bordered table-striped data-table">
<thead>
<tr>
<th>
Subject
</th>
<th style="width: 70px;">
Type
</th>
<th style="width: 70px;">
UserName
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="gradeA" noteuid="#item.NoteUid">
<td>
#item.Subject
</td>
<td>
#item.NoteTypeDesc
</td>
<td nowrap>
#item.UserName
</td>
</tr>
}
</tbody>
</table>
<button id="btnslide">slide it</button>
</div>
<!-- .widget-content -->
</div>
<div class="slideinner">
<p>Subject</p>
<p>Body</p>
</div>
<!-- .widget -->
I have also a div at the bottom that is a slide div. So when the user clicks on a table row then the div slides up.
What I want is to click on that table row and the DIV must show extra detail information from my Model item.
So I guess I have to be able to get the Model item from the table row "item.NoteUid" key, then update using jquery the "slideinner" div with the item model data.
Hope someone can help me. Appreciate
You can render all the model data you need in the table body and hide the ones you need to with css display:none. I hid the #model.body value in a so you can so retrieve with jquery
$('#dtnotes tr').click(function () {
var noteUid = $(this).attr("noteuid");
//*******
$('.slideinner > p.body').html($(this).children('.body').html());
$('.slideinner > p.subject').html($(this).children('.subject').html());
//*******
$(".slideinner").slideToggle();
});
<tbody>
#foreach (var item in Model)
{
<tr class="gradeA" noteuid="#item.NoteUid">
<td class="subject">
#item.Subject
</td>
<td class="body" style="display:none;">
#item.Body
</td>
<td class="notetypedesc">
#item.NoteTypeDesc
</td>
<td nowrap>
#item.UserName
</td>
</tr>
}
</tbody>
<div class="slideinner">
<p class="subject">Subject</p>
<p class="body">Body</p>
</div>
Related
I need to print POS receipt from sale order with same products qty etc.
In Sale order I have created a button "Print POS receIpt". with this button I want to trigger a method that prints out a receipt with sale order lines on it.
So I need to find the method that creates POS receipts and pass the sale order line values to it.
So which method is printing receipts in POS and how can I trigger it? Is it in models.js?
In those Odoo versions, the receipts that are being printed in the POS are a screen capture (actually only the receipt div) made by JavaScript. But you cannot use this approach on the Sale Order view.
However, there is another way to print tickets into PDF with a normal Qweb Report. If you click on the POS menu you will find the "Orders" menu option on the left margin. You will have the print option under the "Print" menu on the form and list view.
If you go to the point_of_sale module you will find the report_receipt.xml file written with the Qweb language. You can customize it to make it work with the sale.order model. But take into account that the paperformat should be point_of_sale.paperformat_posreceipt, you will find the paperformat assigment at the bottom of these code:
<template id="report_receipt">
<t t-call="report.html_container">
<t t-foreach="docs" t-as="o">
<div class="page">
<div class="row">
<div class="col-xs-12 text-center">
<h2 t-esc="o.user_id.company_id.name"/>
<div t-field="o.partner_id"
t-field-options='{"widget": "contact", "fields": ["address", "name", "phone", "fax"], "no_marker": true}'/>
User: <span t-field="o.user_id"/><br/>
Date: <span t-field="o.date_order"/><br/>
</div>
</div>
<div class="row">
</div>
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Quantity</th>
<th class="text-right">Price</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.lines" t-as="line">
<td><span t-field="line.product_id"/></td>
<td class="text-right">
<t t-if="o.state != 'cancel' and o.statement_ids">
<span t-field="line.qty"/>
</t>
</td>
<td class="text-right">
<t t-if="o.state != 'cancel' and o.statement_ids">
<span t-esc="formatLang(net(line.id), currency_obj=res_company.currency_id)"/>
</t>
<t t-if="line.discount != 0.0">
<span t-esc="line.discount"/>%
</t>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 pull-right">
<table class="table table-condensed">
<tr class="border-black">
<td><strong>Taxes</strong></td>
<td class="text-right">
<strong t-esc="formatLang(o.amount_tax, currency_obj=res_company.currency_id)"/>
</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td class="text-right">
<strong t-esc="formatLang(o.amount_total, currency_obj=res_company.currency_id)"/>
</td>
</tr>
</table>
</div>
</div>
<table class="table table-condensed">
<thead>
<tr>
<th>Payment Mode</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr t-foreach="get_journal_amt(o)" t-as="d">
<td>
<span t-esc="d['name']"/>
</td>
<td>
<span t-esc="formatLang(d['amt'], currency_obj=res_company.currency_id)"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
</template>
<report
id="action_report_pos_receipt"
string="Receipt"
model="pos.order"
report_type="qweb-pdf"
name="point_of_sale.report_receipt"
file="point_of_sale.report_receipt"
/>
<record id="action_report_pos_receipt" model="ir.actions.report.xml">
<field name="paperformat_id" ref="point_of_sale.paperformat_posreceipt"/>
</record>
I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?
I want to open a another <tr> tag when first <tr> is click.
The code is :
<tr class="msg_inner">
<td><label>some text</label></td>
<tr id="full_msg" style="display:none">
<td><label>Hey There.....</label></td>
</tr>
</tr>
script
$('.msg_inner').click(function(){
$('#full_msg_'+no+'').toggle("slow");
});
it display block but all is open at same time. I want to display that block after <tr> is click.
Don't use another <tr>.
Just add a <div> in your td and simply show him like that
HTML :
<table>
<tr class="line">
<td>
Hi there !!
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
</table>
CSS
.detail{
display:none;
}
JQuery
$(".line").click(function(){
$(this).find(".detail").toggle();
});
Working Fiddle here
you can try this one:
var x=0;
$(".line").click(function(){
if((x%2)==0)
{
$(this).find(".detail").show();
}
else
{
$(this).find(".detail").hide();
}
x++;
});
DEMO HERE
Or
Toogle Method
$(".line").click(function(){
$(this).find(".detail").toggle(1000);
});
DEMO HERE
I have a Bootstrap accordion table that shows a hidden table with content whenever someone clicks anywhere on the row. The hidden table is then a different color (#DDD). What I'm trying to achieve is have the actual row changing the color too when clicked and opened and changing back to white when it is closed.
How would I achieve that?
Here is the HTML markup I currently have:
<table class="table">
<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div>
</td>
</tr>
</tbody>
</table>
and the CSS:
.hiddentablerow{
padding: 0px 0px !important;
background-color: #DDD;
}
And of course a fiddle: http://jsfiddle.net/kxtk6w4y/
You can use jQuery to fire an onClick for the row clicked that toggles the hidden row.
Fiddle
And here's the snippet I created for it:
$('.accordion-toggle').click(function() {
if ( $(this).attr('aria-expanded') == "true" ) {
$(this).children().css('background-color', '#FFF');
} else {
$(this).children().css('background-color', '#DDD');
}
});
I am working on an application.
The requirement is I have a table and each row is populated via ng-repeat from json data.
While clicking on each row the row has to expand and there would be an nested table and clicking on any row on nested table will expand that row and there would be another nested table.
Till now I am not even able to get the first nested table to open while clicking on row.
Ideally I prefer the each nested view to have a separate html template, but for simplicity I am trying with normal collapsible div.
Here is my code.
<div class="col col-md-12 col-sm-12 col-xs-12">
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Name</th>
<th>Description</th>
<th>Size</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#endpoints" data-ng-repeat="data in datafromservice">
<td>{{data.id}}</td>
<td>{{data.status}}</td>
<td>{{data.name}}</td>
<td>{{data.description}}</td>
<td>{{data.size}}</td>
<td>{{data.level}}</td>
<!-- edit button -->
<td class="edit"><i class="glyphicon glyphicon-pencil"></i>
</td>
<!-- button button -->
<td class="delete"><i class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
<div class="collapse" id="endpoints">
<p>Hello world</p>
</div>
</table>
</div>
I must be missing something very obvious, and I am not able to figure out.