We Keep Coding

Print all rows including rows hidden by pagination

The documentation shows by adding printVisibleRows:false the table.print(false,true) function will print all rows. My table only prints the 20 rows that are visible due to pagination. I would like to print all rows. Is that possible?
//define setup options
var tabData = [{
invalidOptionWarnings: false,
layout: fitDatafill,
printAsHtml:true,
printVisibleRows:false,
printCopyStyle:true, //copy Tabulator styling to HTML table
printHeader:"<h1>"+tdata[0].tablenamedisplay+"<h1>",
printFooter:"<h2><h2>",
autoResize:true,
pagination:"local",
paginationAddRow:"page",
paginationSize:20,
paginationSizeSelector:[25,40,50,100],
movableColumns:false,
tooltipsHeader:true,
columns:tdata[0],
data:tdata[1],
footerElement:myfooter,
rowClick:function(e, row){},
rowContext:function(e, row){
e.preventDefault(); // prevent the browsers default context menu form
appearing.},
}];
//create table
tabEquip[p] = new Tabulator("#"+vDDest, tabData[0] );
My table only prints the 20 rows that are visible due to pagination. I would like to print all rows.

You can do this as of Tabulator v4.8 in one of two ways.
Either by setting the printRowRange option to "active" in the table constructor, and then calling the print function:
///define table
var table = new Tabulator("#example-table", {
printRowRange:"active", //print all active rows
});
//print table
table.print();
Or by passing the string "active" into the print function when you call it:
table.print("active", true);

How to ignore fields in search while being able to search using the API?

My table contains thre columns; "name", "description" and "status". I have a dropdown field which filters the table on the status column. Essentially:
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$('#dt').DataTable().column('status:name').search(value).draw();
}
});
This works, but the problem is the standard free-text search input field includes the status field in the free-text search.
Setting searchable: false on the status field causes the dropdown to stop working since Datatable ignores it.
{
data: 'status',
name: 'status',
searchable: false // Stops table.column().search(value) from working :-(
}
Ideally, the (standard) free-text search field should ignore the stuatus column, but the dropdown code should still be working.

This works:
Set the column to searchable: false. This makes the table ignore this column in free text searches.
Add a custom search which uses the original row data, settings.aoData, instead of the data array (it doesn't contain the column because of 1.)
Redraw the table when the filter dropdown changes.
Code:
$('#dt').DataTable(defaults)
.on('init.dt', statusHandling);
function statusHandling(e, settings, processing) {
// Redraw table on dropdown status change
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$(options.table).DataTable().draw();
}
});
// Our custom search function which adds an AND 'status = foo' condition
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var input = $('input[name=status]').val().toLowerCase();
// Use original data instead of 'data' because status is not searchable
var status = settings.aoData[dataIndex]['_aData']['status'];
return status.toLowerCase().indexOf(input) === 0;
}
);
}

Add new Row in Kendo Grid with some default values

I want to add new Row in Kendo Grid which is having Default value in First Cell.
How can I set the Default Value in that added Row of Kendo Grid
I am adding New Row in Kendo Grid as::
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
But I want to Set the Value of First cell on the Basis of Value of Clicked DOM element, Like
$('#AddSingleSuppliment').click(function () {
var temVal=$(this).text();
grid.addRow(tempVal);
});
But we can't do it in that Manner.
So please help me on this, For adding New Row in Kendo Grid with one Cell having Value of Button clicked.
Now I am able to Add New Row in Kendo Grid as,
$("#AddSingleSupplement").click( function(){
var tempSupplement = $(this).val();
//alert(tempSupplement);
grid.addRow(tempSupplement);
grid.dataSource._data[0].Description = $(this).text().trim();
});
But the Value is not Directly Shown while adding new Row. It is Shown after we click on some other element.
Please Suggest me wether this one is the Correct way to do this or there is any other way than this.

For dynamic defaults you can wire up your logic on Edit event, something like:
<script>
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
function onEdit(e)
{
//Custom logic to default value
var name = $("#AddSingleSuppliment").text();
// If addition
if (e.model.isNew()) {
//set field
e.model.set("Name", name); // Name: grid field to set
}
}
</script>

As per Kendo team , Default value cannot be changed dynamically.
However, we can make use the Grid edit event to pre-populate the edit form:
edit: function(e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=ProductName]") // get the input element for the field
.val("MyCustomValue") // set the value
.change(); // trigger change in order to notify the model binding
}
}

label inside combobox and conditional multiselect

I am building a pretty combobox with checkboxes and conditional entries. Everything works out alright, except for two features that I cannot figure out how to implement.
1) I would like to move the label inside the combobox, make it shift the values to the right, and appear in a slightly gray color.
2) I would like the value to ignore certain entries (group headers) selected. Those entries are there for functionality only - to select/unselect groups of other entries.
The entire project is in the zip file. You don't need a server, it's a client base app. Just download the archive, unpack, and launch app.html in your browser.
http://filesave.me/file/30586/project-zip.html
And here's a snapshot of what I would like to achieve.

Regarding your second issue, the best way I see is to override combobox onListSelectionChange to filter the values you don't want:
onListSelectionChange: function(list, selectedRecords) {
//Add the following line
selectedRecords = Ext.Array.filter(selectedRecords, function(rec){
return rec.data.parent!=0;
});
//Original code unchanged from here
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
// Only react to selection if it is not called from setValue, and if our list is
// expanded (ignores changes to the selection model triggered elsewhere)
if (!me.ignoreSelection && me.isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
/*
* Only set the value here if we're in multi selection mode or we have
* a selection. Otherwise setValue will be called with an empty value
* which will cause the change event to fire twice.
*/
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}
},
And change your onBoundlistItemClick to only select and deselect items in the boundlist not to setValue of the combo:
onBoundlistItemClick: function(dataview, record, item, index, e, eOpts) {
var chk = item.className.toString().indexOf('x-boundlist-selected') == -1;
if ( ! record.data.parent) {
var d = dataview.dataSource.data.items;
for (var i in d) {
var s = d[i].data;
if (s.parent == record.data.id) {
if (chk) { // select
dataview.getSelectionModel().select(d[i],true);
} else { // deselect
dataview.getSelectionModel().deselect(d[i]);
}
}
}
}
},
Regarding your first issue, it is easy to add the label using the displayTpl config option. But this will only add the text you need, without any style (grey color, etc). The combo is using a text input, which does not accept html tags. If you don't need the user to type text, than you may want to change the combo basic behavior and use another element instead of the text input.

slickgrid validate row that is going to be added

As in examples a new row is added when you type something into one of the cells of last row. How is it possible to add new row only after all cells in this new row are valid to the validator rules of columns ?

Here's a working snippet. It doesn't stop row from being added but it runs all validations on a new row and forces user to enter all missing values.
First define validateRow function (ideally it should be put in SlickGrid namespace):
function validateRow(grid, rowIdx) {
$.each(grid.getColumns(), function(colIdx, column) {
// iterate through editable cells
var item = grid.getDataItem(rowIdx);
if (column.editor && column.validator) {
var validationResults = column.validator(item[column.field]);
if (!validationResults.valid) {
// show editor
grid.gotoCell(rowIdx, colIdx, true);
// validate (it will fail)
grid.getEditorLock().commitCurrentEdit();
// stop iteration
return false;
}
}
});
}
Then invoke it in onAddNewRow binding func (or after adding a item to Array if you're not using DataView):
grid.onAddNewRow.subscribe(function (e, args) {
dataView.addItem($.extend({
id: dataView.getLength()
}, args.item));
validateRow(args.grid, args.grid.getActiveCell().row);
});

SlickGrid doesn't support that.