I've created a kendo grid based on a html table. I want the number in the grid to display only 2 decimals, but I can not figure out how to do this. Please help. See my code below.
<table id='test'>
<tr>
<th data-field='field1' data-type='number' data-template='#= kendo.toString(field1, "n2") #'>
ColumnHeader
</th>
</tr>
<tr>
<td>2.2579</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#plStatsGrid").kendoGrid({});
});
</script>
This is a basic scripting error. Your script is looking for table with id plStatsGrid, but your table has id test. Working fiddle.
<table id='plStatsGrid'>
<tr>
<th data-field='field1' data-type='number' data-template='#= kendo.toString(field1, "n2") #'>
ColumnHeader
</th>
</tr>
<tr>
<td>2.2579</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#plStatsGrid").kendoGrid({});
});
</script>
Related
The onclick event is complaining that the java script function is not defined.
<body>
<div layout:fragment="content" th:remove="tag">
<div class="container">
<h6 class="mb-3">Restaurant Order Details</h6>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Order Id</th>
<th scope="col">Order Details</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr th:each="order : ${orders}" style="cursor: pointer"
th:attr="onclick=|getOrderItems('${order.orderId}')|">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td th:text="${grandTotal}"></td>
</tr>
</tbody>
</table>
<div class="mb-4"></div>
</div>
</div>
<script>
function getOrderItems(orderId) {
alert("order details here");
}
</script>
</body>
When I click on the table row I get
Uncaught ReferenceError: getOrderItems is not defined
at HTMLTableRowElement.onclick
When I replace getOrderItems with a simple alert instead, the alert is fired. How do I fix this?
I know this is probably not the answer you looking for, it's just a suggestion:
In JavaScript, you can actually use the thymeleaf variables like this:
var myVar = [[${order.orderId}]];
The issue here was I declared my <script> outside the <div layout:fragment="content" th:remove="tag"> tag. Since this is a fragment, thymeleaf only rendered everything within this scope. Putting the script tag inside this solved the issue.
You are not passing thymeleaf variable to javascript. You can issue <script> outside your (just above </body>) and still pass variable to JS.
<script th:inline="javascript">
/*<![CDATA[*/
var orders = [[${orders}]];
function getOrderItems(orders) {
alert("order details here ");
}
/*]]>*/
</script>
Then you can call JS method on your html onclick event.
<tr th:each="order : ${orders}" style="cursor: pointer"
th:attr="onclick=|getOrderItems(orders)}')|">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
However, I still see a challenge if you wish to pass every single order to javascript. I haven't used <script> inside the th:each loop.
I am using DataTables and moment and have custom date format on my table.
How can I sort the column by moment?
Here you can see that sorting does not work correctly updated_at column.
I am using Datatable moment. Update_at format already changed by Carbon on Model.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<div class="table-responsive">
<table id="tickets-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>User name</th>
<th>Last update</th>
</tr>
</thead>
<tbody>
<tr>
<td>saddsfdsafdfsafsa</td>
<td>Sqe Begush</td>
<td>1 hour ago</td>
</tr>
<tr>
<td>testing</td>
<td>User name</td>
<td>8 hours ago</td>
</tr>
<tr>
<td>another</td>
<td>another user</td>
<td>4 days ago</td>
</tr>
<tr>
<td>another testing</td>
<td>user user</td>
<td>1 week ago</td>
</tr>
<tr>
<td>another testingsss</td>
<td>user user11</td>
<td>1 year ago</td>
</tr>
<tr>
<td>another test</td>
<td>user userqww11</td>
<td>4 months ago</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
<script>
$(document).ready(function() {
//$.fn.dataTable.moment("YYYY/MM/DD");
$('.table').DataTable();
});
</script>
The origin of the dates is unclear. If you pass moment().fromNow() yourself then just stop doing it when the display type is sort (see below). If you get already formatted data from a source you can use a library like chrono, which can parse "human dates" into "system dates":
var table = $('#tickets-table').DataTable({
columnDefs: [
{ targets: 2,
render: function(data, type) {
if (type == 'sort') {
var date = chrono.parseDate(data)
return new Date(date).valueOf()
}
return data
}
}
]
})
demo with the <table> above -> http://jsfiddle.net/mw0c3f91/
you have to convert the column dates to required format and then Sort the table.
moment(col[0]).fromNow();
I'm using scrapy to parse a doc, this code is like my code structure that I want to parse, I want to get TD text by TH name, How ?
<div id="m_PanelField">
<table width="100%" cellspacing="1" border="0">
<tbody>
<tr>
<th>Etat</th>
<td>XyXy</td>
</tr>
<tr>
<th>IP</th>
<td>XX.XX.XX.XX</td>
</tr>
<tr>
<th>Alias</th>
<td>lorem ipsum</td>
</tr>
</tbody>
</table>
</div>
//td[../th='Etat'] OR .//tr[th='Etat']/td
Thank's for #helderdarocha and #paul-trmbrth
I am tried to create table structure with header,body,footer in listview which works fine.
But in footer which is in layouttemplate, i tried to add below code which gives error.
<LayoutTemplate>
<table class="sampletable" cellpadding="0" cellspacing="0">
<thead class="tableheader">
<tr>
<th>
<a>Samples </a>
</th>
</tr>
</thead>
<tbody class="tablebody">
<tr id="itemplaceHolder" runat="server">
</tr>
</tbody>
<tfoot class="tablefooter">
<tr>
<td>
<a href='<%:Page.GetRouteUrl("samplelist",null) %>'>more sample</a>
</td>
</tr>
</tfoot>
</table>
</LayoutTemplate>
Is it not allowed to place in layouttemplate?
The error is
"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."
Use the 'RouteUrlExpressionBuilder'.
Link
Properly documented at MSDN.
When the page loads, all the records show. Sorting works great until show-hide is used to filter the rows so only some show. Then the header row--with the arrows for sorting--DISAPPEARS. The problem is only in Firefox. It works great in IE7 and IE8.
I'm using jQuery 1.4.2 from Google.
Code for show-hide
$(document).ready(function() {
// show all the rows
$("#org_status tr").show();
//find selected filter
$("#filter_status a").click(function(evt) {
evt.preventDefault();
$("#org_status tr").hide();
var id = $(this).attr('id');
$("." + id).show();
});
});
Here is the HTML:
<!-- show-hide "buttons" -->
<p id='filter_status'>Filter by status:
<a href='#' id='All'>All</a>
<a href='#' id='Active'>Active</a>
<a href='#' id='Inactive'>Inactive</a>
<a href='#' id='Pending'>Pending</a>
</p>
<!-- table to sort ->
<table id='org_status' class='info_table tablesorter'>
<thead>
<tr>
<th class='org-name-col'>Name</th>
<th class='org-status-col'>Status</th>
</tr>
</thead>
<tbody>
<tr class='All Active'>
<td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
<td>Active</td>";
</tr>
<tr class='All Inactive'>
<td><a href='admin/org_edit.php?org=22'>Bar</a></td>
<td>Active</td>";
</tr>
<tr class='All Pending'>
<td><a href='admin/org_edit.php?org=11'>
Bar Foo Very Long Org Name Goes Here</a></td>
<td>Active</td>";
</tr>
</tbody>
</table>
I don't think this is just an issue for firefox because the header row is first made to hide and the code deosn't show it up later.
Try changing the code as follows:
Javascript:
$(document).ready(function() {
// show all the rows
$("#org_status tr").show();
//find selected filter
$("#filter_status a").click(function(evt) {
evt.preventDefault();
$("#org_status tr").hide();
var id = $(this).attr('id');
$("." + id).show();
$(".showAlways").show();
});
});
HTML:
<p id='filter_status'>Filter by status:
<a href='#' id='All'>All</a>
<a href='#' id='Active'>Active</a>
<a href='#' id='Inactive'>Inactive</a>
<a href='#' id='Pending'>Pending</a>
</p>
<table id='org_status' class='info_table tablesorter'>
<thead>
<tr class="showAlways">
<th class='org-name-col'>Name</th>
<th class='org-status-col'>Status</th>
</tr>
</thead>
<tbody>
<tr class='All Active'>
<td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
<td>Active</td>";
</tr>
<tr class='All Inactive'>
<td><a href='admin/org_edit.php?org=22'>Bar</a></td>
<td>Active</td>";
</tr>
<tr class='All Pending'>
<td><a href='admin/org_edit.php?org=11'>
Bar Foo Very Long Org Name Goes Here</a></td>
<td>Active</td>";
</tr>
</tbody>
</table>