How to get compose view work with a InlineViewStrategy - aurelia

I am trying to get a conpose view going in a InlineViewStrategy.
The simple , "hard coded" table view in a custom template works in the context of a higher level div tag ("x_content") as represented in the Vendor Spend for Maintain below passed into InlineViewStrategy
' <table class="" style="width:100%">',
' <tr>',
' <th style="width:37%;">',
' <p>Top 5</p>',
' </th>',
' <th>',
' <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">',
' <p class="">Vendor</p>',
' </div>',
' <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">',
' <p class="">Progress</p>',
' </div>',
' </th>',
' </tr>',
' <tr>',
' <td>',
' <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>',
' </td>',
' <td>',
' <table class="tile_info">',
' <tr>',
' <td>',
' <p><i class="fa fa-square blue"></i>Vendor 1 </p>',
' </td>',
' <td>30%</td>',
' </tr>',
' </table>',
' </td>',
' </tr>',
' </table>',
If I try to put the same content (verbatim wrapped with a template) in an html file (ie. test-view.html) and do a compose on test-view.html replacing the HTML with compose AND PASSING THAT to InLoneViewStrategy, I get a a blank screen
<compose view="./test-view.html"> </compose>
I get on the console, "Unhandled rejection Error: Load timeout for modules: template-registry-entry!test-view.html,text!test-view.html". Is there somewhere else that I should be putting this test-view.html? Or am I missing something?
to be more specific
[
' ... '
' <div class="x_content"> ',
' HTMLTABLE STUFF ',
' </div> '
' ... ].join( " ")
get replaced by
[
' ... '
' <div class="x_content"> ',
' <compose view="./test-view.html"> </compose>',
' </div> '
' ... ].join( " ")
in custom template which is then passed to InlineViewStrategy
Thanks, in advance your help.

test-view.html has to be in the relevant directory... in this case , at src level

Related

Render html code in Vue.Js without using v-html

I am facing a strange problem.
I use VueTableDynamic as a table library (https://github.com/TheoXiong/vue-table-dynamic)
The whole implementation is correct but there is a small problem... I have certain columns that I want to render with html (for example I want to put a download icon with an href)
this.invoices_params.data.push([
invoice.invoice_number,
invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
invoice.total,
(119 / 100) * invoice.total,
invoice.media.length > 0 ?
`<a href=${invoice.media[0].original_url}>Download invoice</a>` :
'No invoice',
moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
<div class="col-lg" v-if="checkbox_invoices">
{{ trans.invoices.title }}
<vue-table-dynamic :params="invoices_params"></vue-table-dynamic>
</div>
But I can't render that html code and I don't think I can use v-html either
Is there just a way to put that icon there?
I tried to put automatic html code but in vain.
The library allows you to customize the content of a cell using slots: https://github.com/TheoXiong/vue-table-dynamic#slot
Example:
<template>
<vue-table-dynamic :params="params">
<template v-slot:column-5="{ props }">
<a v-if="props.cellData" href=${props.cellData}>Download invoice</a>
<span v-else>No invoice</span>
</template>
</vue-table-dynamic>
</template>
<script>
[...]
this.invoices_params.data.push([
invoice.invoice_number,
invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
invoice.total,
(119 / 100) * invoice.total,
invoice.media.length > 0 ? invoice.media[0].original_url : null,
moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
</script>

Barcode CODE_128 using PrintHTML with Qz Tray

Good Day All,
Right now, i'm trying to print using HTML with Qz-Tray. Can i make a barcode on that template HTML. The Problem is, that HTML template is STRING so it can not be change it using Javascript and I'm Trying to use Libre Font 128 Font Family but still not working.
https://www.w3schools.com/howto/tryit.asp?font=Libre%20Barcode%20128 i want to use that library, in this
function printHTML() {
var config = getUpdatedConfig();
var colA = '<h2>* QZ Print Plugin HTML Printing *</h2>' +
'<span style="color: #F00;">Version:</span> ' + qzVersion + '<br/>' +
'<span style="color: #F00;">Visit:</span> https://qz.io/';
var colB = '<img src="' + getPath() + '/assets/img/image_sample.png">';
var printData = [
{
type: 'html',
format: 'plain',
data: '<html>' +
' <table style="font-family: monospace; border: 1px;">' +
' <tr style="height: 6cm;">' +
' <td valign="top">' + colA + '</td>' +
' <td valign="top">' + colB + '</td>' +
' </tr>' +
' </table>' +
'</html>'
}
];
qz.print(config, printData).catch(displayError);
}
or this https://barcode-coder.com/en/barcode-jquery-plugin-201.html

Response.Write Horizontal Table from SQL Query using Dataview

Still need help, no answer that has worked yet. Please jump in if you have any ideas.
I have been trying to get my Response.Write to go Horizontal, however I cannot seem to figure it out.
This is what I currently have (it all sits within a table) and loads from an sql database query using Dataview to get the vehicles I want to display:
Response.Write("<tr><td width='200px' colspan='3'><a href='car.aspx?invno=" & invno & "'><image runat='server' src='" + imageurl + "'></image></a></td></tr>")
Response.Write("<tr><td width='5px'>" + year + "</td><td width='10px'>" + make + "</td><td width='100px'>" + model + "</td></tr>")
Response.Write("<tr><td width='200px' colspan='3'>" + mileage + "</td></tr>")
However it is Currently giving me this Picture 1
But what I really want is this Picture 2
Any help would be greatly appreciated
Update
Ok so I am editing this whole post, as it was overly complicated with what I want. So I am breaking it down to its simplest:
</head>
<body>
<form id="form1" runat="server">
<asp:SqlDataSource runat="server" id="sqldata" ConnectionString="<%$ ConnectionStrings:cars %>" SelectCommand="SELECT TOP 3 ORDER BY NEWID() )">
</asp:SqlDataSource>
<asp:Panel ID="Panel1" runat="server">
<div style="font-size: 10px; font-family: 'arial';">
<center>
<table id="list" border="0" cellpadding="2" cellspacing="0" width="200px">
<%
Dim dv As Data.DataView = CType(sqldata.Select(DataSourceSelectArguments.Empty), Data.DataView)
For Each dr As Data.DataRow In dv.Table.Rows
Dim make As String = dr("make")
Response.Write("<tr><td>" + make + "</td></tr>")
Next
%>
</table>
</center>
</div>
</asp:Panel>
</form>
</body>
</html>
So with the code above.. I get a vertical list
Ford
Chevy
Toyota
But what I want is a Horizontal list
Ford Chevy Toyota
Create a single row with 3 different columns to achieve your desired result
Response.Write("<tr><td width='200px' colspan='3'><a href='car.aspx?invno=" & invno & "'><image runat='server' src='" + imageurl + "'></image></a></td>")
Response.Write("<td width='5px'>" + year + "</td><td width='10px'>" + make + "</td><td width='100px'>" + model + "</td>")
Response.Write("<td width='200px' colspan='3'>" + mileage + "</td></tr>")

XPath for child element

What is the Xpath to select the first element of this jquery selector: $('.A .B:eq(1)') ?
HTML Sample
<div class="x A z">
<div class="y">
<div class="r B z"></div> <---- that is that I need to select
<div class="r B z"></div
>
...
So far I've tried this:
(//div[(#class='A') and div[contains(concat(' ', #class, ' '), 'B')]])[1]
//div[contains(concat(' ',#class,' '), ' A ')]//div[contains(concat(' ',#class,' '), ' B ')][1]

kendo scheduler event template

Hi I would like to add a Kendo ToolTip inside the kendo Scheduler event template. When ever i add any Html helper it throws invalid template error. I might be missing some the syntax.Can anyone suggest the way to do it?
d.EventTemplate(
"<div style='height: auto !important;'>"+
"#=kendo.toString(start,'hh:mm')# #= kendo.toString(start,'tt')# #"+
"<span style='font-size:smaller'>#= PickStopName# </span> " +
"##(Html.Kendo().Tooltip().For('#Scheduler').Width(250)"+
".Content('# <div style='text-align:justify;'>" +
"<div>" +
"<h6> #= title# </h6>" +
"<h6> #= description# </h6>" +
"<h4> #= kendo.toString(start,'hh:mm')# </h4>" +
"</div>" +
"</div>)'#)#"+
"</div>"
);