ComponentOne
Web API Explorer ASP.NET Web API Explorer

MVCFlexGrid

Tree View

Features

Settings


Export
Export Name :

Description

This sample demonstrates how to export a mvc flexgrid bound with hierarchical data to excel file.
using Microsoft.AspNetCore.Mvc;
using WebApiExplorer.Models;

namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexGridController : Controller
    {
        private readonly GridExportImportOptions _flexGridTreeViewModel = new GridExportImportOptions
        {
            NeedExport = true,
            NeedImport = false,
            IncludeColumnHeaders = true
        };

        public IActionResult TreeView()
        {
            ViewBag.Options = _flexGridTreeViewModel;
            return View();
        }
    }
}
@{
    GridExportImportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
    var list = Folder.Create(Startup.Environment.ContentRootPath).Children;
}

@section Styles{
    <style>
        .custom-flex-grid {
            height: 400px;
            background-color: white;
            box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
            margin-bottom: 12px;
        }

        .custom-flex-grid .wj-cell {
            background-color: #fff;
            border: none;
            font-size: 10pt;
        }

        .custom-flex-grid .wj-state-selected {
            background: #000;
            color: #fff;
        }

        .custom-flex-grid .wj-state-multi-selected {
            background: #222;
            color: #fff;
        }
    </style>
}

<label>@Html.Raw(MVCFlexGrid.TreeView_Text1)</label>

<c1-flex-grid id="@optionsModel.ControlId" class="custom-flex-grid" width="500px"
              child-items-path="Children" is-read-only="true" auto-generate-columns="false"
              allow-resizing="None" headers-visibility="None" selection-mode="ListBox">
    <c1-items-source source-collection="list"></c1-items-source>
    <c1-flex-grid-column binding="Header" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Size" width="80" align="center"></c1-flex-grid-column>
</c1-flex-grid>


@section Settings{
    @Html.Partial("_FlexGridOptions", optionsModel)
}

<script>
    c1.documentReady(function () {
        wijmo.Control.getControl("#@optionsModel.ControlId").rows.defaultSize = 25;
    });
</script>

@section Description {
    @Html.Raw(MVCFlexGrid.TreeView_Text0)
}