Dashboard: disable drag

Webix JS
#1

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

Regards

#2

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

#3

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

#4

Thanks.

#5

@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).

#6

Very nice solution.

Thanks

#7

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

#8

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

#9

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);
#10

can you explain this line

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

#11

@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)

#12

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

#13

@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: Code Snippet

#14

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

#15

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",
    ...
}
#16

@Nastja Thanks for all your help

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

above solution worked flawlessly for me.

#17

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

#18

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

#19

I found a use a different solution:

https://snippet.webix.com/4ui6nqsf

you may drag or resize, but it will flip back again in that moment you stop dragging.

#20

As of Webix 6.3 it is now possible to listen for DnD events from within the dashboard component (a list of all the possible dashboard events can be found here, you can also check out all of the relevant drag events), which makes disabling drag a trivial task and is achieved by simply returning false in the onBeforeDrag event handler - https://snippet.webix.com/tesdj3hh.