In the following JSFiddle the action function does not fire whenever a button to select a column in the column visibility button is selected. Below is the code that I am using:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'B',
"buttons": [
{
extend: 'colvis',
postfixButtons: ['colvisRestore'],
buttons : [{
extend: 'columnsToggle',
action: function (e, dt, node, config) {
alert('Activated!');
console.log("Activated!");
},
}],
}
],
}
);} );
I would really appreciate your help on this one.
CAUSE
Button columnsToggle doesn't have action option as opposed to colvis button.
SOLUTION
Handle column-visibility event which is fired when the visibility of a column changes.
$('#example').on('column-visibility.dt', function(e, settings, column, state ){
console.log('Column:', column, "State:", state);
});
DEMO
See updated jsFiddle for code and demonstration.
Related
I have using BootstrapTable with X-editable. I have a select box, that I would like to update the source data with a button click. Ideally, I like to get the source from the column, push a value to it and reload it without changing any edits to that column by the user.
Full code:
http://jsfiddle.net/rp4nkb46/1/
relevant code:
$('#addoption').click(function () {
names.push({value: 5, text: 'Bob'})
$('#table').bootstrapTable('OnRefresh', {});
});
Use a function to return the names array rather than specifying the array directly in your table setup:
$(function () {
$('#table').bootstrapTable({
columns: [{field: 'Contact',
title: 'Contact',
editable: {
type: 'select',
source: function() { return names; }
}
}],
data: data
});
});
It seems that the X-Editable will bind a supplied array once upon creation of the control but will call the function each time.
I have a kendo grid with a detail template, which I wish to clear if the user clicks on the clear command in the parent row.
I managed to get this to work, but as soon as I set the value on the dataItem, the row detail collapses, which causes the user to loose his place.
function clearDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
dataItem.set("City",""); // causes row detail collapse
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "Country",
width: 150
}, { command: { text: "Clear", click: clearDetails }, title: " ", width: "180px" }],
detailTemplate: kendo.template($("#myRowDetailTemplate").html())
})
});
Working example:
https://jsbin.com/xuwakol/edit?html,js,output
Is there a way I can still clear the values in the row detail, without it collapsing.
I had the same issue I got around it by using the dataBinding function within the kendo grid.
Basically it checks for an item change event and will cancel the default action to close the grid. This allowed me to continue to use the set method.
Example:
$("#grid").kendoGrid({
dataBinding: function (e) {
if (e.action == "itemchange") {
e.preventDefault();
}
},
});
}
I managed to get this right by not using the set method on the dataItem. http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set
I just changed the value on the dataItem, dataItem.City =""; and with the help of jquery selectors cleared the value of the textarea.
function clearDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
dataItem.City ="";
$(e.currentTarget).closest(".k-master-row").next().find("textarea[name='City']").val("");
}
I am following this example:
https://datatables.net/extensions/buttons/examples/initialisation/export
I want if I confirm the file exporting , the page will reload. How can I do this?
You can customize the button's action. Try this :
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{//Start the creation of the button
extend: "csv",//It's a button that export the table dtat into a CSV file
text: "export and relode",//The text of the button
action: function(e, dt, button, config) {
//The action of the button
$.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);//Export the data
window.location.reload(false);//Relode the page
}
}
]
});
});
Here is a working Fiddle
Need to call csv button from my custom button.
<button value="Export report to Excel" class="button-default datatable-csv" type="button" id="ExportReporttoExcel">
<span>Export report to Excel</span>
</button>
Instead of calling it from the Datatable button, i want the same functionality from the above button.
Looking for some configuration changes in Datatable so that i can call my custom button to export the table records as csv.
var table=$('#tableId').DataTable( {
"paging": true,
"info": true,
"searching": true,
,buttons: true
});
$("#SEARCH").on("keyup search input paste cut", function() {
table.search(this.value).draw();
});
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
'csvHtml5'
]
}).container().appendTo($('#ExportReporttoExcel'));
Getting output like below but i need only one button.
At last i found the solution.
In Datatable configuration , i added click event for the button to be triggered.
buttons: [
{
extend: 'csv',
}
]
$("#ExportReporttoExcel").on("click", function() {
table.button( '.buttons-csv' ).trigger();
});
This works fine for me thanks for the comments and answers
dataTables export buttons is by default enriched with signature classes like .buttons-excel, .buttons-pdf, .buttons-csv and so on. Take advantage of that :
$('#ExportReporttoExcel').on('click', function() {
$('.buttons-excel').click()
});
Say you have your own button
Export Excel
And you have your table that you are using the below code for;
$(document).ready(function () {
var table = $('#example').DataTable({
"paging": false,
"info": false,
searching: false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5'
}
]
});
});
Then all you need to do is to use this code below:
$('#example').DataTable({
"paging": false,
"info": false,
buttons: [
{
extend: 'excel'
},
{
extend: 'csv'
},
]
});
$('.button_export_excel').click(() => {
$('#example').DataTable().buttons(0,0).trigger()
})
The 0,0 points to excel and if you want to point to csv you do 0,1.
If you are trying to trigger the click event of another button and you are using jQuery (according to your tags), you can use
<button onclick="$('#ExportReporttoExcel').click()">Click me</button>
This selects the element with the id "ExportReporttoExcel" and triggers a click with using jQuery.
I have a Kendo UI grid with inline editing. I need to hide update button when edit is clicked.
{
command: [
{ name: "edit" },
{
name: "update",
click: function (e) {
savedata();
},
},
{ name: "destroy" }
],
title: " ",
width: 140,
attributes: { style: "text-align: center; color:Blue" },
},
I dont think that kendo from box have that behavior.
What can you do:
In edit command add onClick handler where you will hide other buttons:
in event arguments e there always some grid row data using which you can find current row with selector or may be just using closest
Update button in kendo always have class k-grid-update, find it and hide