Custom Message or paragraph from the using Jquery datatable and pdf export - pdf

I'm using the pdf button from jquery datatables which is essentially the pdfmake library. The problem that I'm having is that I would like to add an additional paragraph right above my table when the user clicks the button to export the table. I have tried using the "message" parameter but for the life of me I cannot retrieve additional information right before the pdf will download. I tried doing this.
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
message:function() { $("#HeaderDesc").text()}
}
]
But I have been unsuccessful in my attempts. Does anyone have any ideas on how to accomplish this?

There is another easy solution to this.
I accomplished this by using splice property. You can do like this inside customize function.
doc.content.splice(0, 1, {
text: [
{ text: 'I am loving dataTable and PdfMake \n',bold:true,fontSize:15 },
{ text: 'You can control everything.',italics:true,fontSize:12 }
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
This will splice at the first position [0 index] as well as replace 1 value with the above content.
Happy coding!!!!

You cannot. The config literal for the button is read once, and message does not support function type.
However, you can change the message in the not so well documented customize() callback. This is called just before dataTables pass the generated document to pdfmake. If you have defined a message, then there will exists message section(s) in the content nodes, and those nodes have a text attribute holding the actual message :
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = 'this is a late created message'
}
})
}
As mentioned, you must define message before this will work. If you have not defined message, there will be no styles of type message you can manipulate. Your pdfhtml5 settings could look like this :
buttons: [
{
message: '__MESSAGE__',
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = $("#HeaderDesc").text()
}
})
}
}
]
demo -> https://jsfiddle.net/xx5f5z6x/

Related

jQuery datatables buttons defaults

I have some styles that I need to apply to all DataTables buttons so that they match the rest of the buttons on my site. I can add that using the className option as below, but I'd like not to have to supply the same thing every time.
Manual example
$('#myTable').DataTable({
buttons: [
{
text: 'I look like a button',
className: 'icanhazdefalt'
}
]
})
I see in the docs that the default value is undefined. I couldn't find anywhere in the docs that you could override the default for this or other options. Is this possible? Something like:
$.fn.DataTable.Buttons.options.extend({
className: 'icanhazdefalt'
})
What I need is to be able to set the default for the plugin itself (rather than for a specific instance). Then all instances I create on the page from then on would have the default I specified. I can include the script that sets the default right after the plugin script (perhaps in a layout file) so that I never have to manually do anything to get all subsequent instances to have the default className (but still be able to override it by explicitly providing it as shown in the 'manual example' above).
Use:
$('#myTable').DataTable( {
buttons: {
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'excel', className: 'excelButton' }
]
}
} );
Reference: https://datatables.net/reference/option/buttons.buttons.className
EDIT: There might be a better and simpler way of doing this but, this is what I came up at the moment.
//DataTable
var table= $("#myTable").DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'I look like a button'
},
{
text: 'I dont'
}
]
} );
//Add class to all buttons
$(table.buttons()).each(function(){
$($(this)[0]["node"]).addClass("sampleClass");
});
You can also change your button selection by giving a parameter for buttons().
See this link for that.

Make DGrid selector shown or hidden based on row content

I'm using the Dgrid Selection grid for a grid that uses check boxes for selecting the content. However, only child node of the tree should show the checkbox as the parents are just categories and can't be selected. Previously I used the editor plugin for this, but it created difficulty with clearing selections (specifically, the "clearSelection" method of the grid did nothing). I switched to the selector plugin, so now selecting and deselecting rows works fine, but now I can't seem to figure out a way to hide the check box on some rows and not others.
Original code
var columns = [
editor({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
canEdit: function(object) {
// only add checkboxes for child objects
return object.type === "child";
}
}, "checkbox"),
tree({
label: "Item",
field: "shortItemId",
width: 150,
shouldExpand: function() {
return 1;
}
}),
{
label: "Grouping Name",
field: "groupingName"
}
];
var itemGrid = new SelectionGrid({
store: itemStore,
style: {
width: '99%',
height: '99%'
},
columns: columns,
sort: [{attribute: "shortItemId", descending: false}]
});
I used the "editOn" parameter of the editor to hide the check box, but the selector plugin only has the "disabled" parameter, which doesn't hide the field at all.
Is there a way I can get the check box hidden using the selector like I did with the editor?
Looking at the dgrid/selector source, it seems that the input is always created and added to the DOM, regardless of whether it has been disabled. Presumably this is to allow it to be flexible enough to enable and disable checkboxes on the fly without the need to constantly re-create DOM nodes. While it is not possible to prevent these nodes from being rendered, it is possible to hide them with CSS, since the cell node is given a class with the format field-{fieldName} (or in this particular case, field-itemSelected):
// JavaScript
var columns = [
selector({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
// Disable any checkbox that is not of type "child"
disabled: function (item) {
return item.type !== 'child';
}
}),
...
];
/* CSS */
.field-itemSelected input[disabled] {
display: none;
}

Extjs4 treenodes click error

i am working in extjs4. i have created treeview as-
Ext.define('Balaee.view.qb.qbquestion.tree1', {
extend: 'Ext.tree.Panel',
title: 'Simple Tree',
width: 200,
id:'tree1',
height: 150,
alias : 'widget.tree1',
store:'qb.qbquestionStore',
displayField: 'text',
rootVisible : true,
multiSelect : true,
valueField:'id',
renderTo: Ext.getBody(),}),
Json send via server gets properly attached to above treepanel. But whwn i am trying to click on treenodes its giving me error as "TypeError: listener.fireFn is undefined" in mozilla firefox and error as "Uncaught TypeError: Cannot call method 'apply' of undefined " in chrome. Also nodes are being expanded only once.
In controller for itemclick, i have written code as-
init : function() {
this.control({
'tree1':{
itemclick: {
fn: function (view, record, item, index, e) {
if(record.data.checked==true)
{
console.log(record.data.id);
}
}
},
So what changes i need to do to remove error?
'tree1' is an incorrect selector. In order to attach an event handler to component by its id prepend id with hashtag #:
this.control({
'#tree1':{
UPDATE
I missed line alias : 'widget.tree1'. Therefore your selector was correct.
Try to change listener to:
'tree1':{
itemclick: function (view, record, item, index, e) {
if(record.data.checked==true)
{
console.log(record.data.id);
}
}
I believe the listener format shown in your code is not supported.

Search Option in Textbox

I am using ExtJs4.I have a form in my web application in which there is text box.The scenario is to provide an AJAX like search(like Google) when any key is pressed in the text box.Search will look into a web service and display the result(JSON object) in drop drown.Similar to Google search.
Is there any idea,link or tutorial for doing this?
Thanks
You could use ComboBox for this. With trigger or without one (that looks like a TextBox).
Sencha provides good examples:
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
This is a simple example:
{
xtype: 'combo',
id: 'myCombo',
store: Ext.create('Ext.data.ArrayStore', {
model: Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: ['id','data1','data2']
}),
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'array'
}
}
}),
triggerAction: 'query',
minChars: 2,
fieldLabel: 'Search',
displayField: 'data1',
msgTarget: 'side',
triggerCls : 'x-form-search-trigger', // Search Icon For Instance
listConfig: {
getInnerTpl: function() {
return '<div>{data1}</div><div>{data2}</div>';
}
}
}
And JSON file:
[
['1','data1-1','data2-1'],
['2','data1-2','data2-2'],
['3','data1-3','data2-3'],
['4','data1-4','data2-4'],
['5','data1-5','data2-5']
]
Try this example: http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
I think this example http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html will be interesting for you. This realization use standard combobox control. In your case you need to set minChars property = 1, in this case store binded to Combobox will generate standard READ query with filter param to server. You can generate results there.

Extjs4 - Reloading store inside itemselector

I have an itemselecor inside a grid, and i have an combobox that should reload only the store inside the itemselector( the value fields should remain intact)
Here is the itemselector
var grid = Ext.widget('form', {
id: 'grid',
title: '',
width: 600,
bodyPadding: 10,
renderTo: 'itemselectorproduto',
items: [{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemsel',
anchor: '100%',
imagePath: '/ux/images/',
store: store,
displayField: 'Nome',
valueField: 'ID',
value: vitrine,
allowBlank: true,
msgTarget: 'side'
}]
});
I tried to call the normal store.load(), but it have no effect and it shows no error on the console
If needed i will post more of the code, but i think just this should be enough
Thanks,
Looking through the code if ItemSelector it doesn't look like it supports any changes in the store once it's been binded. It basically creates local copies of the data. And if you call bindStore method to assign different store - it will erase your selection.
You can always improve code in ItemSelector to allow such behavior. It should not be a problem. You can subscribe to datachanged or load event of the store when binding to it, and then handle situation when store data is changed.
Actually i think the best way to do such thing is using ItemSelector`s "populateFromStore". Sure except of extending item selector. In case of extending you should look on the "onBindStore" function of the ItemSelector.
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
} else {
me.store.on('load', me.populateFromStore, me);
}
}
}
So as you see in case of the empty store it hooks to the load event. And it should be like this:
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
me.store.on('load', me.populateFromStore, me);
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
}
}
}