Hi --

I've added Teleirk.UI.for.Blazor to a brand new .NET MAUI Blazor Hybrid application.

In my MauiProgram.cs I add `builder.Services.AddTelerikBlazor();`

and I've just edited the generated page to include a DropDownListControl. Whole page code here:

https://gist.github.com/CMorooney/320976b711ea45052f20eca96f02d67c

adding a Breakpoint in VS for any/all System.Exception throws will expose a FileNotFoundException happening for a resource named `Telerik.Blazor.resources"

this doesn't happen if you replace the DropDownList with a telerik text box

but it currently does cause the BalzorWebView to crash in our production/testflight ios releases.

please help.

edit:

further details

Xcode 14.3.1

.net7.0-ios

Telerik.UI.for.Blazor 4.3.0

This is not so much a question as it is a tip to hopefully save time for someone else. Sorry if this sort of post is not allowed here!

I was following the steps here https://docs.telerik.com/blazor-ui/styling-and-themes/custom-theme#using-the-build-process-of-the-application to generate a CSS file with a reduced file size output by only importing the components used in the project, but I kept getting errors like:

Error: Can't find stylesheet to import.

And even after modifying the @import calls in the index.scss file, the error would still persist in this form:

The solution ended up being quite simple. Using dart-sass, I just needed to add the load-path option to the command. 

sass --load-path=node_modules --style compressed ./wwwroot/css/index.scss ./wwwroot/css/output.css

After that everything worked smoothly, the components could be specified in the index.scss file like:

@import '@progress/kendo-theme-bootstrap/scss/button/';
@import '@progress/kendo-theme-bootstrap/scss/dialog/';

And if you want it to run automatically on build, you can just put the following into a package.json file in the project's root directory and put the commands npm install and npm run build into the project's pre-build commands

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@progress/kendo-theme-default": "^6.4.0",
    "@progress/kendo-theme-bootstrap": "^6.4.0",
    "sass": "npm:sass@^1.63.6"
  },
  "scripts": {
    "build": "sass --load-path=node_modules --style compressed ./wwwroot/css/index.scss ./wwwroot/css/output.css"
  }
}

Hope this helps someone out! If posting something like this is against Form policy, my apologies.

I have a MultiSelect bound to a Dictionary<int, SerialNumberEntry> SNEList

<TelerikMultiSelect Data="SNEList" Value="@SelectedSerialNumberEntryIds" ValueExpression="@(() => SelectedSerialNumberEntryIds)" ValueChanged="@((List<int> newValues) => SelectSerialNumberEntryChanged(newValues))" AutoClose="false" Placeholder="Select Serial Numbers" ValueField="Key" TextField="Value.SerialNumber" @ref="SerialNumberMultiSelect" >
	<HeaderTemplate>
		<div class="select-all-item">
			<TelerikCheckBox TValue="bool"
				Value="@IsAllSerialNumbersSelected()"
				ValueChanged="@( (bool v) => ToggleSelectAllSerialNumbers(v) )"
				Id="ms-select-all-checkbox">
			</TelerikCheckBox>
			<label for="ms-select-all-checkbox">&nbsp;Select All</label>
		</div>
	</HeaderTemplate>
	<ItemTemplate>
		<input type="checkbox"
			id="@( "cb" + context.Key )"
			class="k-checkbox k-rounded-md k-checkbox-md"
			checked="@GetChecked(context.Value)">
		@context.Value.SerialNumber
	</ItemTemplate>
</TelerikMultiSelect>

and when I select an entry, it displays the "ToString()" result of the KeyValuePair<int, SerialNumberEntry>

Why does 

TextField="SerialNumber"

work if it's a List<SerialNumberEntry> but it's ignoring the 

TextField="Value.SerialNumber"

when it is a Dictionary<int, SerialNumberEntry>?  Can it not bind to child properties?  There's no template that I can find to override this behavior.

Nice job on R2 2023 release!   I like the PDF Viewer UI Controls.  Question: Any plans to add ANNOTATIONS and COMMENTS to client-side .NET Blazor MAUI libraries such as this serverside solution? In fact, I would even be willing to contribute to this development to be part of the Telerik offerings.

I have a ItemTemplate for the menu item which defines background color. But the parent node define the Padding, so it has different background color. I want to remove that padding.

But I don't want to change the style for global Telerik class, the other places may not want the behavior.

For Telerik DropDownList, we can have DropDownListSettings to define a separated class for the dropdownlist, like this:

<TelerikDropDownList Class="@componentClass" >
        <DropDownListSettings>
            <DropDownListPopupSettings Class="@dropdownClass" />
        </DropDownListSettings>
<TelerikDropDownList >

Please provide the same for TelerikMenu as well, so we can style the item without affect the Telerik global class.

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.