Adding card to Kanban board; doesn't show up 'first time'

Webix JS
1

I’m doing this with Ajax. Trying to start with an empty list of cards. Then get some JSON, and create new cards. It ‘works’ but doesn’t seem to display the new cards on a first go through.

Hopefully the code is semi human readable. Res is the results, each People is a Person and needs having info shoving into or updating an existing card, and board is the Kanban board:

			$.each(res.People, function(i, item) {
				card = board.getItem(item.id);
				if(typeof(card) === 'undefined') {
					board.add({
						id: item.id,
						text: item.text,
						color: item.color,
						photo: item.photo,
						status: "new"
					});
				}
				else {
					card.status = item.status;
					card.color=item.color;
					card.text = item.text;
					card.photo = item.photo;
				}
				board.refresh(item.id);
			});

If I call this twice in a row it works fine. If I call it once, and just wait for the next ajax call (it’s on a timer), it works fine. But the first time through the new cards are not displayed.

What am I missing?

2

Hello,

Could you provide a snippet that shows the problem? Locally add() method works correctly:

http://webix.com/snippet/6052e175

3

Hi,

try this:

http://webix.com/snippet/e9b2a08f

Notice that I’m calling the ‘setTimeout’ twice, once after one second, once after 5 seconds - and that the cards only arrive after 5 secs.

4

Hi,

you set an incorrect status for added items (there are not columns with “new” status). Please check a correct demo:

http://webix.com/snippet/5e3bfe38

5

Ah silly me.

I got confused reading http://docs.webix.com/kanban__adding_items.html

We use the word ‘status’ for different things, so it doesn’t click that the column’s defining ID is actually the status rather than the ID!

Thanks, works now.

6

Hi again,

the column’s defining ID is actually the status

Not exactly. A column’s “status” property and a task’s “status” should be the same if you want to display the task in the column. In your demo column’s “id” is the same as “status”, but they can be different.

7

Ah yes, sorry I’m not talking about the ID property. I meant defining as in… how it’s referred to, how it’s identified. Just getting my head round the nomenclature - status:new in the demo read to me, incorrectly, as “a newly added card should have status set to new”.

(Despite the fact I’d already set status correctly elsewhere, hence the silly me!)

8

Edit found the answer myself - I was missing .config.

$$(id).config.journeyPassCount returns me a value :slight_smile:

Original q:

Different question - can I set other properties in the “col” and access them?

I’m having trouble figuring out how to get to the col’s properties.

For example:

cols: [
{
id:’{67901B1D-0DE6-4EE1-B943-501B6B1A9A6E}’,
header:‘00:00 (2)’,
headerHeight:100,
headerAltHeight:50,
journeyCapacity:2,
journeyPassCount:0,
onContext:{webix_accordionitem_header: showHeaderMenu},
body:{ view:‘kanbanlist’,type:‘cards’,
status:’{67901B1D-0DE6-4EE1-B943-501B6B1A9A6E}’,
type:‘withphotos’,
onContext: {webix_view: showMenu}
}},

…

How do I access the “journeyPassCount” and “journeyCapacity” values? board.getColumnConfig(id) doesn’t seem to work, and neither does $$(id)

9

Yes, you can access configuration properties of any view via config object. And add() method is not the only method that allows to add items. For multiple data loading you can use parse() and load() methods or data/url properties:

http://docs.webix.com/kanban__loading_data.html

10

Is there a way of hiding or disabling (ideally both options would be available) a card?

Thanks.

11

You can use filter() method to hide items you need:

http://webix.com/snippet/d875f802

Disabling will require setting event handlers that will block drag-n-drop and selection for the items. $css property in data item will allow to apply additional css class:

http://webix.com/snippet/9e836062

1 Like