Skip to main content

Dashboard Panel drag and drop feature

Comments

4 comments

  • VISUI

    Using HTML5 elements...  

    Add the two panels.  Drag the red square from Panel 2 to Panel 1's drop zone.

    <Report ID="LogiForum.newReport7">
      <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" />
      <Body>
        <Dashboard2 AllowFreeformLayout="False" DashboardAdjustable="True" DashboardColumns="3" ID="dash01" SaveFile="@Function.AppDownloadPath~\test01.xml">
          <Panel Caption="Panel1" ID="pnl1" MultipleInstances="True">
            <PanelContent Height="100">
              <HtmlTag HtmlTagName="div">
                <HtmlAttributeParams ondragover="allowDrop(event)" ondrop="drop(event)" style="width: 50px; height: 50px; background-color: silver; border: 1px dashed black;" />
              </HtmlTag>
            </PanelContent>
          </Panel>
          <Panel Caption="Panel2" ID="pnl2" MultipleInstances="True">
            <PanelContent Height="100">
              <HtmlTag HtmlTagName="div">
                <HtmlAttributeParams draggable="true" ondragstart="drag(event)" style="width: 50px; height: 50px; background-color: red;" />
              </HtmlTag>
            </PanelContent>
          </Panel>
        </Dashboard2>
        <IncludeScript IncludedScript="function allowDrop(ev) {&#xD;&#xA;  ev.preventDefault();&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;function drag(ev) {&#xD;&#xA;  ev.dataTransfer.setData(&quot;text&quot;, ev.target.id);&#xD;&#xA;}&#xD;&#xA;&#xD;&#xA;function drop(ev) {&#xD;&#xA;  ev.preventDefault();&#xD;&#xA;  var data = ev.dataTransfer.getData(&quot;text&quot;);&#xD;&#xA;  ev.target.appendChild(document.getElementById(data));&#xD;&#xA;}" />
      </Body>
      <ideTestParams />
    </Report>
    0
  • VISUI

    Dashboard Adjustable only allows the panels to be dragged between columns and drop zones.  There is nothing available native to Logi that allows drag and drop between two panels.  See my other comment with code once it is approved.

    0
  • Dev

    it is for element inside the panel content. we are trying to move panel itself between each other position. As i didn't found and element attributes for this. And Dashboard Adjustable is not working to drag and drop panel 1 and panel 2 .
    Thanx!

    0
  • VISUI

    You may need to contact support to troubleshoot this because setting DashboardAdjustable=True should be the only configuration necessary to move panels between locations.

    The configuration I sent over actually allows for this.

    Give support your Logi Engine Version Number, the report definition you are using, etc.

    Try disabling any custom css or javascript. 

    Try running the dashboard with the browser developer console open and see if there are any javascript errors mentioned.

    0

Please sign in to leave a comment.