I have multiples fileinputs in a page and populate the initialPreview on the load passing the files. But for PDF I am getting the initialPreview trying to load the PDF into img tag as result they do not show
What can be the problem?
When selecting a PDF manually with the "browse" button is previewing the PDF well but not when initialPreview.
$(".fileUpload :input").each(function(){
var inputElement = $( this );
inputElement.fileinput({
showUpload: false,
showCaption: false,
fileType: "any",
previewFileIcon: "",
initialPreviewAsData: true,
initialPreview: [
inputElement.parent().parent().attr('data-url') // Here is the pdf. For example: ../../public/images/6daebfaa533798aabc7bbd410361dd1a.pdf
],
autoReplace: true,
maxFileCount: 1,
overwriteInitial: true,
});
});
we need to indicate the file extencion for every file we want to show
initialPreviewConfig: [
{type: inputElement.parent().parent().attr('data-format')},
]
Related
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/
I am using datatable 1.9 . I am facing problem in searching. My table look something like this
<'table> <'td> <'div><'span class="inlineEditCategory" >category<'/span><'/div> <'/td> <'/table>
So if I search on the word like div, span then all rows are is shown which should not. I figure out that content between td is being searched. Is their any way to search only the text part.
You can use the html filtering plugin.
Include the js file after the inclusion of datatables.js main script.
And the use the plugin like this in your datatable initialization:
$('#example').dataTable({
"columnDefs": [
{ type: "html", target: 0 }
]
});
You can also do this with the aoColumn option like this:
$('#example').dataTable( {
"aoColumns": [
{ "sType": "html" },
....
]
} );
For more info see the documentation
New to dojo and dGrid, so I hope I'm overlooking something obvious. This is almost same as this Saving a Dgrid JsonRest-based Store, which has no accepted answer.
After recently adding an edit box to dGrid (pretty simple), now I'd like to be able to save those changes. How do I save? What I tried doesn't work.
define([
'require',
'dgrid/List',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Keyboard',
'dgrid/editor',
'dgrid/extensions/ColumnHider',
'dojo/_base/declare',
'dojo/_base/array',
'dojo/Stateful',
'dojo/when',
'dstore/RequestMemory',
'put-selector/put',
'dojo/_base/lang',
'dojo/domReady!'
], function (require, List, OnDemandGrid, Selection,
Keyboard, editor, Hider, declare, arrayUtil, Stateful,
when, RequestMemory, put, lang) {
storeJunctions = new RequestMemory({ target: require.toUrl('./dataJunctions.json') });
junctionGrid = new (declare([OnDemandGrid, Selection, editor, Keyboard, Hider]))({
collection: storeJunctions,
selectionMode: 'single',
columns: {
J1: { label: 'J1', editor: 'text' },
J2: { label: 'J2', editor: 'text' },
...
}
}, 'grid');
In the HTML I have a save button:
<button type='button' onclick="junctionGrid.save();return false;">Save Junctions</button>
It couldn't be that simple, so to no surpsie, the data does not post/update to the file on my local dev server.
I'm trying to find the equivalent of bSelectedOnly in the new version of Datatables 1.10.
I only want to print rows that the user has selected, or print all rows if they havn't selected any.
"tableTools": {
"sSwfPath": "/Datatables-1.10.0/extensions/TableTools/swf/copy_csv_xls.swf", //Add buttons for saving table data in these formats
"sRowSelect": "os", //allow user to select multiple rows in the table
"aButtons": [
{
"sExtends": "print",
"bSelectedOnly": "true",
},
{
"sExtends": "select_none",
},
]
},
It hasn't changed (see docs). But you have an error in your code. Instead of
"bSelectedOnly": "true",
it should be
"bSelectedOnly": true,
Also, bSelectedOnly is not available as a print option. It is only available as a flash button option. See here. That is the actual reason why what you're trying to do will not work :)
I'm using extjs4 and I'm trying to create a tab panel, that each tab has a different grid that loads data from a store. (each grid different store)
I would like to load the particular store only when the user clicks on the respective tab.
I don't see how I can catch the user click on the panel.
How I can do that?
I had a similar performance loading issue and failed to solve it with deferredRender. You have to add the event activate for the tab you want to load when the tab is activated :
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'activate' : function(){
store2.load();
},
}
}
Worked fine for me even if it's a temporary solution. Extjs 4.1 should improve loading/rendering performances. We'll see.
You can activate the panel by placing setActiveItem() in tab handler.
Ok, I figured out, I just needed to have deferredRender=true and to add the respective store.load() on the beforerender event on every tab:
var lowerTabPanel = Ext.create('Ext.tab.Panel', {
deferredRender: true,
items: [
{
title: 'tab1',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store1.load();
},
}
},
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store2.load();
},
}
},
]
});
Ext.TabPanel has config option deferredRender. May be it helps you.
Documentation:
true by default to defer the rendering of child items to the browsers DOM until a tab is activated. false will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
Update: Also look at autoLoad config option in Ext.data.JsonStore, it should be false.