1. Home
  2. Forum
  3. Blazor
  4. Dashboard

Dashboard

Can you access the ondragstart handler or sortable? I am trying to drag and drop from the sidebar to the main content for dashboard.

19 Replies
SP Sowmiya Padmanaban Syncfusion Team March 3, 2020 01:14 PM UTC

Hi Alicia,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query. We suspect that your requirement is to drag an element (which is rendered inside the Sidebar component) and to place that element in DashboardLayout panel, to add it as a panel content in  the DashboardLayout. 
 
For example: If you render the TreeView inside the Sidebar component, when you drag any TreeView Node and drop into the DashboardPanel. The NodeDetails is added to the Droppable panel as a content element. 
 
Please let us know, this is your exact requirement. Once you confirmed, we will prepared a sample and update the sample to you. 
 
Regards,  
Sowmiya.P 


AL Alicia March 3, 2020 06:07 PM UTC

Yes, that is what I am referring to.


AL Alicia March 3, 2020 06:08 PM UTC

Will the item from the treeview node be a panel as well?

SP Sowmiya Padmanaban Syncfusion Team March 4, 2020 09:13 AM UTC

Hi Alicia,  
 
Greetings from Syncfusion support. 
 
Query1 – Drag and Drop in DashboardLayout. 
 
We have prepared a sample based on your requirement. In the sample, we have added the content to the DashboardLayout Panel using OnNodeDragged() event of TreeView. 
 
When you add .e-droppable  class in a particular div or element , it detects the onNodeDragged() event for TreeView component.  
 
In that sample we have added the “.e-droppable” class in sidebar main content element.  
<EjsSidebar Width="250px" @ref="sidebarObj" Changed="open"> 
</EjsSidebar> 
<div style="text-align: center;" class="e-droppable"> 
<EjsDashboardLayout @ref="dashboard" ID="dashboard" CellSpacing="@(new double[]{20 ,20 })" Columns="4" CellAspectRatio="2" AllowDragging="true"> 
    </EjsDashboardLayout> 
</div> 
 
Refer the below code snippet to add the content in onNodeDragged() event. 
 
    public async Task dragStop(DragAndDropEventArgs args) 
    { 
        // Fetch the Dropped node Details 
        var nodeDetails = args.DraggedNodeData.Text; 
        var value = JsonConvert.SerializeObject(args.Event); 
        Dictionary<string, dynamic> eventParameters = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(value); 
        // Pass the value to the client side to identify the dropped panel. 
        var value1 = await JSRuntime.InvokeAsync<int>("AddPanel", eventParameters); 
        // If the dashboard panel index is 0. update the panel content. 
        if (value1 == 0) 
        { 
            ContentValue =@<div style="height:90%; width:100%;"> 
                            @nodeDetails 
                            <Error></Error> 
                          </div>; 
        } 
        // If the dashboard panel index is 1. update the panel content. 
        else if (value1 == 1) 
        { 
            panelcontent2 =@<div>@nodeDetails<EjsButton Content="Panel2"></EjsButton></div>; 
        } 
        // Remove the cloned node. 
        args.Cancel = true; 
    } 
 
    function AddPanel(args) { 
            var dashboard = document.getElementById("dashboard").ej2_instances[0];  
            // Find out the Dashboard Layout  
            var element = document.elementFromPoint(args.clientX, args.clientY);  
            // Check the dropped panel is DashboardLayout panel. 
            if (element.closest(".e-panel")) { 
                for (i = 0; i < dashboard.panelCollection.length; i++) { 
                    if (element.closest(".e-panel").id == dashboard.panelCollection[i].id) { 
                    // Get the index of the Dropped panel 
                    var index = i; 
                   } 
                } 
            } 
            // Return the index of the dashboardLyaout panel 
            return index; 
        } 
 
Query2 – AddPanel in DashboardLayout. 
 
We suspect that your requirement is to dynamically add panel to the DashboardLayout. In DashboardLayout, we have provided a AddPanel() method. Using this method, you can achieve your requirement. 
 
Refer the below code snippet. 
    public void AddPanel(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 
    { 
        this.chartId = "linearChart" + this.dashboard.Panels.Count().ToString(); 
        this.addPanel = new PanelModel() 
        { 
            SizeX = 2, 
            MaxSizeX = 1, 
            SizeY = 1, 
            Row = 0, 
            Col = 1, 
            Content =@<div style="height:100%; width:100%;"> 
                <Error></Error> 
           </div>, 
            Header = @<div>Header Content</div>, 
        }; 
    this.dashboard.AddPanel(this.addPanel); 
    } 
 
Refer the below sample link for your reference. 
 
To know more about the DashboardLayout component. Refer the below links. 
 
 
 
Please let us know, if you need any further assistance. 
 
 
Regards,  
Sowmiya.P 



AL Alicia March 4, 2020 02:51 PM UTC

I am getting this error message when I download and run the project.

An unhandled exception occurred while processing the request.
FileNotFoundException: Could not load file or assembly 'System.Text.Json, Version=4.0.1.1, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51'. The system cannot find the file specified.
Syncfusion.EJ2.Blazor.Locale.SetLocale(string localeContent)

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team March 5, 2020 06:21 AM UTC

Hi Alicia, 
 
We are happy to hear that your issue has been resolved. Please contact us if you need any help from us. We will be happy to help you. 
 
Regards, 
Shameer Ali Baig S. 


AL Alicia March 5, 2020 06:21 AM UTC

Nevermind.. I add the nugget package and the error disappear. My next question is how do you stop the sidebar from disappearing when you drag the panels around? Also, can you make the treeview items look like a card or panel?
 Also, do you have to keep adding panels in order to drag to them?

AL Alicia March 5, 2020 06:22 AM UTC

 Also, do you have to keep adding panels in order to drag to them?

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team March 6, 2020 09:03 AM UTC

Hi Alicia, 
 
We have validated your queries on our provided solution. Please, find the response for them below. 
 
Query 1: how do you stop the sidebar from disappearing when you drag the panels around? 
 
Sidebar will hide when you drag the panels towards the Sidebar, if it is expanded state to provide space for placing the dragged panel elements as needed. This functionality will be useful when using both Sidebar and Dashboard Layout in lower screen dimensions. 
  
Though, if need we can stop Sidebar from collapsing when dragging the panels, by using its EnableGestures property. 
 
Query 2: can you make the treeview items look like a card or panel? 
 
Yes, we can achieve this TreeView by overriding the default component styles. In our attached sample, we have overridden the TreeView styles to make it appear as card elements. 
 
 
Query 3: do you have to keep adding panels in order to drag to them? 
 
In our last provided custom sample, we have depicted how to drag and drop TreeView elements into the existing dashboard panels to meet your initial query. 
 
Though, we can dynamically create a panel and add the dragged TreeView selected node content into it. To achieve this, we can use AddPanel() method of Dashboard Layout, we have used AddPanel method in last provided sample for your reference. Using which you can add the dropped content in the dynamically creating dashboard panels.  
  
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


AL Alicia March 6, 2020 02:35 PM UTC

If the panels did not exist on the right side, can you dynamically create them when dropping the item from the tree node? I guess I am not following you. 

SP Sowmiya Padmanaban Syncfusion Team March 9, 2020 10:26 AM UTC

Hi Alicia,  
 
Query1 - If the panels did not exist on the right side, can you dynamically create them when dropping the item from the tree node?  
 
Yes, it is possible to add a panel dynamically for empty DashboardLayout while dropping the item from tree node using addPanel() method in DashboardLayout. We have prepared a sample for your reference. In that sample, you can able to get the nodeDetails in nodeDragged() event. Using that details we can add the panels using addPanel() method. 
 
Refer the below code snippet. 
<EjsTreeView TValue="TreeItem" AllowDragAndDrop="true"> 
                <TreeViewEvents TValue="TreeItem" OnNodeDragged="dragStop"></TreeViewEvents> 
</EjsTreeView> 
  public void dragStop(DragAndDropEventArgs args) 
    { 
         // Fetch the Dropped node Details 
        var nodeDetails = args.DraggedNodeData.Text; 
         // Add the panel based on node text. 
        if (nodeDetails == "Local Disk (C:)") 
        { 
            this.addPanel = new PanelModel() 
            { 
                SizeX = 2, 
                MaxSizeX = 1, 
                SizeY = 1, 
                Row = 0, 
                Col = 1, 
                Content =@<div style="height:100%; width:100%;"> 
                <Error></Error> 
                </div>, 
                    Header = @<div>Header Content</div>, 
                }; 
            this.dashboard.AddPanel(this.addPanel); 
        } 
} 
 
Refer the below sample link. 
 
If we misunderstand your query, can you please share an exact scenario of your requirement. It will helpful for us to prepare a sample based on your requirement. 
 
Please let us know, if you need any further assistance. 
 
 
Regards,  
Sowmiya.P 


AL Alicia June 13, 2020 04:46 PM UTC

Can you drag them back to the sidebar?

SP Sowmiya Padmanaban Syncfusion Team June 15, 2020 08:47 AM UTC

Hi Alicia,  
 
We have checked your requirement with DashboardLayout component. 
 
We would like to let you know that DashboardLayout is grid structured Layout component in all the panel creation, positioning, resize, drag and drop, and other such functionalities are based on parent container element and its dimension. 
 
So, we cannot drag the panels outside its parent container element. By default, we can drag and drop of panels at the desired location within the dashboard layout. So, we cannot achieve your requirement of dragging the panels of DashboardLayout into the TreeView present within Sidebar. 
 
Regards,  
Sowmiya. P 


AL Alicia June 15, 2020 09:43 PM UTC

Can you drag drop from multiple dashboards? If not, can you use Swimlanie in Blazor Kanban then to do it? Can you put a chart in Swimlane in Blazor Kanban component ?

SP Sowmiya Padmanaban Syncfusion Team June 16, 2020 04:36 PM UTC

Hi Alicia,  
 
Query 1- Drag and Drop between Multiple dashboard. 
 
Currently, we have not provided functionality support in DashboardLayout. We have already logged this as a feature request in DashboardLayout. Support for this feature will be included in any one of our upcoming release. Generally, we will plan feature based on customer count, feature list and whilist plan. 
 
Track the below link to know the feature status. 
 
 
We appreciate your patience. 
 
Query 2- Kanban component. 
 
We have validated your reported query. Yes, you can render the chart using the Swimlane in SfKanban. You can use the Template tags inside the KanbanSwimlaneSettings, to achieve your requirement.   
We have also prepared a sample that tries to meet your requirements.  
  
Also, the cards can be dragged and dropped within the specified columns.

 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya. P 


AL Alicia July 21, 2020 01:45 PM UTC

Can you lock and unlock only certain dashboard panels? I know you can do all or none but can you do specific ones.

SP Sowmiya Padmanaban Syncfusion Team July 22, 2020 11:11 AM UTC

Hi Alicia,  
 
We have validated your requirement with DashboardLayout component.  Setting the CSS class “e-drag-restrict” for any particular panel will prevent the corresponding panel from dragging. But when you move the another panel, it changes the position of the all the panels (include the drag restrict panel position). This is the default behavior. 
 
Refer the below code snippet. 
 
@using Syncfusion.Blazor.Layouts 
 
<SfDashboardLayout CellSpacing="@(new double[]{10 ,10 })" Columns="5" AllowDragging="true"> 
    <DashboardLayoutPanels> 
        <DashboardLayoutPanel CssClass="e-drag-restrict"> 
            <ContentTemplate><div>Restrict dragging</div></ContentTemplate> 
        </DashboardLayoutPanel> 
        <DashboardLayoutPanel SizeX=2 SizeY=2 Col=1 CssClass="e-drag-restrict"> 
            <ContentTemplate><div>Restrict dragging</div></ContentTemplate> 
        </DashboardLayoutPanel> 
        <DashboardLayoutPanel SizeY=2 Col=3> 
            <ContentTemplate><div>2</div></ContentTemplate> 
        </DashboardLayoutPanel> 
        <DashboardLayoutPanel Row=1> 
            <ContentTemplate><div>3</div></ContentTemplate> 
        </DashboardLayoutPanel> 
    </DashboardLayoutPanels> 
</SfDashboardLayout> 
 
Refer the sample link below. 
 
To know more about the DashboardLayout component, refer the below links. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Sowmiya.P 
 



NC Neville Collett September 23, 2021 01:07 PM UTC

Good day

I am trying to drag items from the Tree to the Dashboard but the code does not run pass the InvokeAsync.
I used this project 

DashBoardLayout1796148004.zip

and updated it from EJ* to Sf*


Is there something I am missing?


SM Shalini Maragathavel Syncfusion Team September 24, 2021 01:35 PM UTC

Hi Nevellie, 

Greetings from Syncfusion support. 

We checked your query and you can achieve your requirement by adding the content to the Dashboard Layout panel using OnNodeDragged event of TreeView as demonstrated in the below code snippet. 
Index.razor 
<SfSidebar Width="250px" @ref="sidebarObj" Changed="open"> 
    <ChildContent> 
        <div> 
             
         <TreeViewEvents TValue="TreeItem" OnNodeDragged="dragStop"></TreeViewEvents> 
      .  . . 
        </div> 
    </ChildContent> 
</SfSidebar> 
 
<div style="text-align: center;" class="e-droppable"> 
<SfDashboardLayout @ref="dashboard" AllowDragging="true"> 
    . . . 
</SfDashboardLayout> 
    </div> 
@code { 
    public async Task dragStop(DragAndDropEventArgs args) 
    { 
         
        List<string> id = new List<string>(); 
 
        for (var i = 0; i < this.dashboard.Panels.Count; i++) 
        { 
            id.Add(this.dashboard.Panels[i].Id); //to get the panels id. 
        } 
 
        
        
        var value1 = await JSRuntime.InvokeAsync<int>("AddPanel",args,id); 
} 
} 

_Host.cshtml 
<script> 
        window.AddPanel = (args,inst)=>{ 
            
            var element = document.elementFromPoint(args.left, args.top); 
            // Check the dropped panel is DashboardLayout panel. 
           
           if (element.closest(".e-panel")) { 
                for (i = 0; i < inst.length; i++) { 
                    if (element.closest(".e-panel").id == inst[i]) { 
                        // Get the index of the Dropped panel 
                        var index = i; 
                    } 
                } 
            } 
            // Return the index of the dashboardLyaout panel 
            return index; 
        } 
    </script> 

Please find the below sample for your reference. 
Please get back to us if you need further assistance.

Regards, 
Shalini M. 



Loader.
Up arrow icon