I am running one project where i used jquery kendo row template. Here i have to show an url image which is inside div, this complete html code i put in the model
and that model property i am calling in kendo grid row template.
Below is the code of html kendo grid:
<table id="grid" style="width:100%">
<colgroup>
<col class="photo" />
<col class="details" />
<col />
</colgroup>
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td style="width:30%">
#: GetName #
<div class="row">
<div class="col-sm-4">
#: imagelink #
</div>
</div>
</td>
</tr>
</script>
and this imagelink property contains this html code:
<div class="th" style="position: relative; overflow: hidden; width: 116px; height: 65px"><a href='https://www.youtube.com/watch?v=XXR8nnu_fZw23'><div style='margin-top:-11px'><img src='https://img.youtube.com/vi/XXR8nnu_fZw/default.jpg?h=90' width='116' alt='Video for marathon m5 youtube' align='middle'></div><div style='position:absolute;bottom:0;right:0;font-size:11px;color:#fff;background-color:#222;padding:1px 3px;text-decoration:none;font-weight:bold;text-align:right'>► 4:14</div></a></div>
This complete tag if i used outside of this grid then it's working fine showing the image but the same is using inside grid showing the same html code.
Replace #: imagelink # with #= imagelink #
#= # - value is rendered as HTML
#: # - HTML encoding is used to display value
http://docs.telerik.com/kendo-ui/framework/templates/overview
Related
I'm trying to sort several values in a td, I would like to know a more effective way, I used (yadcf) but I couldn't get a property that looks for the value of each tag
Example
Order by:Tag 1 (show taghead name) on click sort tag values
Tag 2
tag 3
datatable:
<table>
<thead>
<tr>
<td>col1</td>
<td>col 2</td>
</tr>
<thead>
<tbody>
<tr>
<td>value</td>
<td>
<div class="tag1">
<div class="taghead">tag1</div>
<div>value</div>
</div>
<div class="tag2">
<div class="taghead">tag2</div>
<div>value</div>
</div>
<div class="tag3">
<div class="taghead">tag3</div>
<div>value</div>
</div>
</td>
</tr>
<tbody>
</table>
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 creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
I am using AbcPdf to convert pdf files into html pages.
It works well but the conversion process adds page number in the header of the pages.
Can I remove them?
<div style="margin:1ex;">
<div style="width:100%">
<table style="border:0;width:100%;">
<tbody>
<tr>
<td bgcolor="eeeeee" align="right">
<font face="arial,sans-serif"> <b>Page 1</b> </font>
</td>
</tr>
</tbody>
</table>
</div>
I had to edit existing custom template in MailChimp service where drag&drop of content blocks isn't working. Template had a lot of nested tables so I contacted their support with response that some of block are nested and it might cause conflicts. To make simple test case scenario I removed most of code, styles and left just one repeatable block with one editable header inside.
I was doing everything as mentioned in this part of documentation.
According to article, on edit screen after clicking on this double arrow some kind of yellow bar should popup but there was nothing happening. I tried to click and drag it.
Question here is how make replicable and draggable content block on MailChimp.
My code below.
<body leftmargin="0" marginwidth="0" topmargin="0" style="color: #fff;" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top" style="padding-right:33px; padding-left:33px; text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateLectures">
<tr>
<td valign="top" style="padding-top:10px; padding-bottom:10px; font-size: 12px;">
<h3 class="imagereplacement" style="text-indent: 100%; white-space: nowrap; overflow: hidden;padding-bottom:10px;"><img src="http://gallery.mailchimp.com/42cd17e5e3c7c6f9274766dc5/images/lectures.png"><span style="display: block !important;">Lectures</span></h3>
<div mc:repeatable="lecture" mc:variant="lecture" class="single_event">
<h5 mc:edit="lecture_event_title">Koloman Moser In Context</h5>
<h6>Thursday, May 23</h6>
<p class="eventtitle">Christian Witt-Dörring</p>
<p class="eventtext">Curator, Koloman Moser, Designing Modern Vienna 1897–1907</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
Save your template. After go in campings, create new camping, click next, after this choose your template, and after this you can drag your blocks and save changes if you want.