in datatables I want to be able to hide all columns, but can't seem to get the syntax right.
This from the code below and the above link, creates a button that shows all the columns. Is there a way to write this so that I can hide all columns?
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
code:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );
i have tried something like the below with other permutations, but no joy, can anyone advise, and/or how I might find it in the documentation.
{
extend: 'colvisGroup',
text: 'Show None',
visibility: false
}
{
extend: 'colvisGroup',
text: 'Show None',
hide: [':gt(1)'],
//show: [0, 1, 2],
//hide: [0, 1, 2],
//hide: ['*']
}
this worked for me, only 2 column visible...
this worked for me, although I am not sure why the 0 does not show the first column. it also works to leave it blank show: [],
{
extend: 'colvisGroup',
text: 'Show None',
show: [0],
hide: ['*']
}
You first need to determine the number of columns bind in datatable and then set all columns visibility false at once.
var oTable = $('#example').DataTable();
var columnCounts = oTable.columns().nodes().length;
for ( var i=0; i<columnCounts; i++ ) {
oTable.fnSetColumnVis(i, false, false);
}
Related
This example of datatables has buttons to show/hide certain columns in the datatable.
When you first visit the page, all the columns are visible. Is there a way to make only certain columns visible, for example Office info, when you first visit the page?
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );
Fiddle here
ColumnDefs are used for table initialization, as they take less priority than your typical columns properties.
Perhaps columns.visible is the attribute you need?
I'm using jQuery datatable 1.10.11 and it's export button functionality as described here:
I want to skip last column from being export into excel file as this column has edit/delete buttons in it. My columns are generated dynamically so I can't use following method:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
}
]
});
I know this question is asked multiple time but non of them worked for me, might be version issue.
You can add a class:
<th class='notexport'>yourColumn</th>
then exclude by class:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':not(.notexport)'
}
}]
});
Try using CSS selector that excludes last column for columns option.
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: 'th:not(:last-child)'
}
}
]
});
I just thought I'd add this in because the accepted answer only works to exclude if you are not already including something else (such as visible columns).
In order to include only visible columns except for the last column, so that you can use this in conjunction with the Column Visibility Button, use
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':visible:not(:last-child)'
}
}]
});
And if you want to explicitly add your own class:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':visible:not(.notexport)'
}
}]
});
for Excel, csv, and pdf
dom: 'lBfrtip',
buttons: [
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> Excel',
titleAttr: 'Export to Excel',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
}
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i> CSV',
titleAttr: 'CSV',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
titleAttr: 'PDF',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
},
},
]
You can try this code, I copied it from PDF button.
E.g columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ].
Check this documentation: https://datatables.net/extensions/buttons/examples/html5/columns.html
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8]
}
},
'colvis'
]
Javascript Part:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
exportOptions: {
// columns: ':visible' or
columns: 'th:not(:last-child)'
}
},
'colvis'
],
columnDefs: [ {
targets: -1,
visible: false
} ]
} );
} );
And the js files to be included:
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js
Hope this was helpful for you.
Thanks.
I would like to set fieldset titles dynamically. I have a form with 1 or many fieldsets. I would like the fieldset title to be numbered sequentially 1 of 3, 2 of 3, and 3 of 3. For example here is some code in the form controller:
var formView = this.getFormView(),
fieldsets = formView.down('fieldset');
for (var i = 0, len = fieldsets.length; i < len; i++) {
fieldsets[i].setTitle((i + 1) + ' of ' + len)
}
I was thinking of getting the items of the form panel formView.getItems() and finding the fieldsets that way, but I am sure there is an easier way to get the fieldsets and then setting their titles dynamically.
I have worked on your problem. As you have not given the coding of your 'View.js' ,so i have created my own View - 'demo.js'.
Ext.define("Stackoverflow.view.Demo", {
extend: "Ext.form.Panel",
config: {
scrollable: 'vertical',
items: [
{
xtype: "toolbar",
docked: "top",
title: "Set Title Dynamically ",
items: [
{
xtype: "button",
ui: "action",
text: "Set Title",
itemId: "settitle"
}
]
},
{ xtype: "fieldset",
id: 'field1',
title: 'oldtitle',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
}
]
}
],
listeners: [
{
delegate: "#settitle",
event: "tap",
fn: "onSetTitle"
},
]
},
onSetTitle: function () {
console.log("title");
var z=Ext.getCmp('field1');
z.setTitle('newtitle');
}
});
Might be this will help you.
For any queries feel free to ask.
Bye.
I am a junior Sencha/Extjs user and I am trying to do something I am sure its simple but still can't figure out how.
as you can see here :
I have 2 panels, one called 'panel 1' and the other is hidden and called 'panel 2'
also i have 2 toolbars, one with button called 'go to panel 2', when i press it i should get this :
a 'panel 1' should be hidden and ' panel 2' appears with the second toolbar which is have another button called 'go to panel 1'
I hope i made this clear enough.
I could do the stuff above but i think i use a stupid way, i use an event binding with function onButtonClick on button 1:
Ext.getCmp('p2').show();
Ext.getCmp('tb2').show();
Ext.getCmp('p1').hide();
Ext.getCmp('tb1').hide();
and vice versa on button 2 :
Ext.getCmp('p1').show();
Ext.getCmp('tb1').show();
Ext.getCmp('p2').hide();
Ext.getCmp('tb2').hide();
Now, I am sure there is a better way to accomplish that using controllers but i need someone who explain me how to do it in details, because as i said, i have no experience.
Thank you.
EDIT
i need to accomplish this also :
Button 1 --> panel 1
Item 1 --> panel 2
Item 2 --> panel 3
You could use Card layout to make this kind of a UI. Check documentation and Live example here.
if the view looked like
Ext.define('MyApp.view.parentpanel', {
extend: 'Ext.panel.Panel',
height: 250,
width: 400,
activeItem: 0,
layout: {
type: 'card'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
html: 'i\'m panel 1',
bodyPadding: 10,
title: 'panel 1'
},
{
xtype: 'panel',
html: 'i\'m panel 2',
bodyPadding: 10,
title: 'panel 2'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'go to panel 2'
}
]
}
]
});
me.callParent(arguments);
}
});
the controller would be something like
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: [
'parentpanel'
],
onButtonClick: function(button, e, options) {
var me = this,
parentPanel = button.up('panel'),
layout = parentPanel.getLayout(),
activeItem = layout.getActiveItem(),
title = activeItem.title,
index = (title === 'panel 1' ? 1 : 0);
layout.setActiveItem(index);
button.setText('go to ' + title);
},
init: function() {
this.control({
"button": {
click: this.onButtonClick
}
});
}
});
I have a tabpanel with a grid in the first tab - called main-grid. I double-click on a row in main-grid and it loads a new tab, with a form-grid. In the form-grid I have set a column layout. I have a grid in the left column and a form with the radiogroup in the right column.
When a new tab opens, the grid from the form-grid loads fine, and when I select a record in the form-grid grid, it loads into the form fine and the radiogroup loads as well with my convert function. The values I am working with from the grid are "Yes" and "No", so I am converting them with my 'convert' function to an INT and then returning them.
Here is a snippet of my code:
Ext.define('ValueRadioGroup',({
extend: 'Ext.form.RadioGroup',
alias: 'widget.valueradiogroup',
fieldLabel: 'Value',
columns: 2,
defaults: {
name: 'rating' //Radio has the same name so the browser will make sure only one is checked at once
},
items: [{
inputValue: '2',
boxLabel: 'Yey'
}, {
inputValue: '1',
boxLabel: 'Nay'
}]
}));
Ext.define('TargetViewModel', {
extend: 'Ext.data.Model',
fields : [
{name: 'ID'},
{name: 'FAMILYNAME'},
{name: 'TABLENAME'},
{name: 'TARGETNAME'},
{name: 'TARGETLABEL'},
{name: 'TARGETVALUE'},
{name: 'ITEMREL'},
{name: 'ITEMREF'},
{name: 'ITEMNAME'},
{name: 'ITEMMNEMONIC'},
{name: 'ALLOWED'},
{name: 'rating', type: 'int', convert: convertTARGETVALUE}
]
});
... and here is where it is being called:
this.items = [{
// GRID
columnWidth: .65, // GRID width
xtype: 'ggtargetviewgrid',
store: this.store,
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
var value = this.up('form').getForm().loadRecord(records[0]);
}
}
}
}
,
{
// FORM
columnWidth: 0.3, // FORM width
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Target Details',
defaults: {
width: 280,
labelWidth: 50
},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Name',
name: 'ITEMNAME'
}, {
xtype: 'valueradiogroup'
}]
}]
This is my convert function:
var convertTARGETVALUE = function(value, record) {
var tval = record.get('TARGETVALUE'), val = 0;
if (tval === 'Yes') return val+2;
if (tval === 'No') return val+1;
return val;
};
The problem is that the radiogroup works fine for the FIRST form-grid opened, but NOT for the second, or ANY subsequent tabs opened.
I had the same problem and I solved it like this:
xtype:'radiogroup',
itemId:'storageType',
name:'entdata.storageType',//this give me the idea
items:[
{boxLabel:"s0",name:'entdata.storageType',inputValue:"0",checked:true},
{boxLabel:"s1",name:"entdata.storageType",inputValue:"1"},
{boxLabel:"s2",name:'entdata.storageType',inputValue:"2"},
{boxLabel:"s3",name:'entdata.storageType',inputValue:"3"} ]
setValue:function(value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}
Join name with setValue, then can work.