Pivot Grid not displaying?

1 Answer 220 Views

PivotGrid

Deasun asked on 27 Jun 2023, 04:09 PM

Have a Pivotgrid on the page but it does not display!

It has data, 188 rows.

I set the blnHideGrid_OrderListDetailsPGV to false so it show show on row 7.

The other girds blnHides are all set to true to hide them.

strGridHT = 400px.

Works fine for the other grids.

I dont see a reason its not showing.

On inspect the size of div = 1487x0 and the Pivotgrid = 0x0.

Not sure why!

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
        <GridLayoutColumn Width="9%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>
        <GridLayoutRow Height="@strAppMsgHT"></GridLayoutRow>               @*App Msg*@
        <GridLayoutRow Height="@strLabelsHT"></GridLayoutRow>               @*Report/Filters Labels*@
        <GridLayoutRow Height="@strRptFilterChoices1HT"></GridLayoutRow>     @*Report/Filters Choices*@
        <GridLayoutRow Height="@strRptFilterChoices2HT"></GridLayoutRow>     @*Report/Filters Choices*@
        <GridLayoutRow Height="@strRptFilterChoices3HT"></GridLayoutRow>     @*Report/Filters Choices*@
        <GridLayoutRow Height="@strSpacerHT"></GridLayoutRow>               @*Spacer*@
        <GridLayoutRow Height="@strGridHT"></GridLayoutRow>                 @*Report Grids *@
    </GridLayoutRows>

<GridLayoutItem Row="7" Column="1" ColumnSpan="12">
            <div hidden="@blnHideGrid_OrderListDetails">
                @if (!blnHideGrid_OrderListDetails) @*Neededfor grid to work correctly*@
                 {
                    <TelerikGrid @ref="@gridOrderListDetails"
                             Data="@grdOrderListDetails"
                             AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             Class="custom-row-colors"
                             FilterMode="@GridFilterMode.FilterRow">
                        <GridToolBarTemplate>
                            <GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
                            @*<GridCommandButton Command="CsvExport" Icon="@FontIcon.FileCsv">Export to CSV</GridCommandButton>      *@
                            <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@OrderListDetails_ExportAllPages" /> Export All Pages</label>
                        </GridToolBarTemplate>
                        <GridExport>
                           <GridExcelExport FileName="@msExportFileName" AllPages="@OrderListDetails_ExportAllPages" OnBeforeExport="@OrderListDetails_OnBeforeExcelExport" OnAfterExport="@OrderListDetails_OnAfterExcelExport" />
                           @* <GridCsvExport FileName="@msExportFileName" AllPages="@OrderListDetails_ExportAllPages" />*@
                        </GridExport>
                    </TelerikGrid>
         }
            </div>
            <div hidden="@blnHideGrid_OrderListDetailsPGV">

                    <TelerikPivotGrid Data="@PivotData">
                        <PivotGridColumns>
                            <PivotGridColumn Name="@nameof(rtpOrderListDetailsPGMD.Status)" />
                        </PivotGridColumns>
                        <PivotGridRows>
                            <PivotGridRow Name="@nameof(rtpOrderListDetailsPGMD.Prime)" />
                            <PivotGridRow Name="@nameof(rtpOrderListDetailsPGMD.Period)" />
                        </PivotGridRows>
                        <PivotGridMeasures>
                            <PivotGridMeasure Name="@nameof(rtpOrderListDetailsPGMD.TotalAmt)" />
                        </PivotGridMeasures>
                    </TelerikPivotGrid>

            </div>
            <div hidden="@blnHideGrid_OrderListDetailsWNegDiscos">
                @if (!blnHideGrid_OrderListDetailsWNegDiscos) @*Neededfor grid to work correctly*@
                 {
         <TelerikGrid @ref="@gridOrderListDetailsWNegDiscos"
                             Data="@grdOrderListDetailsWNegDiscos"
                             AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             Class="custom-row-colors"
                             FilterMode="@GridFilterMode.FilterRow">
                    <GridToolBarTemplate>
                            <GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
                        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@OrderListDetailsWNegDiscos_ExportAllPages" /> Export All Pages</label>
                    </GridToolBarTemplate>
                    <GridExport>
                        <GridExcelExport FileName="@msExportFileName" AllPages="@OrderListDetailsWNegDiscos_ExportAllPages" OnBeforeExport="@OrderListDetailsWNegDiscos_OnBeforeExcelExport" OnAfterExport="@OrderListDetailsWNegDisco_OnAfterExcelExport" />
                    </GridExport>
                </TelerikGrid>
         }
            </div>
            <div hidden="@blnHideGrid_OrderListHistoryDetails">
                @if (!blnHideGrid_OrderListHistoryDetails) @*Neededfor grid to work correctly*@
                 {
                    <TelerikGrid @ref="@gridOrderListHistoryDetails"
                             Data="@grdOrderListHistoryDetails"
                             AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             Class="custom-row-colors"
                             FilterMode="@GridFilterMode.FilterRow">
                        <GridToolBarTemplate>
                            <GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
                            <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@OrderListHistoryDetails_ExportAllPages" /> Export All Pages</label>
                        </GridToolBarTemplate>
                        <GridExport>
                            <GridExcelExport FileName="@msExportFileName" AllPages="@OrderListHistoryDetails_ExportAllPages" OnBeforeExport="@OrderListHistoryDetails_OnBeforeExcelExport" />
                        </GridExport>
                    </TelerikGrid>
         }
            </div>
            <div hidden="@blnHideGrid_Tasks">
                @if (!blnHideGrid_Tasks) @*Neededfor grid to work correctly*@
                 {
                    <TelerikGrid @ref="@gridTasks"
                             Data="@grdTasks"
                             AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             Class="custom-row-colors"
                             FilterMode="@GridFilterMode.FilterRow">
                        <GridToolBarTemplate>
                            <GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
                            <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@Tasks_ExportAllPages" /> Export All Pages</label>
                        </GridToolBarTemplate>
                        <GridExport>
                            <GridExcelExport FileName="@msExportFileName" AllPages="@Tasks_ExportAllPages" OnBeforeExport="@Tasks_OnBeforeExcelExport" OnAfterExport="@Tasks_OnAfterExcelExport" />
                        </GridExport>
                    </TelerikGrid>
         }
            </div>
            <div hidden="@blnHideGrid_SummaryByCarrier">
                @if (!blnHideGrid_SummaryByCarrier) @*Neededfor grid to work correctly*@
                 {
                    <TelerikGrid @ref="@gridSummaryByCarrier"
                             Data="@grdSummaryByCarrier"
                             AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             Class="custom-row-colors"
                             FilterMode="@GridFilterMode.FilterRow">
                        <GridToolBarTemplate>
                            <GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
                            <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@SummaryByCarrier_ExportAllPages" /> Export All Pages</label>
                        </GridToolBarTemplate>
                        <GridExport>
                            <GridExcelExport FileName="@msExportFileName" AllPages="@SummaryByCarrier_ExportAllPages" OnBeforeExport="@SummaryByCarrier_OnBeforeExcelExport" />
                        </GridExport>
                    </TelerikGrid>
         }
            </div>
        </GridLayoutItem>

Deasun

commented on 27 Jun 2023, 04:38 PM

this might help id my issue:

REPL that does something similar. At least here you get to see something but it seems the control is empty!

Click on the button and the data should be created and then display the grid.

Note! This worked when the code in GetData was in the pageinit section.

<TelerikLoaderContainer Visible="@ldrVisible" Class="no-panel">
    <Template>
        <TelerikLoader></TelerikLoader>
        <div>
            <span></span>
            <span>Please wait, I am currenlty working on it...</span>
        </div>
    </Template>
</TelerikLoaderContainer>
<TelerikButton Title="Click me to see Pivot Grid View!" Class="tooltip-target" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="@PGV_OnClickHandler" Enabled="@(!ldrVisible)">
                    Pivot View
                    <TelerikLoader Class="loader-indicator" ThemeColor="light" Visible="@ldrVisible"></TelerikLoader>
                </TelerikButton>
<div hidden="@blnHideGrid_OrderListDetailsPGV">
<TelerikPivotGrid @ref="@PVGrid" Data="@PivotData">
    <PivotGridColumns>
        <PivotGridColumn Name="@nameof(PivotGridDM.Status)" />
    </PivotGridColumns>
    <PivotGridRows>
        <PivotGridRow Name="@nameof(PivotGridDM.Prime)" />
        <PivotGridRow Name="@nameof(PivotGridDM.Period)" />
    </PivotGridRows>
    <PivotGridMeasures>
        <PivotGridMeasure Name="@nameof(PivotGridDM.TotAmt)" />
    </PivotGridMeasures>
</TelerikPivotGrid>
</div>
@code {
    bool ldrVisible { get; set; }    
    private TelerikPivotGrid<PivotGridDM> PVGrid { get; set; } = null!;
    private List<PivotGridDM> PivotData { get; set; } = new List<PivotGridDM>();
    private bool blnHideGrid_OrderListDetailsPGV { get; set; } = true;
    protected override void OnInitialized()
    {
       // var dataItemCount = 100;
       // var primeCount = 3;
      //  var PeriodsCount = 5 + 1; // effectively 5, as rnd.Next() will never return 6
      //  var statusCount = 3 + 1; // effectively 3
      //  var rnd = new Random();
      //  DateTime dtIS = DateTime.Now;
//var productNumber = 0;
        //for (int i = 1; i <= dataItemCount; i++)
       // {
            //productNumber = rnd.Next(1, PeriodsCount);
            //dtIS = DateTime.Now.AddDays(-rnd.Next(1, 31)).AddMonths(-rnd.Next(1, 12)).AddYears(-rnd.Next(0, 5));
            //string strPeriod = dtIS.ToString("MMM");
            //strPeriod = (strPeriod + dtIS.ToString("yy"));
            //PivotData.Add(new PivotGridDM()
            //{
            //    Prime = $"Prime {productNumber % primeCount + 1}",               
            //    Status = $"Status {rnd.Next(1, statusCount)}",
            //    Period = strPeriod,
            //    TotAmt = rnd.Next(123, 987)
            //});
            
        //}
        
        base.OnInitialized();
    }
     async Task PGV_OnClickHandler()
    {
       await Task.Run(() => getdata());
       PVGrid.Rebind();
    }   
     private Task getdata(){
            PivotData.Add(new PivotGridDM()
            {
                Prime = $"CLOUD",               
                Status = $"COMPLETE",
                Period = "Apr23",
                TotAmt = 221.89
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"CLOUD",               
                Status = $"COMPLETE",
                Period = "Jun23",
                TotAmt = 43849.76
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"CLOUD",               
                Status = $"COMPLETE",
                Period = "May23",
                TotAmt = 1207.81
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"INTERNET",               
                Status = $"COMPLETE",
                Period = "Apr23",
                TotAmt = 56.00
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"INTERNET",               
                Status = $"COMPLETE",
                Period = "Jul23",
                TotAmt = 51.00
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"INTERNET",               
                Status = $"COMPLETE",
                Period = "Jun23",
                TotAmt = 73910.61
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"INTERNET",               
                Status = $"COMPLETE",
                Period = "Mar23",
                TotAmt = 49.50
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"INTERNET",               
                Status = $"COMPLETE",
                Period = "May23",
                TotAmt = 486.86
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"VOICE",               
                Status = $"COMPLETE",
                Period = "Apr23",
                TotAmt = 183.90
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"VOICE",               
                Status = $"COMPLETE",
                Period = "Jun23",
                TotAmt = 8814.88
            });
        PivotData.Add(new PivotGridDM()
            {
                Prime = $"VOICE",               
                Status = $"COMPLETE",
                Period = "May23",
                TotAmt = 332.26
            });
        blnHideGrid_OrderListDetailsPGV = false;
        return Task.CompletedTask; 
    }
    public class PivotGridDM
    {
        public string Prime { get; set; } = null!;  // category
        public string Status { get; set; } = null!; // Column Buckets      
        public string Period { get; set; }          // Category Periods
        public double TotAmt { get; set; }         // Bucket Values
    }
}

1 Answer, 1 is accepted

Accepted