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
I'm using CSV to HTML table: https://github.com/derekeder/csv-to-html-table, and I'd like to add button-based filtering (as seen here on the DataTables page: https://datatables.net/reference/option/)
I haven't manipulated the data much at this point, except to add scrollCollapse and pagingType, but I'm not entirely sure how to add the button instances for the CSV to HTML, as it seems to be done a little differently than the examples on DataTables.
<script type="text/javascript">
function format_link(link){
if (link)
return "<a href='" + link + "' target='_blank'>" + link + "</a>";
else
return "";
}
CsvToHtmlTable.init({
csv_path: 'data/foodsec_data.csv',
element: 'table-container',
allow_download: true,
csv_options: {separator: ',', delimiter: '"'},
datatables_options: {"scrollCollapse": true,},
datatables_options: {"pagingType": "simple_numbers",},
custom_formatting: [[1, format_link]]
});
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>"
);
I'm trying to add image in itemTpl depends on "if " statement. Can anyone pls help me to solve this issue?
here is my code,
//Controller
for(var i=0;i<len;i++){
//Storing our values in Array
var st = {
'Amount':jsonarr.AgentTransactionResult[i].Amount,
'TransactionId':jsonarr.AgentTransactionResult[i].TransactionId,
'Status':jsonarr.AgentTransactionResult[i].Status,
'Date':jsonarr.AgentTransactionResult[i].Date,
};
//Adding our array to LocalStore(localStorage)
var localStore = Ext.getStore('transstore');
localStore.add(st);
localStore.sync();
localStore.load();
}//for loop
//View
xtype: 'list', store : 'transstore', html:'<table border="0" width="100%"><th><td width="25%">Amount</td><td width="25%">Status</td><td width="25%">Date</td><td width="25%">Transaction Id</td></th></table>', itemTpl:
'<table border="0" width="100%">'+
'<tr>'+
'<td width="10%"><font size="2" color="#000000"><b>{Amount}</b></font></td>'+
'<td width="20%"><font size="2" color="#003300"><b>{Status}</b></font></td>'+
'<td width="23%"><font size="2" color="#003300"><b>{Date}</b></font></td>'+
'<td width="8%"><font size="2" color="#003300"><b>{TransactionId}</b></font></td>'+
'</tr>'+
'</table>'.
and Ive to display my Status in image format. if(status=="Success") return "img url" else return "another img url". I've retrieved the status from webservice and I don't know how to change the image. Can anyone help me with this?
See this answer.
Also your questions are much easier to answer when they are formatted.
If you cannot get that to work re-format your example and let me know what it is you are checking with your if statement and I will try to put an example together for you.
Good Luck, Brad
I have a text field (or time/date field) with mask. __:__:__ I have to change the color of "_" from black to white. Has Extjs 4 any solution to change input to (editable) div?
Have you tried overriding the base fieldSubTpl property for your field? I.e, adding the property with a as a div element instead of input:
fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
'<div id="{id}" type="{type}" {inputAttrTpl}',
' size="1"', // allows inputs to fully respect CSS widths across all browsers
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>',
{
disableFormats: true
}
],
Now I am here, using this tpl:
fieldSubTpl: [
'<div stlye="position: inherit; top: 0px; left: 0px" id="{id}-div" contentEditable='+!this.disableSel+' type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">{[Ext.util.Format.htmlEncode(values.value)]}</div>' +
'<input type="text" id="{id}" value="{[Ext.util.Format.htmlEncode(values.value)]}" ' +
'style="visibility: hidden; height: 0px; width: 0px; " />',
{
disableFormats: true
}
]
And I made a new plugin extended the original, change all this.inputTextElement.value to get or set HTML
this.getPicker().on('select', function (p, r, o){
Ext.get(this.id + '-inputEl-div').setHTML(r.data.disp);
}, this);
And on some other event the hidden input and div change their values, but it's not the ultimate version of my sollution. Now I have lots of work yet... Huh... :)
And if you know other idea, please post it!
An other solution I'm trying:
buildDivsByFormat: function () {
// 12: 'h:i A', '03:15 PM'. 'h:i:s.u A' 24: 'H:i' 'H:i:s.u' instead.
var w = 8;
var divs = {};
if(this.format.indexOf("i") > -1)
divs.i = '<div style="padding:0px 0px 1px 0px;width:'+w*2+'px;min-width:'+w*2+'px;max-width:'+w*2+'px;float:left;display:inline-block;"' +
contentEditable="'+!this.disableSel+'" id="'+this.id+'-div-i'+'"> </div>';
... // making this with other format elements
var d = '';
var formatArray = this.format.split('');
for(var i = 0; i < formatArray.length; i = i + 1){
var currentChar = formatArray[i];
if(formatArray[i] === ":") currentChar = 'dp';
if(formatArray[i] === ".") currentChar = 'p';
if(formatArray[i] === " ") currentChar = 'sp';
d = d + divs[currentChar];
}
this.divs = d;
return d;
}
Making divs by format and inserting them to this tpl's div:
fieldSubTpl: [
'<div stlye="position: inherit; top: 0px; left: 0px" id="{id}-div" type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">' +
'</div>' +
'<input type="text" id="{id}" value="{[Ext.util.Format.htmlEncode(values.value)]}" ' +
'style="visibility: hidden; height: 10px; width: 0px; " />',
{
disableFormats: true
}
]
Then I do some changing function... I have some problems: I can't coloring this version, but... bigger problem is: if input is visibility: hidden;, it makes space after my tpl's div... on display: none makes time picker to absolute 0 0 position of window, not to the field (div)... Has anybody an idea about this?