How to interpret htlm and css anotation in ajax data to pdfhtml5 datatable - html

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

Related

typeahead / filter / JSON parse?

Trying to 'parse/read' an external .json file on my typeahead code, but the .json file (which I cannot modify) looks like:
{"**cms_countries**":
[{"**cms_country**":
[{"**countrydisplayname**":"Afghanistan"}
,{"countrydisplayname":"Albania"} ,{"countrydisplayname":"Algeria"}
... ... ... ,{"countrydisplayname":"Zimbabwe"} ] } ,{"TotalRecords":
[ {"TotalRecords":"246"} ] } ] }
So, I think my problem is to know how to parse/read/assimilate/integrate/adopt this .json file, having
cms_countries ,
cms_country ,
and then, my countrydisplayname field on it. (have you seen the tree here ?)
This is my code:
$(document).ready(function() {
var searchablePlaces = new Bloodhound({
datumTokenizer : Bloodhound.tokenizers.obj.whitespace("countrydisplayname"),
queryTokenizer : Bloodhound.tokenizers.whitespace,
prefetch : 'countries.json',
remote : {
url : 'countries/%QUERY.json',
wildcard : '%QUERY',
filter : function(response) { return response.cms_country; }
},
limit : 10
});
searchablePlaces.initialize();
$('#remote .typeahead').typeahead(
{
hint : true,
highlight : true,
minLength : 2
},
{
name : 'countrydisplayname',
displayKey : "countrydisplayname",
source : searchablePlaces.ttAdapter()
})
});
But of course, it is not working:
ANY hint on how to organize my filter... ? or how to do to overcome my nested .json wrappers....
OK, I've got my code working now:
$(window).load(function(){
var movies = new Bloodhound({
limit: 10,
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'countries.json',
filter: function (movies) {
return $.map(movies.cms_countries[0].cms_country, function (paises) {
return {
value: paises.countrydisplayname
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
movies.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(
{
hint: true,
highlight: true,
minLength: 1
},
{
//displayKey: 'value',
displayKey: function (toto) {
return toto.value;
},
source: movies.ttAdapter()
});
});

Kendo Grid Drop-Down column with conditional formatting

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>"

How to show nested items in Sencha Touch list

I have following json data.
{
"pendingTasksVOs" : [{
"groupName" : "LAST_MONTH",
"documents" : [{
"description" : "kvk1",
"uploadDate" : "1-12-2012"
}
]
}, {
"groupName" : "OLDER",
"documents" : [{
"description" : "kvk2",
"uploadDate" : "1-11-2012"
}, {
"description" : "kvk3",
"uploadDate" : "1-10-2012"
}, {
"description" : "kvk4",
"uploadDate" : "1-01-2012"
}
]
}
]
}
I want to show it in Sencha Touch list grouped by GroupName .
I want list to be in following format:
GoupName : Group1
-----------------------------
Description11 , UploadDate11 This should be separate clickable list row
-----------------------------
Description12 , UploadDate12 This should be separate clickable list row
-----------------------------
Description13 , UploadDate13 This should be separate clickable list row
-----------------------------
******************************
GoupName : Group2
-----------------------------
Description21 , UploadDate21 This should be separate clickable list row
-----------------------------
Description22 , UploadDate22 This should be separate clickable list row
-----------------------------
******************************
I am trying to use Sencha Touch List component. But I am not to get the list as per above requirements
//This is my store
var store = Ext.create('Ext.data.Store', {
model: 'Demo.model.DocumentList',
rootProperty: 'pendingTasksVOs',
autoLoad: true,
grouper: {
groupFn: function(record) {
if (record && record.data.title) {
return record.get('groupName');
} else {
return '';
}
}
}
});
//template for list item
var listTemplate = new Ext.XTemplate(
'<tpl for=".">',
'{groupName}</br>',
'<ul>',
'<tpl for="documents">',
'{description} {uploadDate} </br>',
'</tpl>',
'</ul>',
'</tpl>'
);
// Initialize the main view
Ext.getCmp("pendingTasksListId").add(Ext.create('Ext.List', {
fullscreen: true,
itemTpl: listTemplate,
store: store,
groupField:'description',
grouped: true
}));
//DocumentListModel is defined under /app/model/
Ext.define('Demo.model.DocumentList', {
extend: 'Ext.data.Model',
requires : ['Demo.model.Doc'],
config: {
fields: ['groupName', 'documents'],
hasMany : {
model : "Demo.model.Doc",
associationKey: 'documents'
},
proxy: {
type: 'rest',
url : "/getPendingTasks",
reader: {
type: 'json',
rootProperty : 'pendingTasksVOs'
}
}
}
}
//Document Model is defined under /app/model/
Ext.define('Demo.model.Doc', {
extend: 'Ext.data.Model',
config: {
fields: ['description', 'uploadDate'],
belongsTo: "Demo.model.DocumentList"
}
});
});
I am able to get the list item as follows:
GroupName,
Description11,UploadDate11
Description12,UploadDate12
But above whole content is clickable. I want to have each Description & UploadDate pair to be clickable.
Can anyone guide me on how can I achieve above stated requirement?
I got the solution for my question.
Create following custom json reader under /app/reader/ folder as CustomReader.js
Ext.define('Demo.reader.CustomReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.customReader',
getData: function(data) { // overriding
data = this.callParent(arguments);
var responseString = Ext.encode(data);
var json = JSON.parse(responseString);
var result = [];
Ext.each(json.pendingTasksVOs, function(entry) {
var groupName = entry.groupName;
Ext.each(entry.documents || [], function(document) {
result.push({
description : document.description,
uploadDate: document.uploadDate,
groupName: groupName
});
});
});
return result;
}
});
Doc model should be created at /app/model as follows as Doc.js
Ext.define('Demo.model.Doc', {
extend: 'Ext.data.Model',
config: {
fields: ['description','uploadDate','groupName']
}
});
Store can be created at /app/store folder
Store should use this custom reader as follows:
Ext.define("Demo.store.DocumentStore", {
extend:'Ext.data.Store',
requires:['Demo.model.Doc' , 'Ext.data.proxy.Rest', 'Demo.reader.CustomReader'],
id:'DocumentStore1',
config:{
model:'Demo.model.Doc',
autoLoad:true,
grouper:{
groupFn:function (record) {
if (record && record.data.groupName) {
return record.get('groupName');
} else {
return '';
}
}
},
proxy:{
type:'rest',
url:"/getPendingTasks",
reader:{
type:'customReader' //This is our custom reader
}
}
}
});
//Finally You can create the list as follows
Ext.create('Demo.store.DocumentStore');
// Initialize the main view
Ext.getCmp("pendingTasksListId").add(Ext.create('Ext.List', {
fullscreen:true,
itemTpl:'<div class="contact">{description} {uploadDate} {groupName} </div>',
store: 'DocumentStore1',
grouped:true
}));
Above gives me the list where I get separate row for each {description} {uploadDate} pair from the received json specified in question
Try this,
itemTpl: [
'<div>GroupName : {groupName}</div>',
'<div>',
'<ul>',
'<tpl for="documents">',
'<li>{description} , {uploadDate}</li>',
'</tpl>',
'</ul>',
'</div>',
].join('')
OR this,
itemTpl: [
'<div>GroupName : {groupName}</div>',
'<div>',
'<ul>',
'<tpl for="documents">',
'<li><div onclick="whateverYouWantToDo()">{description} , {uploadDate}</div></li>',
'</tpl>',
'</ul>',
'</div>',
].join('')

Adding links to jQgrid and open in new window

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>";
}

how to create a javascript function with parameters in another javascript file to use within another javascript?

hey, good day. im creating a program that would load a data from a server into a jqgrid. what im trying to do now is create a function from a separate javascript file and just use that function in my other javascript-jqgrid-load-data. here's my code in javascript:
$("#tbl").jqGrid({
url: '',
datatype: 'local',
jsonReader : {
root: function(obj) {
//some codes here
return root;
},
page: "page",
total: "pageCount",
records: "rows",
repeatitems:false,
id: "0"
},
serializeGridData: function(postData) {
var jsonParams = {
.
.//some codes here
.
'sort_fields': postData.sidx
};
if (postData.sord == 'desc')
{
..//some codes
}
else
{
...//some codes
}
jpar = jsonParams;
return 'json=' + jsonParams;
},
loadError: function(xhr, msg, e) {
showMessage('msg error');
},
colNames:['ID',...'Type'],
colModel:[
...//col model
],
rowNum:5,
.
.
.//some codes here
loadonce:false,
caption: "Main Account Group"
});
i want to separate the code:
jsonReader : {
root: function(obj) {
//some codes here
return root;
},
page: "page",
total: "pageCount",
records: "rows",
repeatitems:false,
id: "0"
},
and this:
serializeGridData: function(postData) {
var jsonParams = {
.
.//some codes here
.
'sort_fields': postData.sidx
};
if (postData.sord == 'desc')
{
..//some codes
}
else
{
...//some codes
}
jpar = jsonParams;
return 'json=' + jsonParams;
},
loadError: function(xhr, msg, e) {
showMessage('msg error');
},
I wrote my answer your your next question so that it answer on both from your question. The main idea is that you can either use global functions or better redefine jqGrid defaults with respect of
jQuery.extend(jQuery.jgrid.defaults, {/*your changes to the defaults*/});