I am looking if there is any I can add a print button to tabulator row and when it is clicked it prints that particular row?
http://tabulator.info/docs/4.3/print
thanks
There is no built in functionality for this, but you could easily put something together to achieve this. This examples assumes that each row has a unique id field.
You could use a custom formatter to create a Button Column, then use that to filter the table to just that row, then print the table, then clear the filter:
//custom formatter definition
var printIcon = function(cell, formatterParams, onRendered){ //plain text value
return "<i class='fa fa-print'></i>";
};
//column definition in the columns array
{formatter:printIcon, width:40, align:"center", cellClick:function(e, cell){
//filter table to just this row
table.Filter(function(data){
return data.id == cell.getData().id;
});
//print the table
table.print();
//clear the filter
table.clearFilter();
}},
Related
I am using tabulator js for table generation and exporting it into pdf.
Table generated using tabulator is showing total table calculation in table footer but after downloading pdf there is no table footer. (i.e. there is no total calculation showing up).
Here is the screenshot of html table generated using tabulator.
let table = new Tabulator(selector, {
columnCalcs: "both",
columnVertAlign: "bottom", //align header contents to bottom of cell
data: tableData, //assign data to table
//Pre-format tabulator raw data before downloading
downloadDataFormatter: function (data) { //data - active table data array
//change calculations group info and reformat currency values
data.calcs = updateTotalColumn(data.calcs);
data.calcs = reformatCurrencyCalculations(data.calcs);
data.calcs = renameGroupKeysforCalcs(data.calcs);
//Update Row headers appending prev headers
data.data = subGroupHeader(data.data);
//return data for download
return data;
},
downloadConfig: {
columnGroups: true,
rowGroups: true,
columnCalcs: true
},
layout: "fitData", //fit columns to width of table
groupBy: groupByData,
groupStartOpen: groupOpenAtLoad,
groupHeader: groupHeaders,
groupToggleElement: groupToggleElement,
columns: tableColumns
});
You need to set download config
downloadConfig:{
columnCalcs:true,
},
I am having 2 grids on my page with name grid1 and grid2.
Now i want to pass grid name as hardcoded to my 1 common javascript function for deleting records from grid like below:
for Grid 1 delete function:
field: "Id",
template:<a title="delete" onclick="javascript:return Delete(<#=Id#>,<#=grid1#>);" > //showing error in console grid1 is not defined
for Grid 2 delete function:
field: "Id",
template:<a title="delete" onclick="javascript:return Delete(<#=Id#>,<#=grid2#>);" > //showing error in console grid2 is not defined.
My javascript function:
function Delete(id, gridname) {
console.log(id,gridname)
}
Please try with the below code snippet. If you write any text between # (hash) the grid try to find that field in your datasource that's why you got the undefined error.
JS Function:
function Delete(id, gridname) {
var grid = $("#" + gridname).data("kendoGrid");
console.log(id, gridname)
}
for Grid 1 delete function:
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid1\");'></a>",
for Grid 2 delete function:
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid2\");'></a>",
Let me know if any concern.
I am using jqgrid on my form and I am creating the column delete and want to send the object in javascript function, the code is following
{
name: "action",
align: "center",
sortable: false,
title: false,
fixed: true,
search: false,
formatter: function (cellValue, options, rowObject) {
debugger;
var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
var replacements = {
"%Text%": "<i class='fa fa-trash' style='color:black'></i>",
"%ToolTip%": UserRoles.messages && UserRoles.messages.ClickHereToDelete
? UserRoles.messages.ClickHereToDelete : "",
"%Href%": "javascript:UserRoles.deleteUserRoles(" + rowObject + ")"
};
markup = markup.replace(/%\w+%/g, function (all) {
return replacements[all];
});
return markup;
}
}
I want to send the object in the function deleteUserRole by this line
"%Href%": "javascript:UserRoles.deleteUserRoles(" + rowObject + ")"
but it is giving me output
<a title="" href="javascript:UserRoles.deleteUserRoles([object" object]);=""><i class="fa fa-trash" style="color:black"></i></a>
can any one help me
Mostly one don't need to create such custom formatter and one can use just formatter: "action" with the corresponding parameters.
It's important to understand that the goal of formatter is providing the HTML fragment which will be placed in cells (in <td>) of the column. The rowObject are typically the input data of the row which format depend on many factors.
What you probably need is to use options.rowId as parameter of UserRoles.deleteUserRoles function. Inside of the function you can use getRowData to get the data based on the rowid.
I would recommend you to read the answer and all old answer referenced i the answer. It shows that one can just use place "<a href='#'><i class='fa fa-trash' style='color:black'></i></a>" by custom formatter **without using any javascript:UserRoles.deleteUserRoles(...) fragment. Instead of that one can implement beforeSelectRow callback which tests in which column the user clicked. If the user clicked on the <a> of "action" column then one can do some custom action. The way is more effective because one don't need bind global function to every <a> element of the column. One can simplify the content of the column by removing <a> and holding only <i class='fa fa-trash' style='color:black'></i> inside of the column. The code of beforeSelectRow callback will be the same.
I have been searching for relative posts: Datatables Multi Select Column filter , How to add additional filters to Datatables header? but it does not solve my problem.
I use dataTables 1.9 (legacy one), where I need a filter header exactly at the header like excel does
which will provde a litter button and and then pop up a multi-select(with check boxes) filterer the rows.
So, I need two thing:
a little button to the header and a multi-select displays after click
column filter after multi select close.
Is there a plugin or any simple way to do this? Thank you!
you need to write you desire html in dataTable "fnRender": function (oObj) {} and return that html.
aoColumns: [{
"sName": "ColumnName", sType: 'string', sWidth: '5%', "fnRender": function (oObj) {
var html = '<select>' +
'<option value="volvo">Volvo</option>' +
'<option value="saab">Saab</option>' +
'<option value="mercedes">Mercedes</option>' +
'<option value="audi">Audi</option>' +
'</select>';
return html;
}
}]
html will be added to your desired cell.
i want row details for what i clicked,actually am using create editor for assigning dropdownlist in grid column i got it correctly but am not getting the row details properly every row giving same values so how can i get correct row details
i used this code
{
text: 'Sort Type', dataField: 'aliasname1', columntype: 'dropdownlist', width: '11%', editable: true,
createeditor: function (row, cellvalue, editor) {
var colvalue = $('#shipmentgrid').jqxGrid('getcellvalue', row, 'column');
var tblvalue = $('#shipmentgrid').jqxGrid('getcellvalue', row, 'table');
// construct the editor.
var requiredfield = ["Ascending", "Descending", "Unsorted"];
editor.jqxDropDownList({ source: requiredfield, dropDownHeight: '80px', autoDropDownHeight: 0, selectedIndex:-1, checkboxes: true })
}
},
The row's index is passed as parameter - function(row, ....
If you want to get the row's data based on that index you may use getrowdata method and pass the row's index as param.