Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

Buttons panel

Org chart provides simple API to create custom user buttons. They are defined in primitives.orgdiagram.Config.buttons collection, of type primitives.orgdiagram.ButtonConfig. The option primitives.orgdiagram.Config.hasButtons allows to make buttons visible only for current cursor item or for all normal items in diagram. The same option primitives.orgdiagram.ItemConfig.hasButtons in item controls buttons visibility for individual items.

Buttons can be customized per item template. See Item template example in this section.

  

 

Comments 

 
#15 Administrator 2018-07-16 09:56
Quoting AtariClaire:
Is it possible to have the buttons panel display horizontally along the top or bottom of each item, instead of vertically?

The chart itself does not support this option, but you can change cursor template, see Cursor Template and Tweeter Bootstrap sample
Quote
 
 
#14 AtariClaire 2018-07-16 09:28
Is it possible to have the buttons panel display horizontally along the top or bottom of each item, instead of vertically?
Quote
 
 
#13 Administrator 2018-04-26 06:56
Quoting Jeeva:
How can i get the tooltip on hovering he title?

Quoting Udayakumar:
It's possible for used tool-tip in particular node?

Item Content is HTML fragment defined by user with item template. By default chart uses built in default item template.
The rendering consists of 2 stages. Chart uses Item Template to clone HTML fragments for every new node or reuse existing HTML fragments of existing nodes and at second stage it calls call back function onItemRender to let user map context item to that HTML fragment. So users Item defined in chart API is being mapped in onItemRender. Please, take into account that some jQuery UI Widgets or graphics elements like SVG may be broken if they are disconnected from DOM, so onItemRendering function has argument indicating whether HTML fragment is new or just cloned from Item template and attached to DOM.
See Item Template Sample on how to add nested jQuery UI widget into node content
Quote
 
 
#12 Administrator 2016-11-24 20:44
Quoting Andreas:
Hi,
how to show the item's buttons only on mouse hover of that item?
Thanks.

Look at Highlight Template Sample and try to add buttons to it the same way as in Cursor Template Sample
Quote
 
 
#11 Andreas 2016-11-22 04:22
Hi,
how to show the item's buttons only on mouse hover of that item?
Thanks.
Quote
 
 
#10 Administrator 2015-06-13 08:58
Quoting sachin:
Hi,
How can I change the source of button icons?

The widget uses jQuery UI buttons and icons, in order to customize them you can render buttons yourslef in item template or cursor template. See Bootstarp demo.
Quote
 
 
#9 Administrator 2015-06-13 08:54
Quoting Paul:
Hi,
I need to display Add button only for Root Item and NOT for the child items. Child Items will have the Info button.
How do I modify the code?
Thanks,
Paul

See Item Template example. TemplateConfig has property "buttons" for this purpose.
Quote
 
 
#8 Paul 2015-06-13 01:06
Hi,
I need to display Add button only for Root Item and NOT for the child items. Child Items will have the Info button.
How do I modify the code?
Thanks,
Paul
Quote
 
 
#7 sachin 2015-01-17 07:24
Hi,
How can I change the source of button icons?
Quote
 
 
#6 Moni 2014-02-08 09:00
Hello,
I'm trying to open a modal dialog when a button is clicked. I would like to place it near the button. This is what I'm trying to do:
case "edit":
var $button = $(this);
var $dialog = $("#divdeps");

var top = $button.position().top + $button.height() + ($button.outerHeight(tru e) - $button.height()) - $(window).scrollTop();
var left = $button.position().left + $button.width() + ($button.outerWidth(true ) - $button.width())

$dialog.dialog({ autoOpen: true, modal: true, closeOnEscape: true, draggable: false, resizable: false, width: 415, height: 175, position: [left, top]
});
break;
But it doesn't work. How can I get the position of the button when it is clicked?
Quote
 
 
#5 Nevermind 2014-02-05 07:05
Quoting Administrator:
Quoting Nevermind:
Hi,
How can I change the color of button icons? How to use other images in ui-lightness folder?

Button's icon defined by its class name.
buttons.push(new primitives.orgdiagram.ButtonConfig("delete", "ui-icon-close", "Delete"));

See http://api.jqueryui.com/theming/icons/ for list of icons in jQuery UI

In order to change color theme you have to make custom build of jQuery UI
http://jqueryui.com/download/
select required color theme

Thank you!
Quote
 
 
#4 Administrator 2014-02-04 08:48
Quoting Nevermind:
Hi,
How can I change the color of button icons? How to use other images in ui-lightness folder?

Button's icon defined by its class name.
buttons.push(new primitives.orgdiagram.ButtonConfig("delete", "ui-icon-close", "Delete"));

See http://api.jqueryui.com/theming/icons/ for list of icons in jQuery UI

In order to change color theme you have to make custom build of jQuery UI
http://jqueryui.com/download/
select required color theme
Quote
 
 
#3 Nevermind 2014-02-04 08:24
Hi,
How can I change the color of button icons? How to use other images in ui-lightness folder?
Quote
 
 
#2 Support 2013-04-06 16:46
Quoting Serg:
Can I use different sets of buttons with different items?


ItemConfig does not have property "buttons", so there is no simple API to customize buttons for individual items.
It is easy fix to add buttons collection to every item, but it is unlikely that every item is going to have unique buttons collection.

Consider to group your items and create individual item & cursor templates for them. Look at "Cursor Template & Twitter Bootstrap" example.
Quote
 
 
#1 Serg 2013-04-05 08:45
Can I use different sets of buttons with different items?
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support