I am trying to append additional HTML to the Column’s header and using the method “afterGetColHeader” to append that, but the column number provided is not correct as it is the new column position and not the original position included in the definition.
How can I get the original column position? or Is this a bug and the method should provide the correct column?
Here is a fiddle:
http://jsfiddle.net/gvazq82/Laom3uzv/
Hi @gabriel_vazquez is it the latest demo version you wanted to share? I’m asking cause it does not have afterGetColHeader method. If you found a bug please reproduce it with this simplified demo: http://jsfiddle.net/Laom3uzv/7/
When it comes to HTML in headers, please take a look at our custom renderers tutorial at https://docs.handsontable.com/0.20.3/demo-custom-renderers.html
Hi @aleksandra_budnik, than you very much for the help.
I already read the documentation for custom headers, but what I am trying to do is to delegate the header to a Backbone.View that already handles multiple behavior for that as I need to display images additional to the title, I was thinking on using the method afterGetColHeader to have access to the TH attribute and then append my view directly using something like:
afterGetColHeader : function(col, th) {
var MyView = ArrayOfViews[col];
$(th).html(MyView.render().$el)
}
But unfortunately the col number provided is not correct, for example, having the column 2 moved to the 5th position, I would be expecting col=2 in this method as that is returned on the colHeaders if I provide a function, but instead I am getting col=5, that I consider is not correct.
I appreciate any information you can provide about it.
Thanks @aleksandra_budnik, I am not sure if there is an issue reported with the method “afterGetColHeader” in case manualColumnMove is enabled, as the column number received by this method does not correspond to the actual column been render, here is the problem:
hot1 = new Handsontable(table,{
data: Handsontable.helper.createSpreadsheetData(100, 5),
colWidths: 50,
colHeaders: function(col) {
return 'Col-' + col;
} ,
manualColumnMove: [1,2,3,4,0],
afterGetColHeader: function(col, TH) {
console.log('AfterCol', col, TH.innerHTML);
},
persistState: true,
rowHeaders: true,
dropdownMenu: true,
renderAllRows: true
}); });
Essentially, I would be expecting the line ‘console.log(‘AfterCol’, col, TH.innerHTML);’ prints:
AfterCol 0 <div class="relative"><button class="changeType"></button><span class="colHeader">Col-0</span></div>
But instead is printing this:
AfterCol 0 <div class="relative"><button class="changeType"></button><span class="colHeader">Col-1</span></div>
Here is a fiddle with the example:
http://jsfiddle.net/gvazq82/uoy7fduo/
Let me know if this is a known issue.
Hi @gabriel_vazquez
I simplified a little your example http://jsfiddle.net/uoy7fduo/6/ to block receiving unnecessary information and I looks like this:
Logs with a green background are callbacks for your data source and those with a white background for your manualColumnMove: [1,2,3,4,0] settings.
After I moved Col-2 before Col-1 I got as expected Col-2 has AfterCol 0
After the column was moved the title in the column is ok, but not the column passed to the method, for example you have:
AfterCol 0 <div class="relative">...Col-2...</div>
Why the column number is 0 and not 2 if I am rendering the column 2?
Please, let me know you comments.