Adding widgets to a Kanban item template

[PhilbaneyParticipant]

Is it possible to add widgets to the Kanban item template?
for example a progress bar. I can add one to an individual item using ready: function(){, but this will only populate the first item in my resource data that looks for it.
Ideally I’d like to be able to add a number of widgets to the template.

[adminKeymaster]

Hi Philbaney,

You can use the itemRenderer callback function in order to achieve that.

Example:

`itemRenderer: function(element, item, resource)
{
$(element).find(“.jqx-kanban-item-color-status”).html(“” + resource.name + ““);
$(element).find(“.jqx-kanban-item-text”).css(‘background’, item.color);
},`

Please, refer to https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxkanban/kanban-header-template.htm?light which shows how to customize the kanban items template.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Michel872Participant]

Matlab help is the well known assignment assistance providers in the uk that providers that gives top numerical differentiation assignment help and also gives best numerical integration assignment help to the students of uk. They follow the guidelines of the modern educational system.

[PhilbaneyParticipant]

Unfortunately, this doesn’t answer my question. This is about adding widgets to the content space in the widget item. According to the API reference, the source item has a property ‘content’ which “Could be filled with text/images/widgets etc”. I can add text,images etc. to this easily, but how do I add a widget???

[Yavor DashevParticipant]

Hi Phillbaney,

I have created a complete code example showcasing how you can add a jqxProgressBar into your jqxKanban.

For your convenience I have created a complete jsfiddle showcasing this: http://jsfiddle.net/yzethonx/3/

Let me know if this works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[PhilbaneyParticipant]

Hi Yavor

Thanks for this, its certainly helped with my problem. I now get the progress bar rendered in each item, but when I try to add the value

itemRenderer: function (element, item, dataAdapter)
{

var progressBar= document.createElement(‘div’);
progressBar.classList.add(‘progressBar’);
element[0].appendChild(progressBar);
$(element).append(progressBar);

setTimeout(() => {
$(“.progressBar”).jqxProgressBar({ width: 200, height: 10, value: dataAdapter.progress});
alert(dataAdapter.progress);
}, 100);

$(element).find(‘.jqx-kanban-item-color-status’).html(‘<span style=”line-height: 23px; margin-left: 5px; color:white;”>’ + dataAdapter.text + ‘</span>’);
},

My alert shows each value correctly, but the progress bars all use the value entered for the last one.

[Yavor DashevParticipant]

Hi Philbaney,

The problem was that the selector was a class and that is why it binds the last value and applies it to all the jqxProgressBar’s.

The solution will be to create a custom id for the jqxProgressBAr and use it to set up the component.

I have further edited the previous code example so that it works correctly: http://jsfiddle.net/c0328vjp/

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[PhilbaneyParticipant]

Thanks Yavor

Thats exactly what I needed to do.

[Author]

Posts