Here below the table i'm currently working on it. What I'm trying to achieve is to remove the header (A, B, C, ...) without losing the resizeability feature for the columns.
'config' : [
'columns': {
['data':6, 'type': 'numeric', 'readOnly': false],
['data':7, 'type': 'numeric', 'readOnly': false],
},
'copyPaste' : true,
'colHeaders' : false,
'fillHandle': false,
'manualColumnResize': true,
'colHeaders': true,
'wordWrap' : false,
]
Basically, once I set manualColumnResize = True the A,B,C Header appers. Is there a way to keep the manual resize without the header?
You have the colHeaders option listed twice. Remove the one that is set to true and it should remove the headers.
EDIT: I believe the resize functionality actually requires the headers. When you hover in between two columns' headers, you trigger the selector to expand or retract the size of the column. If you want to remove the (A, B, C) default header names, you can always pass a custom function to overwrite them:
...
// as function
colHeaders: function(index) {
return index + ': AB';
}
...
Related
I'm using handsontable on an angular app with ngHandsontable. I can see that I need to set search to true in the table settings, which should make a query method available.
Can someone explain how I am able to access that method through my angular controller?
<input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" />
<hot-table settings="tableSettings.settings"
datarows="mappingData"
col-headers="true"
height="700">
<hot-column data="Column1" title="'Column One'"></hot-column>
</hot-table>
Angular
function GlobalMappingController($scope) {
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery
}
};
The issue is access to the root handsOnTable instance created by ngHandsOnTable isn't as intuitive as you might think, but in order to access all the functions handsOnTable has by itself you have to do something like this.
First, declare the variable we'll use as the instance of the table
$scope.handsOnTable;
You can access the root for handsOnTable by setting the afterInit parameter in the settings array
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery,
//insert this
afterInit: function() {
$scope.handsOnTable = this;
}
}
};
You can then set an ng-change on the input to something like this:
function search() {
$scope.handsOnTable.search.query($scope.searchQuery);
$scope.handsOnTable.render();
}
You'll also need to, in the same manner as the afterInit, set afterchange with the same statement. If you've got your own custom version of the function then just put it in after everything else has ran.
Keep in mind you'll have to keep the input box bound to searchQuery and add onChange="search()" but that should work - at least it did for me.
I am trying to make a grid groupable on columns field but the columns are object.
{
Gestionnaire :
{ id: 4, nom:'nomgestionnaire'},
{..},
..
}
I have success for sortable:
columns: [
field: "Gestionnaire"
title: "Gestionnaire"
sortable:
compare: (a,b) =>
#compareColumnFields(a.Gestionnaire.Nom, b.Gestionnaire.Nom)
]
with #compareColumnFields function is :
if a is b
return 0
else if a > b
return 1
else
return -1
and for groupable?
groupable : ...
I think you're wanting to allow the user to actively group columns.
In that case, all you need is:
groupable: true
in the main structure of the grid.
For example:
$('#grid').kendoGrid({
columns: [
{
fields: "Guestionaire",
title: "Guestionaire",
sortable:
compare: (a,b) =>
#compareColumnFields(a.Guestionaire.Nom, b.Guestionaire.Nom)
},
{...placeholder for other columns...}
],
groupable: true
});
Kendo has a sample of this at http://dojo.telerik.com/ejehe
Ignore the SelectRow and Expand/Collapse stuff and that ought to be the same as what you're trying to accomplish.
For those in the same situation as me , I completely change solution. Instead of making me a function that returns true and false , it giving it the object in full, I just give the string .
For my example I give directly a.Gestionnaire.Nom and b.Gestionnaire.Nom, and THEN you can call :
groupable: true
In fact it was obvious.
I am trying to change the default sorting direction. The default order is ascending and then descending. I am trying to reverse it.
The sorting direction should be independent and should apply to all the columns( Number of columns vary with different tables ) The script I have to initiate datatable is generic.
Sorting should only apply on click.
I found few examples but they are column specific https://datatables.net/examples/advanced_init/sort_direction_control.html
Here is my script
jQuery(function($) {
$(".datatable").dataTable({
"paging": false,
"searching": false,
"info": false,
"orderCellsTop": true
});
});
All options and settings has default values defined in the internal DataTable.defaults object. This object is available for altering through $.fn.dataTable.defaults. This is poorly documented on the website, but very well documented in the code. Open a none minified jquery.dataTables.js and search for DataTable.defaults.
To reverse the default ordering for all columns, so it becomes desc, asc :
$.fn.dataTable.defaults.column.asSorting = ['desc', 'asc'];
To set the initial ordering for the first column to desc
$.fn.dataTable.defaults.aaSorting = [[0,'desc']];
Likewise you can simply alter the defaults so you not need to set any generic options in your dataTable() at all :
$.fn.dataTable.defaults.bPaginate = false; //paging: false
$.fn.dataTable.defaults.bFilter = false; //searching: false
$.fn.dataTable.defaults.bInfo = false; //info: false
$.fn.dataTable.defaults.bSortCellsTop = true; //orderCellsTop: true
see demo -> http://jsfiddle.net/f31pncb4/
You can do it while initializing:
jQuery(function ($) {
$(".datatable").dataTable({
"paging": false,
"searching": false,
"info": false,
"orderCellsTop": true,
aoColumnDefs: [
{
orderSequence: ["desc", "asc"],
aTargets: ['_all']
}
]
});
});
Richard's answer above works but is the legacy approach. The syntax for current versions is similar and a bit simpler:
var myTable = $('table').DataTable({
"columnDefs": [
{
"orderSequence" : [ "desc", "asc" ],
"targets" : "_all"
}
]
});
Slightly off topic but note capital "D" in DataTable() which returns an api instance instead of a jquery object. This is important since doing it this way allows you easier access to the api after initialization.
Extending the #Eaten by a Grue's answer, if we want, we can use the same orderSequence API to reverse the sort order using HTML only.
Under the <thead>, we can change the <th> as follows:
<th data-order-sequence='[ "desc", "asc" ]'>Amount</th>
I am trying to set an explicit list of allowed contents in my ck editor, but it seems that I'm not being inclusive enough in my list because almost all my plugins are disabled. If I set the ACF back to auto (delete allowedContent) then all the plugins come back. Here is my allowedConent in the config.js
config.allowedContent =
{
h1: true,
h2: true,
h3: true,
'span, p, ul, ol, li,': {
styles: 'color, margin-left, margin-right, font-size'
},
'a[!href,target,name]': true,
b: true,
u: true,
i: true,
}
Yet the only buttons that seem to be enabled are bold, underline, and italics. I'm trying to figure out why my other plugins aren't working. For instance, the link plugin has the following:
var allowed = 'a[!href]',
required = 'a[href]';
// Add the link and unlink buttons.
editor.addCommand( 'link', new CKEDITOR.dialogCommand( 'link', {
allowedContent: allowed,
requiredContent: required
} ) );
editor.addCommand( 'anchor', new CKEDITOR.dialogCommand( 'anchor', {
allowedContent: 'a[!name,id]',
requiredContent: 'a[name]'
} ) );
As you can see, I have anchor with the necessary properties defined (anchor with an href and name), yet the button doesn't show up! I have verified my syntax is correct by printing out CKEDITOR.instances["editor-1"].filter.allowedContent and it shows the object I'm expecting. I have also tried adding a bunch of common elements like to see if adding one of them brings the plugins back, but it does not. So what am I missing?
Well it seems that I was mixing my object syntax and my string syntax. Once I corrected this, the anchor and font-size buttons started appearing. The following is what I have so far:
config.allowedContent =
{
h1: true,
h2: true,
h3: true,
a: {
attributes: ['!href','target','name']
},
b: true,
u: true,
i: true,
// font-size
span: {
styles: { 'font-size': '#(size)' },
overrides: [ { element :'font', attributes: { 'size': null } } ]
}
}
I still need to figure out the proper definition for font-color and a few others, but that's just a matter of inspecting the plugins' code and seeing what they expect.
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">