Search results

Getting started with ASP.NET MVC Dashboard Layout control

This section briefly explains about how to render DashboardLayout component in your ASP.NET MVC application. You can refer ASP.NET MVC Getting Started documentation page for introduction part part of the system requirements and configure the common specifications.

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include the license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET MVC application to use our controls.

Add DashboardLayout to the application

You can render the DashboardLayout component in the following two ways.

  • Defined the panels property as the attribute in the content template.
  • Using the panels property through helper.

Setting the panels property using content template

You can render the DashboardLayout component by adding the panels property as the attribute to the content template. Add the content template with panel definition for DashboardLayout into your index.cshtml page which is present under Views/Home folder.

In the following sample, the dashboardlayout is rendered with panels property using content template.

razor
HomeController.cs
@model WebApplication.Controllers.HomeController.spacingModel

<div class="control-section">
    <div>
        <!--  DashboardLayout element declaration -->
        @Html.EJS().DashboardLayout("defaultLayout").Columns(6).CellSpacing(Model.cellSpacing).ContentTemplate(@<div>
            <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">0</div>
                </div>
            </div>
            <div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
                <div class="e-panel-container">
                    <div class="text-align">1</div>
                </div>
            </div>
            <div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
                <div class="e-panel-container">
                    <div class="text-align">2</div>
                </div>
            </div>
            <div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">3</div>
                </div>
            </div>
            <div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">4</div>
                </div>
            </div>
            <div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">5</div>
                </div>
            </div>
            <div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">6</div>
                </div>
            </div>
            <div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
                <div class="e-panel-container">
                    <div class="text-align">7</div>
                </div>
            </div>
        </div>).Render()
        <!-- end of dashboardlayout element -->
    </div>
</div>

<style>
    /* DashboardLayout element styles  */
    #defaultLayout {
        padding: 10px;
    }

    #defaultLayout .e-panel .e-panel-container {
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }

    .text-align {
        line-height: 160px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        public class spacingModel
        {
            public double[] cellSpacing { get; set; }
        }
        public ActionResult Index()
        {
            spacingModel modelValue = new spacingModel();
            modelValue.cellSpacing = new double[] { 10, 10 };
            return View(modelValue);
        }
    }
}

Output be like the below.

Dashboard content template

Setting the panels property using helper

You can render the DashboardLayout component by using the panels property through helper.

In the following sample, the dashboardlayout is rendered with panels property using tag helper.

razor
HomeController.cs
@model WebApplication.Controllers.HomeController.spacingModel

<div class="control-section">
    <div>
        <!--  DashboardLayout element declaration -->
        @Html.EJS().DashboardLayout("defaultLayout").Columns(6).CellSpacing(Model.cellSpacing).Panels(Panel =>
    {
        Panel.SizeX(1).SizeY(1).Row(0).Col(0).Content("<div>0</div>").Add();
        Panel.SizeX(3).SizeY(2).Row(0).Col(1).Content("<div>1</div>").Add();
        Panel.SizeX(1).SizeY(3).Row(0).Col(4).Content("<div>2</div>").Add();
        Panel.SizeX(1).SizeY(1).Row(1).Col(0).Content("<div>3</div>").Add();
        Panel.SizeX(2).SizeY(1).Row(2).Col(0).Content("<div>4</div>").Add();
        Panel.SizeX(1).SizeY(1).Row(2).Col(2).Content("<div>5</div>").Add();
        Panel.SizeX(1).SizeY(1).Row(2).Col(3).Content("<div>6</div>").Add();
    }).Render()
     <!-- end of dashboardlayout element -->
    </div>
</div>

<style>
   /* DashboardLayout element styles  */
    #defaultLayout {
        padding: 10px;
    }

    #defaultLayout .e-panel .e-panel-container {
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
        line-height: 160px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        public class spacingModel
        {
            public double[] cellSpacing { get; set; }
        }
        public ActionResult Index()
        {
            spacingModel modelValue = new spacingModel();
            modelValue.cellSpacing = new double[] { 10, 10 };
            return View(modelValue);
        }
    }
}

Output be like the below.

Dashboard tag helper