Dashboard: disable drag

Hello,
I use Dashboard and Panel and in my application only some persons can modify the dashboard.
Any way to disable drag operation ?

Regards

Tagged:

Comments

  • possible to use view: "gridlayout" when the dashboard is read only (to replace view: "dashboard") ?

  • Hello,
    Yep, if you want to use the view without drag, it will be a good solution to use Grid Layout

  • Thanks.

  • edited July 2018

    @EricR However, there's a solution with Dashboard view.

    You can customize its $dragCreate method that is automatically called when drag is about to start:

    webix.protoUI({
       name:"mydashboard",
       $dragCreate:function(){ 
         if(notAllowed)
          return false;
         else
          return webix.ui.dashboard.prototype.$dragCreate.apply(this, arguments);
       }
    }, webix.ui.dashboard);
    

    https://snippet.webix.com/otle2kvd

    It doesn't affect resizing, but this can be similarly blocked on UI Panel level (change its resize property or modify its $resizeMove method).

  • Very nice solution.

    Thanks

  • So if I have to stop drag on read only dashboard I'll just have to set notAllowed = 1 .Is it correct?

  • If I update only notAllowed value to 0 inside some other function?

  • edited November 2018

    Hello @sumit,

    if I have to stop drag on read only dashboard I'll just have to set notAllowed = 1

    Nope, you also need to override $dragCreate method (via protoUI) by your own logic

    webix.protoUI({
       name:"mydashboard",
       $dragCreate:function(){ 
           if(notAllowed) return false;
           else return webix.ui.dashboard.prototype.$dragCreate.apply(this, arguments);
        }
    }, webix.ui.dashboard);
    
  • can you explain this line

    return webix.ui.dashboard.prototype.$dragCreate.apply(this, arguments);

  • @sumit ,

    $dragCreate:function(){ 
           if(notAllowed) return false;
           else return webix.ui.dashboard.prototype.$dragCreate.apply(this, arguments);
    

    There is if notAllowed is equal to 1, so the drag is stopped, otherwise it works by default (move is enable)

  • $dragCreate:function(){
    if(notAllowed) return false;
    }
    If I use only this without protoUI will it work?

  • edited November 2018

    @sumit,

    Yes, it will work. Only in case if you want to remove dnd in the dashboard at all.

    You can add like this(instead of protoUI):

    $$('grid').$dragCreate = function(){ 
         if(notAllowed)
            return false;
    };
    

    Sample: https://snippet.webix.com/5ir00fer

  • How should I use protoUI inside a class Dashboard which extends JetView?

  • Hi @sumit ,

    protoUI is not related to Webix Jet.
    to use custom component in Webix Jet, you need to import component's code (file) once before using that component.

    mycomponent.js
    ---
    webix.protoUI({
        name: "mycomponent",
        ...
    }, webix.ui.text)
    
    view.ts
    ---
    import "path_to_components/mycomponent"
    export default {
        view: "mycomponent",
        ...
    }
    
  • @Nastja Thanks for all your help

    $$('grid').$dragCreate = function(){
    if(notAllowed)
    return false;
    };

    above solution worked flawlessly for me.

  • Is there a way to temporarily disable drag. The drag feature becomes problematic when using Range chart and trying to drag the range.

  • edited January 31

    Hi @twigz ,

    You can customize $dragCreate method that is automatically called when drag is about to start:

    $$('grid').$dragCreate = function(node, e){
      var target = $$(e);
      if(target && target.config.view == "rangechart"){
        return false;
      };
      return webix.ui.dashboard.prototype.$dragCreate.call(this, node, e)
    };
    

    Please check the sample: https://snippet.webix.com/7ahmsxy9

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!