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>

1] Can you export the gird?

2] How does one expand the columns to fit the header texts?

see example.

I'm trying to add a link that is outside of Blazor, in a menu component.  I think this is more of a Blazor routing issue than the menu component but I can't figure out how to work around it.  Blazor's default integration with AD includes a logout link.

<a href="MicrosoftIdentity/Account/SignOut">Log in</a>

I'm trying to add that link to the Menu component and I think its routing like an internal blazor page.  Below is the menu code and the last menu item is the logout.

    protected async override Task OnInitializedAsync()
    {
        var authState = await authenticationState;
        var user = authState?.User;
        IsAdmin = user.IsInRole("TaxonomyAdmin");

        var logoutUrl = string.Concat(Navigator.BaseUri, "MicrosoftIdentity/Account/SignOut");

        MenuItems = new List<MenuItem>()
        {
            new MenuItem{
                Url = "/",
                Icon = FontIcon.Menu,
                Items = new List<MenuItem>(){
                new MenuItem {Text = "Home", Url="/"},
                new MenuItem {Text = "New Request", Url="/newrequest"},
                new MenuItem {Text = "Admin", Url="/", Disabled = !IsAdmin },
                new MenuItem {Text = "Logout", Url=logoutUrl}
                }
            }
        };

        base.OnInitialized();
    }

It takes me to the correct url which is

https://localhost:7261/MicrosoftIdentity/Account/SignOut

and I get the routing error: "Sorry there is nothing at this address".   If I click return and rerun that URL it routes to the logout as expected.

Any suggestions?

Weird one.

I have a main grid and then a detail grid I display after user clicks on a cell value in Main grid.

I have currency column sin both, Decimals.

In the detail grid the Displayformat works and shows the currency formatting.

in class:

 [DisplayFormat(DataFormatString = "{0:C}")]
        public Decimal? M1_Amt { get; set; }

Only difference between both grids is the main has GridColumn tags and the detail doesn't.

Also tried the following in the main grids columntag:

 <GridColumn Field="@nameof(gdMappedUnMappedCostsOVHDR.M1_Amt)" Title="@M1_Title" DisplayFormat="{0:C}">

That displayformat does nothing!

I am not sure why I cant get this to work?

Anyone with some ideas?

Hi, I'm using Hierarchical Drawer with children & navigation and I'm following this docs: https://demos.telerik.com/blazor-ui/drawer/hierarchical-drawer.  I want when I click on DrawerItem, it will navigate to blazor component. I don't know where to put navigate function on. Do you have any suggestions? Thanks in advance.

I have a grid with horizontal scroll, row filter, and invisible no data template (done via css class) as requirement.

Note: if i use NoDataTemplate element as follow, it create an empty row

<NoDataTemplate>
        <div></div>
    </NoDataTemplate>

but i need no rows if the result is empty, so i managed via css with:

.hide-no-data-template .k-grid-norecords {
    display: none;
}
<TelerikGrid ... Class="hide-no-data-template"></TelerikGrid>

If i filter a column with the scrollbar shifted and the result produce at least one row, i show correcly the result

Now, if i change the filter obtaining no row result the grid is correcly empty and horizontal scrollbar disappear

Now, if i restore the previous filter, obtaining at least one row, the result is correct, but horizontal scrollbar is positioned at start position, and column data does not match column filters

you can reply the issue with this code: https://blazorrepl.telerik.com/mHYKGhPy15rgDbLM16

Related issues:

https://www.telerik.com/forums/grid-filter-value-resulting-in-no-rows-removes-horizontal-scroll-bar

https://feedback.telerik.com/blazor/1451961-grid-horizontal-scroll-is-disabled-when-no-data-items-are-rendered?_ga=2.196089516.1410422363.1687873194-1919299615.1685452956&_gl=1*1f4kvho*_ga*MTkxOTI5OTYxNS4xNjg1NDUyOTU2*_ga_9JSNBCSF54*MTY4Nzg3MzE5NC4xNC4xLjE2ODc4NzU0MjkuNC4wLjA.

Hi,

I want to not close contextmenu when I click item(OnClick event).

I also want the hierarchical window to keep open.

Is there any solution?

Thanks.

Hi, 

I need to change the standard text of "Drag a column header and drop it here to group by that column". How can I change the Title of this?
Thanks in advance!

Best Regards

Paul

Hi, one of my clients' automation team demands that each actionable element has it's own custom ID which they provide to us.

So on our custom components (or any HTML element) we just add, eg:

<div automation-id="some-important-div">...</div>

However, when we consume Telerik Blazor UI components we're struggling to fullfill this requirement.

Is there any way to add an arbitrary HTML attribute to inner components like this without having to re-implement each composable piece with our own template?

We're fine with the look and feel of components, so it feels like an overkill to have to re-do everything (for example, the calendar's header with clickable date, arrows and "today" elements, and then the date cells for each view) just to add this ID without changing the styles or structure.

The Resizable attribute o TelerikGrid is very useful, but it would be better if the last column's width could stretch to fit its container, whenever we resize other columns that make the former move from its previous position, like shown in the picture.

Is there a way to that automatic resize of the last column?