I want to make the text in the swal bold and with a custom text color and since html:true is no more supported, I tried to set a <span> and set my custom style to the html tag, but it is not working, and I searched for a solution but I got no answers.
The Code
swal({
title: "Summary",
content: '<span>"counter " + this.counterType_1 + ": "+ this.counter_1_from.value.counter_1 +" - Sold Liters: " + liter_sold_1</span>',
className: "success",
closeOnClickOutside: false,
closeOnEsc: false,
dangerMode: true,
buttons: {
submit: {
text: "Submit",
value: "submit",
},
noAction: {
text:"Cancel",
value: "Cancel",
},
},
})
What I tried
var _html= '<span>"counter " + this.counterType_1 + ": "+ this.counter_1_from.value.counter_1 +" - Sold Liters: " + liter_sold_1</span>',
content: _html,
but also not working.
I finally find a way by using createElement() method which takes param an html tag,
var wrapper = document.createElement('h1');
wrapper.innerHTML = 'this is bold text';
swal({
content:wrapper,
title: "Summary",
className: "success",
closeOnClickOutside: false,
closeOnEsc: false,
dangerMode: true,
})
Related
I have a problem exporting with pdfhtml5. I have data on datatable with HTML and CSS style and want to visualize it on pdf or another plugin.
this is the variable exportOptions
var thisExportOptions = {
exportOptions: {
rows: function(idx, data, node) {
var checkedB = sontCoches(".dt-class-checkbox", "entireRow");
var dt = new $.fn.dataTable.Api('#datatable-configuration');
$(checkedB).each(function(i, v) {
dt.row(this).select();
});
var selected = dt.rows({ selected: true }).indexes().toArray();
if (selected.length === 0 || $.inArray(idx, selected) !== -1)
return true;
return false;
},
columns: ':visible'
}
};
and this for datatable id
var table = $('#datatable-configuration').DataTable({
"ajax": {
"url": "/backend/index.php",
"dataType": "json",
"type": "GET",
"data": {
"app": get ["app"],
"module": get ["module"],
"element": cElement,
"action": "serverside",
"actionParent": get ["action"],
//"get": get,
}
},
"buttons": [
$.extend(true, {}, thisExportOptions, { text: 'Imprimer', extend: 'print' }),
$.extend(true, {}, thisExportOptions, { text: 'PDF', extend: 'pdfHtml5' }),
{ extend: 'colvis', text: 'Export colonnes', className: 'btn-primary', columns: ":not(.notConcernedByColvis)" }
],
"fnStateLoad": function(oSettings) {
return JSON.parse(localStorage.getItem('dataTableStore'));
},
"stateSaveParams": function(settings, data) {
data.columns.forEach(function(column) {
delete column.visible;
});
}
)}
Php code
$datas[$key]['nom'] = "<span class='font-weight-bold text-success'>" . $brute->raison_sociale . "</span>";
$datas[$key]['nom'] .= (!empty($brute->rcs_siret)) ? "<br /><small><span class='font-weight-bold'>RCS : </span><span class='right'>" . $brute->rcs_siret . "</span></small>" : "";
$datas[$key]['autres'] = '';
And the pdf file is like this
Pdf export with no css and HTML no interpreted
Finally I found WkHtmlToPdf it can convert HTML page to PDF file.
It's very helpfull and free, PHP WkHtmlToPdf provides a simple and clean interface to ease PDF and image creation when you want only use free solution on your project.
For more information : https://github.com/mikehaertl/phpwkhtmltopdf
I want to bind a model json with a comboBox inside the controller (not in a xml view).
I made a model Json called types.json and I passed to the controller, but, when I bind the values inside the created model to the combobox, didn't show nothing.
Can you please help me. I can't find the problem here.
That is parts of my code, below, who I think is important to this question.
my MODEL JSON - name: types.json
"types": [
{
"text": "Férias",
"key": "01"
},
{
"text": "something",
"key": "02"
},
]
my CONTROLLER - name: Page.controller.js
handleAppointmentCreate: function (oEvent) {
var oStartDate = oEvent.getParameter("startDate"),
oEndDate = oEvent.getParameter("endDate"),
oCalendarRow = oEvent.getParameter("calendarRow"),
oEmpId = oCalendarRow.getKey(),
_oYearStartDate = oStartDate.getFullYear(),
_oMonthStartDate = oStartDate.getMonth() + 1,
_oDateStartDate = oStartDate.getDate(),
_oYearEndDate = oEndDate.getFullYear(),
_oMonthEndDate = oEndDate.getMonth() + 1,
_oDateEndDate = oEndDate.getDate(),
_HourStart = oStartDate.getHours(),
_oMinStart = oStartDate.getMinutes(),
_oSecStart = oStartDate.getSeconds(),
_oHourEnd = oEndDate.getHours(),
_oMinEnd = oEndDate.getMinutes(),
_oSecEnd = oEndDate.getSeconds(),
sStartDate = _oYearStartDate + "-" + _oMonthStartDate + "-" + _oDateStartDate,
sEndDate = _oYearEndDate + "-" + _oMonthEndDate + "-" + _oDateEndDate,
sStartHour = _HourStart + ":" + _oMinStart + ":" + _oSecStart,
sEndHour = _oHourEnd + ":" + _oMinEnd + ":" + _oSecEnd,
sIdEmp = oEmpId;
var dataModel = this.getOwnerComponent().getModel("Model");
this.getView().setModel(dataModel, "DataModel");
if (!this.oConfirmDialog) {
this.oConfirmDialog = new Dialog({
type: DialogType.Message,
title: "Novo agendamento",
content: [
new HorizontalLayout({
content: [
new VerticalLayout({
width: "120px",
content: [
new Text({ text: "Id de funcionário: " }),
new Text({ text: "Data de inicio: " }),
new Text({ text: "Data de término: " }),
new Text({ text: "Hora de inicio: " }),
new Text({ text: "Hora de término: " })
]
}),
new VerticalLayout({
content: [
new Text({text: sIdEmp }),
new Text({ text: sStartDate }),
new Text({ text: sEndDate }),
new Text({ text: sStartHour }),
new Text({ text: sEndHour })
]
})
]
}),
new TextArea("confirmationTitle", {
width: "100%",
placeholder: "Adicione o titulo do agendamento"
//required:"true" - não pode ter
}),
new TextArea("confirmationDetails", {
width: "100%",
placeholder: "Adicione detalhes do agendamento"
//required:"true" - não pode ter
}),
new sap.m.ComboBox({
items: {
path: "DataModel>/types",
template: {
Type: "sap.ui.core.ListItem",
text: "{DataModel>Key}",
enabled: true
}
}
})
],
beginButton: new Button({
type: ButtonType.Emphasized,
text: "Submeter",
press: function () {
var sIdEmp1 = sIdEmp,
sStartDate1 = sStartDate,
sEndDate1 = sEndDate,
sStartHour1 = sStartHour,
sEndHour1 = sEndHour,
sTitle = Core.byId("confirmationTitle").getValue(),
sDetails = Core.byId("confirmationDetails").getValue();
this.addAppointment(sIdEmp1, sStartDate1, sEndDate1, sStartHour1, sEndHour1, sTitle, sDetails);
this.oConfirmDialog.close();
}.bind(this)
}),
endButton: new Button({
text: "Cancelar",
press: function () {
this.oConfirmDialog.close();
}.bind(this)
})
});
}
this.oConfirmDialog.open();
},
First of all, there's a typo. In your model you have the string "key", but when creating the ComboBox you used "Key", with an uppercase K. Be sure that you put the same on both places.
If this don't solves your problem, try using sap.ui.core.Item instead of sap.ui.core.ListItem, as it is the control that the aggregation items accepts:
new sap.m.ComboBox({
items: {
path: "DataModel>/types",
template: new sap.ui.core.Item({
key: "{DataModel>key}",
text: "{DataModel>text}"
})
},
enabled: true
})
Also, remember that ComboBox is ony recomended when you will have between 13 and 200 results. For less than 13 options to show use sap.m.Select instead.
I add a textblock. In order to wrap it with margin, I write this code.
The problem is that now the text is cut.
code:
let $ = go.GraphObject.make;
let toolTipTemplate =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", (d) => {
return d.model.Name + "\nsome text here";
}))
);
return toolTipTemplate;
I tried a node template like:
$(go.Node, . . .,
{
toolTip: $(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", (d) => {
return d.text + "\ncatalog: " + d.name;
}))
)
},
. . .
And I was unable to reproduce any problem with a very long string as the property value of data.name. Do you know of a way for me to reproduce this text measurement problem?
The problem was with this style definition:
letter-spacing: 3px;
so, the text became too wide.
After removing this setting it looks right.
I have a grid I'm working on, and some of the columns are Boolean (true/false). I want them to display as "Yes/No" in the column. I also am using a drop-down to change the value. The issue I am having is that once I select the value form the drop-down, it doesn't display the new value when I leave the line. But only if I'm going from "no" to "yes". I think it's something to do with the interaction between my template and the drop-down? That the value isn't getting set to "yes" from the drop down for the template, so it'd falling into the "no" logic.
Here is my data for the drop-down:
indData = [
{ Text: "Yes", boolValue: "true" },
{ Text: "No", boolValue: "false" }
];
And my definition for that column:
Copy code
{
field: "FreeAndReducedInd", width: "150px",
editor: indDropDownEditor,
title: "Free and Reduced",
template: ("# if (FreeAndReducedInd == true) { #" + "Yes" + "# } else { #" + "No" + "#}#")
},
And the editor code:
Copy code
function indDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "boolValue",
dataSource: indData
});
};
What do I have wrong?
thanks
Lisa
Update - I got an answer from Kendo, they suggested I add a Custom Binder and that seems to be working.
kendo.data.binders.widget.boolValue = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change);
},
refresh: function () {
var value = this.bindings.boolValue.get();
this.widget.value(value.toString());
},
change: function () {
var value = this.widget.value();
this.bindings.boolValue.set(value === "true");
},
destroy: function () {
this.widget.unbind("change", this._change);
}
});
I also modified my editor:
function indDropDownEditor(container, options) {
$('<input data-bind="boolValue:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "boolValue",
dataSource: [
{ Text: "Yes", boolValue: "true" },
{ Text: "No", boolValue: "false" }
]
});
};
It would be better if you could give us the full code. Its easier to check locally before giving any solution. But try using the following in template. If it doesn't help please update your post with full code so I can recheck. Thanks.
template: "<td role='gridcell'> #= FreeAndReducedInd == true ? 'Yes' : 'No' # </td>"
I have this jqgrid definition and I'm trying to open the selected document in a new Window.
My final urls should like these:
http://localhost/XPagesSortableSearchResults.nsf/xPerson.xsp?documentId=9D93E80306A7AA88802572580072717A&action=openDocument
and also I need to generate this type of url:
http://localhost/XPagesSortableSearchResults.nsf/$$OpenDominoDocument.xsp?documentId=9D93E80306A7AA88802572580072717&action=openDocument
$().ready(function(){
jQuery("#list2").jqGrid({
url:'./xGrid7.xsp/peoplejson',
datatype: "json",
colNames:['InternetAddress','#','Name','OfficeCountry'],
colModel:[
{name:'InternetAddress',index:'InternetAddress', width:200},
{name:'#position',index:'#position', width:50,sorttype:'int'},
{name:'$17',index:'$17', width:200},
{name:'OfficeCountry',
width:200,
formatter:editLinkFmatter
// formatter:'showlink',
// formatoptions:{ baseLinkUrl:'xPerson.xsp',addParam: '&action=openDocument', idName:'documentId'}
}
],
jsonReader: {
repeatitems: false,
id: '#unid',
root: function (obj) {
if ($.isArray(obj)) {
return obj;
}
if ($.isArray(obj.items)) {
return obj.items;
}
return [];
},
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) {
if ($.isArray(obj)) {
return obj.length;
}
if ($.isArray(obj.items)) {
return obj.items.length;
}
return 0;
}
},
caption: "JSON Example",
height: 500,
gridview: true,
loadonce: true,
ignoreCase: true,
rowNum: 50,
rowList: [50, 100, 500, 1000],
pager: '#pager2'
}).jqGrid('filterToolbar', {stringResult: true, defaultSearch: 'cn', searchOnEnter: false});
Note my Json object looks like this and I'm not using the documentId I need on my url as part of my ColModel; the value I need is #unid
[
{
"#entryid":"1-B933790B1DC265ED8025725800728CC5",
"#unid":"B933790B1DC265ED8025725800728CC5",
"#noteid":"1E76E",
"#position":"1",
"#read":true,
"#siblings":40000,
"#form":"Person",
"$17":"Aaron, Adam",
"InternetAddress":"consurgo#compleo.net",
"OfficeCountry":"Namibia"
},
{
"#entryid":"2-9D93E80306A7AA88802572580072717A",
"#unid":"9D93E80306A7AA88802572580072717A",
"#noteid":"19376",
"#position":"2",
"#read":true,
"#siblings":40000,
"#form":"Person",
"$17":"Aaron, Dave",
"InternetAddress":"gratia#incito.co.uk",
"OfficeCountry":"Brazil"
},
{
"#entryid":"3-FAFA753960DB587A80257258007287CF",
"#unid":"FAFA753960DB587A80257258007287CF",
"#noteid":"1D842",
"#position":"3",
"#read":true,
"#siblings":40000,
"#form":"Person",
"$17":"Aaron, Donnie",
"InternetAddress":"vociferor#nequities.net",
"OfficeCountry":"Algeria"
}
]
So far I make it work using:
{name:'OfficeCountry',
width:200,
formatter:'showlink',
formatoptions:{ baseLinkUrl:'xPerson.xsp',addParam: '&action=openDocument', idName:'documentId'}
}
but I need to open it in a new window
I also tried with formatter:editLinkFmatter
function editLinkFmatter(cellvalue, options, rowObject) {
return "<a href='./" + rowObject[2] + "' class='requestlink'>" + cellvalue + "</a>";
//return "<a href='./documentId=" + rowObject.#unid + "' >Click here</a>";
//return "<a href='./documentId=" + options.idName + "&action=OpenDocument'>" + cellvalue + "</a>";
}
and I can't use rowObject.#unid because the node name
It seems to me that you should just use target="_blank"attribute in the <a> (see here and here). The standard 'showlink' formatter supports target attribute.
As the alternative to the custom formatter you can use 'dynamicLink' formatter (see the answer). You can download the last version of jQuery.jqGrid.dynamicLink.js from here.
UPDATED: To assess the property with the name #unid you can use syntax rowObject["#unid"]. So the editLinkFmatter can be like
function editLinkFmatter(cellvalue, options, rowObject) {
return "<a href='?documentId=" + rowObject["#unid"] +
"&action=OpenDocument' class='requestlink'>" + cellvalue + "</a>";
}
or better like
function editLinkFmatter(cellvalue, options, rowObject) {
return "<a href='?" +
$.param({
documentId: rowObject["#unid"],
action: 'OpenDocument'
}) + "' class='requestlink'>" + cellvalue + "</a>";
}