Multiple custom button in the column header

[spadhyParticipant]

Hi,
I am trying to add a small pencil icon to the column header to allow column editing in addition to the default jqx-icon-plus-alt (for adding item cards) and the jqx-icon-arrow-left (for collapse) provided by the jqxkanban.

I added the small pencil edit icon successfully to the column header using the following statement inside the Column Renderer:
element.find(“div.jqx-window-collapse-button-background.jqx-kanban-column-header-custom-button”).after(‘<div class=”jqx-window-collapse-button-background jqx-kanban-column-header-custom-button”><div id = “test1″ style=”width: 100%; height: 100%; left:-30px; top:-15px” class=”fa-edit-icon”></div></div>’)

However, when I tried to add action on a click event, then I am facing problem. I observed that in event.args attribute has only possible values: “title” and “button”. By default, on columnAttributeClicked, event.args attribute is set to “title” and the column is collapsed. On click to “+”, the attribute is set to “button” and new item is added.
When I am trying to add callback to my new added icon with class name (‘fa-edit-icon’) on click vent, the event.args ‘s attribute is set to “title”, the column is collapsed. How do I distinguish between a newly custom added button and the default “jqx-icon-arrow-left” as both event.args’s attribute is set to “title”? I tried setting args.cancelToggle = True for “title” attribute but then the column is not collapsible anymore.

Is there a workaround for adding one more icon to the column header?

Please advise.

Best,
Smruti

[HristoParticipant]

Hello Smruti,

Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxkanban/index.htm#demos/jqxkanban/kanban-header-template.htm
The newly added items (buttons) and the arrow from the header of a column of the Kanban are differing in the its “attribute”. The buttons are named as “button” and other parts of the header are “title”.

Unfortunately, there has an option to click on this item (‘button’) and you could customize only this.
I would suggest you bind to simple ‘click’ event on the “kanban” and check which element is clicked and do your logic then:

$('#kanban1').click(function (event) {
	console.log(event.target);
})

You could check if some of them are clicked by adding a class that will show when some of them are clicked. (# ‘jqx-is-clicked’) and removed it when clicking to another.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts