How to Make DILO Layout

Question

I have developed ERP application using synfussion blazor control.I would like to bring DILO information (Day In the Life) of each ERP user in Home Page of ERP application.I would like to know sample example of attached image using synfussion control

Attachment: image001_16275263.zip

KINS · Answer

sorry for confusing..this is not my actual requirment.I would like to show "DILO" Dashboard using dashboard layout or another panel.AS per attached Image,- Task should be displayed in Grid Dashboard Layout-Alert should be display in Gauge Dashboard Layout.-KPI should be displayed in Card Dashboard Layout.Hope its's

KINS · Answer

Awaiting for reply

Gowtham Gunashekar · Answer

Hi KINS,  
  
We have rendered Dashboard Layout with the required controls(Grid, Gantt, Card)as panel content.  
  
Refer to the sample:  
  
https://www.syncfusion.com/downloads/support/directtrac/general/ze/DB-1368701913  
Refer to the below links to know more about Dashboard Layout:  
   
Demo: https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=bootstrap4  
   
Documentation: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/  
   
API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html  
   
Please get back to us if you need any further assistance.  
  
Regards,  
Gowtham

KINS · Answer

Thanks for support.I will check and let you know the feedback on tomorrow

Gowtham Gunashekar · Answer

Hi KINS, Thanks for your update. We will wait to hear from you. Regards Gowtham

KINS · Answer

I have reviewed the above sample..I need below requirement in Dashboard.Please check the beow screencasthttps://www.screencast.com/t/O6Kfruyoo

KINS · Answer

Please help...This is my challenging task.Without support team,I can not do thus.Please........

Sharon Sanchez Selvaraj · Answer

Hi KINS, 
 
Thanks for the video attachment. 
 
We would like to mention that, the Dashboard Layout is a grid structured component which can be split into subsections of equal size known as cells. The total number of cells in each Row is defined using the Columns property of the component. The width of each cell will be auto calculated based on total number of cells placed in a row and the height of a cell will be same as that of its width. Panels will occupy any single or collection of cells(row * column) with in its parent dimension. In order to adapt the dashboard panel based on your requirement, you can either set sizeX and sizeY values to adapt its content within in the panel on initialization or dynamically. And, the SizeX and SizeY properties depends on the columns property. The panels SizeX and SizeY will be changing based on the columns property.   
 
Refer to the sample below. 
 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboard-891082665 
 
Refer to the below links to know more about Dashboard Layout: 
 
Demo: https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=bootstrap4 
 
Documentation: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/ 
 
API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Sharon Sanchez S.

KINS · Answer

Thanks for quick support Will check and give the feedback I really appreciate to support team for supporting any task...

KINS · Answer

I have reviewed above example, but I need grid dashboard item which I attached in screencast.please help..

Keerthana Rajendran · Answer

Hi KINS, Thanks for the update. We have validated your query and suspect that you want to render SfGrid in SfDashboardLayout. You can render SfGrid into the ContentTemplate of DashboardLayoutPanel. Find the below code snippets and screenshot for your reference. https://blazor.syncfusion.com/documentation/dashboard-layout/panels/setting-header-of-panels https://blazor.syncfusion.com/documentation/datagrid/getting-started

Panel 0

Panel Content

Panel 1

Panel 2

Panel Content

Panel 3

Panel Content

If you want to customize the Grid rows like in the shared screencast, then you can achieve your requirement by using RowTemplate. Find the below documentation for your reference. UG link: https://blazor.syncfusion.com/documentation/datagrid/row#row-template Please let us know if you need further assistance. Regards, Keerthana R.

KINS · Answer

Thanks for reply ...Is there any option to Maximize or Minimize the dashboardpanel layout??

Sharon Sanchez Selvaraj · Answer

Hi KINS, 
 
We have checked with your query regarding maximizing and minimizing the Dashboard Layout. We suspect that you would like to resize the panels. For this requirement, we have AllowResizing property, in which you can resize the panels.  
 
Refer to the sample: 
 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Resizing-1766770183 
 
Refer to the below documentation for further reference: 
 
https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/resizing-of-panels 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Sharon Sanchez S.

KINS · Answer

Thanks for support

I have reviewed above documents, but my requirement is different

I need to have maximize and minimize toggle button in each Dashboard panel (Like in bold BI DASHBOARD).When I click on Maximize button, the current panel will maximize entire full screen within Dashboard layout and when I click on minimize button the current panel will goes to original positions

Hope it's clear

Please help it's my top most urgent requirement

Sharon Sanchez Selvaraj · Answer

Hi KINS,

Good day to you.

We have checked with your requirement to maximize and minimize the Dashboard Layout on toggling the switch button. We have created a sample in which we have maximized the panel on enabling the Switch button and resizing it to it’s original size on toggling it off. This scenario is achieved by using the Change event of the Switch, in which an interop call has been made and the required CSS level changes are done.

Refer to a code snippet of the sample scenario:

CSS

.fullview {

top: 0px !important;

left: 0px !important;

width: 100% !important;

height: 100% !important;

z-index: 1001 !important;

position: fixed !important;

}

Index.razor

private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

{

// Your code here.

if (args.Checked)

{

//You can pass the required Dashboard panel id as the argument

await jsRuntime.InvokeAsync<string>("fullview","1");

}

else

{

await jsRuntime.InvokeAsync<string>("normalview","1");

}

Host.cshtml

function fullview(inst){

debugger;

var panel = document.querySelectorAll("#dash .e-panel");

for(var i=0;i<panel.length;i++){

if(panel[i].getAttribute('id') == inst.toString())

{

panel[i].classList.add('fullview');

}

function normalview(inst){

var panel = document.querySelectorAll("#dash .e-panel");

for(var i=0;i<panel.length;i++){

if(panel[i].getAttribute('id') == inst.toString())

{

panel[i].classList.remove('fullview');

}

</script>

Refer to the sample:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboard_Resizing484037899

Please get back to us if you need any further assistance.

Regards,

Sharon Sanchez S.

KINS · Answer

Thanks for reply.I have check above example, it works fine as per our requirement.I need to apply below 4 different css class in 4 panel but its not working.Please advise how to solve th Approval Approval Approval CSS:- #Panel1.e-dashboardlayout.e-control .e-panel { background: linear-gradient(to right, #493240, #f09) !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); box-sizing: border-box; position: absolute; border-radius: 15px; } #Panel2.e-dashboardlayout.e-control .e-panel { background: linear-gradient(to right, #493240, #f09) !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); box-sizing: border-box; position: absolute; border-radius: 15px; } #Panel3.e-dashboardlayout.e-control .e-panel { background: linear-gradient(to right, #493240, #f09) !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); box-sizing: border-box; position: absolute; border-radius: 15px; } #Panel4.e-dashboardlayout.e-control .e-panel { background: linear-gradient(to right, #493240, #f09) !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); box-sizing: border-box; position: absolute; border-radius: 15px; }

KINS · Answer

Sorry  ,the above information is not related to my question..

Shalini Maragathavel · Answer

Hi KINS, 

Good day to you.We checked your code and would like to let you know that you have not set the styles to the proper class(order of class and Id in the css is not proper), which is the cause of the issue. To overcome the reported issue, we suggest you to set the styles for proper class and Id as demonstrated in the below code snippet, 




<style> 
    .e-dashboardlayout.e-control #Panel1.e-panel { 
        background: linear-gradient(to right, #493240, #f09) !important; 
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); 
        box-sizing: border-box; 
        position: absolute; 
        border-radius: 15px; 
    } 
 
    .e-dashboardlayout.e-control #Panel2.e-panel { 
        background: linear-gradient(to right, #493240, #f09) !important; 
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); 
        box-sizing: border-box; 
        position: absolute; 
        border-radius: 15px; 
    } 
 
    .e-dashboardlayout.e-control #Panel3.e-panel { 
        background: linear-gradient(to right, #493240, #f09) !important; 
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); 
        box-sizing: border-box; 
        position: absolute; 
        border-radius: 15px; 
    } 
 
    .e-dashboardlayout.e-control #Panel4.e-panel { 
        background: linear-gradient(to right, #493240, #f09) !important; 
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15); 
        box-sizing: border-box; 
        position: absolute; 
        border-radius: 15px; 
    } 

We have modified the sample based on this for your reference. You can check it below, 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboard_Resizing4840378991796742815.zip 
Please get back to us if you need further assistance.Regards, 
Shalini M.

KINS · Answer

sorry for late reply.Please check my comments in below screencast.https://www.screencast.com/t/3MR0PIVjaCO

Sharon Sanchez Selvaraj · Answer

Hi KINS,Thanks for the video.We checked the reported issue in our previous sample with 100% window resolution. Please refer to the below screenshot on how the Dashboard Layout is rendered.

We suspect that the window resolution might be greater than 100% in your end. We would also like to mention that the Dashboard Layout renders based on the provided parent container's width.

However, please let us know whether you require to change the width of panels at any scenario or else the width must be adapted to the screen in all window resolutions?

KINS · Answer

I need to adapt the screen in all resolution. Please check my component for your referenceAttachment: DILO_6d618944.rar

Sharon Sanchez Selvaraj · Answer

Hi KINS, 
 
Thanks for the details. 
 
We would like to mention that the Dashboard Layout will render based on it’s parent container’s height and width, and not based on the screen resolution. It adapts to whatever height and width of the parent container is given. If the screen resolution is higher and the corresponding parent container’s height is greater, the scrollbar would be visible. In the example provided, we had set the height and width as 100%. If suppose you would like to change it, you can specify the values to be lesser than 100%. 
 
If the required panel content elements has to be adapted inside the panel, you can specify overflow auto. 
 
Refer to the code snippet: 
 




.e-panel-content { 
    overflow:auto !important; 
} 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Sharon Sanchez S.

Mihih Pausx · Answer

The digital transformation has made this traditional game accessible to players worldwide through user-friendly interfaces and mobile applications.

Bidad Certe · Answer

Betting in India is illegal will provide the correct information in this article. There is no reason to encourage betting—the information is delivered through this content for informational purposes only.