Custom Tool visibility depending on model

3 posts, 1 answers
  1. Zoltan
    Zoltan avatar
    6 posts
    Member since:
    Feb 2012

    Posted 04 Apr Link to this post

    Hello,

    I'm using visualTemplate to see from my model (dataItem) whether entity is of one type or the other to use, among other things, corresponding image for the entity.

    I'm also using (Editable) Tools under ShapeDefaults to have some custom tools for the entities in the model.

    Now, I would like that depending on the entity type from the model I can choose which custom tool will be shown to the user. How can I do this?

     

    For more clarity, mvc razor part:

    .ShapeDefaults(sd => sd
         .Visual("visualTemplate")
         .Editable(e => e
              .Tools(t =>
               {
                     t.Custom().Name("firstTypeCustomButton");
                     t.Custom().Name("secondTypeCustomButton")
               }
    ...

     

    Javascript template:

    function visualTemplate(options) {

    ...

        if ( options.dataItem.EntityType == "myFirstType") {
             group.append(new dataviz.diagram.Image({
                        source: "@Url.Content("~/Images/first-type-image.png")",
    ...
        else if ( options.dataItem.EntityType == "mySecondType") {
    ...
  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1969 posts

    Posted 06 Apr Link to this post

    Hello Zoltan,

    The shapes.editable.tools is an array that contains the array of tools which will be shown as soon as a shape is selected. Given this I would suggest to use the select event, get the shape object and assign a new array of tools associated with this shape. Please refer to the http://dojo.telerik.com/Ezako/2 example. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Zoltan
    Zoltan avatar
    6 posts
    Member since:
    Feb 2012

    Posted 07 Apr in reply to Boyan Dimitrov Link to this post

    Thank you, that works great.

    Just to mention... when using MVC razor helper for diagram then nothing shouldn't be inside ShapeDefaults/Editable/Tools for this to work:

    .ShapeDefaults(sd => sd
         .Editable(e => e
              .Tools(t =>
               {
                    // leave this empty if adding tools from javascript directly
               }
    ...

     

    I used onSelect event to add triggers. Another important thing was not to forget to redraw selected item:

    function onSelect(e) {
    ...
        var tools = e.selected[0].options.editable.tools;
        if (tools.length == 0) { // this means tools are adding for the first time. Add them only once.
            if (myConditionToIdentifyCorrectItem) {
                var toolObject1 = { name: "myCustomTool", type: "button", icon: "info" };
                ...
                e.selected[0].redraw({
                    editable: {
                        tools: [toolObject1, toolObject2]
                    }
                 });
            }
    ...
Back to Top