Customizing Diagram toolbar

7 posts, 0 answers
  1. john
    john avatar
    4 posts
    Member since:
    Jun 2016

    Posted 13 Jul Link to this post

    Hello,

    We are currently developing with the Diagram control.

    I have a question, how do we customize the ribbon's toolbar above it? (see screenshot)

    I am reading conflicting tutorials about this, some say it is a WIDGET, but then i read toolbar in some places.

    Is there an example somewhere how to, for example add a button with an customized onclick?

    Gr from John

  2. john
    john avatar
    4 posts
    Member since:
    Jun 2016

    Posted 14 Jul in reply to john Link to this post

    Nvm,

    I have found the necessary docs to do this.

    The only thing i am trying to do is make a custom button that adds an custom shape.

    gr john

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Niko
    Admin
    Niko avatar
    387 posts

    Posted 15 Jul Link to this post

    Hello John,

    You could use the Custom option in the Tools definition. Here is an example:

    .Editable(e => e.Tools(t => t.Custom().Type("button").Text("Custom").Click("customShape")))

    Check out this example for a custom tool in the Kendo UI diagram - http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-editable.tools.

    Hope this helps. Please, let me know if you will need anything else.

    Regards,
    Niko
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. john
    john avatar
    4 posts
    Member since:
    Jun 2016

    Posted 15 Jul in reply to Niko Link to this post

    Hello Niko,

    i indeed need some help.

    I have a diagram that's databound.

    I am for now, using the mvc example that uses the visualTemplate(options) function to

    format the shapes, in my case start, stop is circle, decision is diamond, rest is rectangle. Works fine.

    But now, I need a Button(s) in my toolbar to add the different kind of shapes (and of course trigger the createshape function in homecontroller)

    I have searched, but i cannot find how to invoke the internal default "createshape" function that comes with the standard button in example.

    Can you advise what the best approach is for this please? Basically i need to 1 add a shape, 2 format it to one of three shape types, trigger databound function to add to database.

    Btw i am using the EDITING example of diagram MVC version.

    gr John

  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 18 Jul Link to this post

    Hello john,

    Please, check out the createShape function. It seems like the method that will work best in your case. It will invoke the UI for adding a shape just as if the default tool was used.

    Hope this helps.

    Regards,
    Niko
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. john
    john avatar
    4 posts
    Member since:
    Jun 2016

    Posted 20 Jul in reply to Niko Link to this post

    It;s going great so far.

    But.

    I need the user to make shapes with different models.

    We are making a workflow system tied into our crm system.

    Each shape (workflow action) needs to take in different paramters filled in by the user, to complete step in crm system later.

    Question is, how do i make a custom shape tied to a different model to accept these properties,

    while maintaining a databound diagram?

    gr John

  8. Niko
    Admin
    Niko avatar
    387 posts

    Posted 21 Jul Link to this post

    Hello john,

    In order to customize the appearance of the popup, then you could go with 2 different approaches.

    First is to use the shapeTemplate of the editable option to define the content of the dialog. There you could implement a specific form and collect enough data to create the respective shape. Then with the addShape method you could add the shape in the diagram.

    Similar option with more control on your side, but a bit more complex is to implement a custom tool - http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-connectionDefaults.editable.tools. In that case you need to additionally figure out the popup implementation. The rest should be same as the first approach.

    Hope this give you enough directions. Please, let me know if you need more information on a specific entity from the diagram API.

    Regards,
    Niko
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready