Блог

Я привязываю данные к ag-grid в приложении angular 7 и у меня проблема с созданием иерархии. В настоящее время мне нужно отобразить список, сгруппированный по стратегиям и фондам. Пожалуйста, дайте мне знать, правильно ли я все делаю. Я смотрю на достижение следующего формата. После каждой группировки должен быть пробел для наглядности данных. Я смотрю на достижение, как показано на скриншоте ниже. Как видно на скриншоте, стратегия менеджера и фонд могут повториться. Пробел между двумя стратегиями используется для отображения итогов.

Emv будет содержать поле sum of Emv, а Percent будет содержать поле total of GroupPercent

ViewModel

   public class FirmWideAllocationsViewModel
    {
        public List<string> Hierarchy
        { get; set; }
        private decimal _groupPercent;
        public int FirmID { get; set; }
        public string FirmName { get; set; }
        public int? ManagerStrategyID { get; set; }
        public int? ManagerFundID { get; set; }
        public int ManagerAccountClassID{ get; set; }
        public int? ManagerFundOrClassID { get; set; }
        public string ManagerFundName { get; set; }
        public string ManagerAccountingClassName { get; set; }
        public string ManagerStrategyName { get; set; }
        public int? ProductID { get; set; }
        public string ProductName { get; set; }
        public int? Quantity { get; set; }
        public decimal? Nav { get; set; }
        public DateTime EvalDate { get; set; }
        public int? DefaultStrategyID { get; set; }
        public string DEFAULT_STRATEGY_NAME { get; set; }
        public decimal Usd_Emv { get; set; }
        //needed for kendo aggregates
        public decimal UsdEmv => Usd_Emv;
        public decimal Emv { get; set; }
        public decimal Weight { get; set; }
        [NotMapped]
        public decimal Percent { get; set; } // manual calc
        [NotMapped]
        public decimal Sort
        {
            get
            {
                return ProductName == "Other"
                    ? decimal.MaxValue
                    : Usd_Emv;
            }
        }
        [NotMapped]
        public decimal GroupPercent
        {
            get { return _groupPercent; }
            set { _groupPercent = value; }
        }

    }
  

Контроллер

 public class AllocationsController : ApiControllerBase
{
    [HttpGet]
    [Route("api/Allocations/{id}")]
    public IHttpActionResult Details(int id, DateTime date)
    {

        var viewModel = GetAllocationsViewModel(id, date);
        if (viewModel == null) return NotFound(); 
        return Ok(viewModel);
    }


      private AllocationsViewModel GetAllocationsViewModel(int id, DateTime date)
    {

        var ms = GetStrategy(id);

        DateTime d = new DateTime(date.Year, date.Month, 1).AddMonths(1).AddDays(-1);
        if (ms.FIRM_ID != null)
        {

            var allocationsGrouped = Mapper.Map<List<FIRMWIDE_MANAGER_ALLOCATION>, List<FirmWideAllocationsViewModel>>(GetAllocationsGrouped(EntityType.Firm, firm.ID, d).ToList());
            foreach (var ag in allocationsGrouped)
            {
                ag.Hierarchy = new List<string>
                {ag.ManagerStrategyName, ag.ManagerFundName};
            }


            var vm = new AllocationsViewModel
            {
                ManagerAllocations = allocationsGrouped
            };

            return vm;
        }

        }
  

Ag-определение столбца сетки

 setGridOptions() {
        this.GridOptions = {
            columnDefs: this.getColumns(),
            rowData: this.AllocationDetails,
            enableFilter: true,
            treeData: true,
            enableColResize: true,
            animateRows: true,
            groupDefaultExpanded: 1,
            enableSorting: true,
            suppressCellSelection: true,
            getDataPath: function (data) {
                return data.Hierarchy;
            },
            onGridReady: e => {
                if (!e || !e.api) {
                    return;
                }
                e.api.sizeColumnsToFit();
                this.setDefaultSortOrder();
            },
            getRowStyle: (params) => {
                if (params.node.level === 0) {
                    return { 'background-color': '#FCE7D7' };
                }
            },

            autoGroupColumnDef: {

                headerName: 'Manager Strategy', width: 300
            },
        };
    }


    private getColumns(): Array<any> {
        const self = this;
        const definition = [
            { headerName: 'Date', field: 'EvalDate', hide: true },
            { headerName: 'Firm ID', field: 'FirmID', hide: true },
            { headerName: 'Manager Strategy ID', field: 'FirmName', hide: true },
            { headerName: 'Firm', field: 'ManagerStrategyID', hide: true },
            { headerName: 'Manager Strategy', field: 'ManagerStrategyName' },
            { headerName: 'Fund ID', field: 'ManagerFundID', hide: true },
            { headerName: 'Fund', field: 'ManagerFundName' },
            { headerName: 'Portfolio', field: 'ProductName' },
            { headerName: 'As Of', field: 'EvalDate',   cellRenderer: (data) => {
                return data.value ? (new Date(data.value)).toLocaleDateString() : '';
             } },
            { headerName: 'EMV (USD)', field: 'UsdEmv',  valueFormatter: currencyFormatter },
            { headerName: 'Percent', field: 'GroupPercent' },

        ];
  

Пользовательский интерфейс

   <div class="panel panel-default">

        <div *ngIf="AllocationDetails amp;amp; AllocationDetails.ManagerAllocations" class="panel-body" style="width:100%">
                <div [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
                        <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
                            [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations"  rowHeight="30" headerHeight="30" rowSelection="single">
                        </ag-grid-angular>
                    </div>

        </div>
    </div>
  

JSON

 [[{"ProductId":2844,"ProductName":"*DO NOT USE* City Plan LLC","ProductType":"Strategic Partnerships"},{"ProductId":2840,"ProductName":"*DO NOT USE* Baha'i Separate Managed Account","ProductType":"Strategic Partnerships"},{"ProductId":2851,"ProductName":"Test Special Opportunities Evergreen Fund Ltd.","ProductType":"Strategic Partnerships"},{"ProductId":2852,"ProductName":"Test Spafid Multi-Strategy Fund","ProductType":"Strategic Partnerships"}],[{"ProductId":2745,"ProductName":"Test Special Opportunities Fund III Master LP","ProductType":"Commingled Fund"},{"ProductId":2854,"ProductName":"Test Select Opportunities II Ltd.","ProductType":"Commingled Fund"},{"ProductId":2746,"ProductName":"Test Structured Income Fund I Ltd.","ProductType":"Commingled Fund"},{"ProductId":2749,"ProductName":"Test Structured Income Fund II Ltd.","ProductType":"Commingled Fund"},{"ProductId":2778,"ProductName":"Test Structured Income Fund II-A Ltd.","ProductType":"Commingled Fund"},{"ProductId":2794,"ProductName":"Test Hedge Fund Opportunities II Ltd. Continuing","ProductType":"Commingled Fund"}],[{"ProductId":2828,"ProductName":"ICBC Quantitative HengSheng Choice Pooled Fund.","ProductType":"Sub-Advisory "},{"ProductId":2853,"ProductName":"HEC SPV II Cayman LP","ProductType":"Sub-Advisory "},{"ProductId":2800,"ProductName":"TP ETP Offshore LP","ProductType":"Sub-Advisory "},{"ProductId":2829,"ProductName":"ICBC Quantitative Xincheng Choice Pooled Fund Trust.","ProductType":"Sub-Advisory "},{"ProductId":1841,"ProductName":"Brightgate Absolute Return FIL","ProductType":"Sub-Advisory "}],[{"ProductId":2827,"ProductName":"Test Alternative Income Strategy.","ProductType":"Liquid Alternatives"},{"ProductId":1603,"ProductName":"Test Alternative Core Fund","ProductType":"Liquid Alternatives"}]]