We Keep Coding

Tabulator List Header Filter Issue

Good Day
I am experiencing an issue when using the DataFiltered method on tabulator
table.on("dataFiltered", function(filters, rows){
//filters - array of filters currently applied
//rows - array of row components that pass the filters
});
When the table loads the method is activated. I am trying to trigger an event when the user filters the table using the header filter. Is there a way I can use a onchange method on the headers.
var Table = new Tabulator("#gridData", {
height: 800,
ajaxURL:"getData.php",
layout: "fitData",
selectable:1,
columns:[
{title:"Col", field:"Col1", sorter:"string", headerFilter:"list", headerFilterParams:{valuesLookup:true, clearable:true, autocomplete:true}},
{title:"Col2", field:"Col2", sorter:"string", headerFilter:"list", headerFilterParams:{valuesLookup:true, clearable:true, autocomplete:true}},
{title:"Col3", field:"Col3", sorter:"string", headerFilter:"list", headerFilterParams:{valuesLookup:true, clearable:true, autocomplete:true}},
{title:"Col4", field:"Col4", sorter:"string", headerFilter:"input"},
{title:"Col5", field:"Col5", sorter:"string", headerFilter:"input"},
],
ajaxResponse:function(url, params, response){
return response.data; //pass the data array into Tabulator
}
});
Table.on("dataFiltered", function(filters, rows){
//filters - array of filters currently applied
//rows - array of row components that pass the filters
alert("table filtered");
});

Tabulator Print the clicked row - Print PDF?

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();
}},

How to pass hardcoded string value from javascript onclick with template option using kendo ui grid?

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.

SetRowData and DirtyCells

I'm using SetRowData to set some row data in a jqGrid
jqColModel = gJqGrid.jqGrid('getGridParam','colModel');
rowData = gJqGrid.jqGrid('getRowData', rowid);
for (var i=0; i<newData.length; i++){
rowData[jqColModel[i+1].name] = newData[i];
}
gJqGrid.jqGrid('setRowData', rowid, rowData);
This is working as expected. The jqGrid row is being updated with the values from the newData object.
I'm then trying to get all the modified cells using
jqRows = gJqGrid.jqGrid('getChangedCells', 'dirty');
but this doesn't seem to be working. I'm trying to batch up all the changes and create a custom save event
My grid definition is as below
$(gJqSel_Table).jqGrid({
caption : 'jqGrid'
, datatype : 'local'
, loadonce : true
, data : formattedLineData
, colNames : customColNames
, colModel : customColModel
, autoencode : true
, rowNum : 1000
, keys : true
, sortable : false
, hidegrid : false
, multiselect : false
, altRows : false
, height : '100%'
, autowidth : true
, shrinkToFit : true
, cellEdit : gSettings.editMode
, cellsubmit : 'clientArray'
, afterEditCell : function (rowid) {
var $editControl = $("#" + rowid).find("input, select, textarea");
if ($editControl){
$editControl.on('paste', function(e) {
GridPaste(e, rowid);
});
}
}
});
Can someone provide some guidance about how I can
use a JSON object to set all the cell values of a row
flag each cell in the row as dirty so that the getChangedCells method knows that the values have changed?

After more reading of the jqGrid documentation I found this
setRowData
Do not use this method when you are editing the row or cell. This will
set the content and overwrite the input elements.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
Changing my code to use the setCell method works
Cell value is updated
Cell is marked as dirty and included in the getChangedCells results
My code is as below
jqColModel = gJqGrid.jqGrid('getGridParam','colModel');
for (var i=0; i<newData.length; i++){
colName = jqColModel[i].name;
gJqGrid.jqGrid('setCell', rowid, colName, newData[i], 'dirty-cell');
}
Updated
As #Oleg pointed out in the comments, I also had to add the following to mark the jqGrid line as edited:
gJqGrid.setRowData(rowid, false, 'edited');

Sorting Issue: YUI3 Datatable with Paginator

I have created YUI3 Datatable with Pagination (used gallery module: gallery-datatable-paginator).
var withColumnLabels = new Y.DataTable({
columns: columnDef,
data : data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs",
sortBy: {"mfr_parts_database_name":"desc"},
paginator: new Y.PaginatorView({
model: new Y.PaginatorModel({itemsPerPage:2}),
container: '#labelsPaginatorTemplate'
})
}).render('#labels');
Demo: http://jsfiddle.net/mail2asik/MqwyU/5/
In the above URL, sorting is enabled by default in second column. After render data table, If I am going to sort first column, the second column sorting icon not change as default indicator. Please anyone suggest me to fix the same.
It is working fine if I am not use gallery-datatable-paginator.
var withColumnLabels = new Y.DataTable({
columns: columnDef,
data : data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs",
sortBy: {"mfr_parts_database_name":"desc"}
}).render('#labels');
Demo : http://jsfiddle.net/mail2asik/r3Cbu/6/

I have fixed the issue using "pageUpdate" event but it is not perfect solutions because it should be fixed in core level.
//pageupdate event
withColumnLabels.on('pageUpdate', function (e) {
var sortBy = this.get('sortBy');
if(sortBy){
Y.all(".yui3-datatable-table thead>tr>th").removeClass('yui3-datatable-sorted').removeClass('yui3-datatable-sorted-desc');
var sortObj = sortBy[0],
sortKey = Y.Object.keys(sortObj)[0],
key=sortObj[sortKey];
if(key=="1"){
Y.one(".yui3-datatable-table .yui3-datatable-col-"+sortKey).addClass("yui3-datatable-sorted");
}else{
Y.one(".yui3-datatable-table .yui3-datatable-col-"+sortKey).addClass("yui3-datatable-sorted").addClass("yui3-datatable-sorted-desc");
}
}
});
http://jsfiddle.net/MqwyU/7/