Questions on UI for Blazor Forum

1 answer

530 views

Hello,

I want to change the filename dynamically after the initial loading of a grid in a razor page, So lets say I refresh a grid after a search and export to a file telerik_101123.xlsx. (10:11:23 being the current time). Then 2 min later I refresh the grid again and export it to telerik_101323.xlsx. How can I do that

Grid

answered on 04 Jul 2023

0 answers

430 views

'None' option in Grid filter for empty values

I have a grid where 'Location' column may contain empty values. I have implemented the column in the following way:

<GridColumn Title="Location"
                        Width="100px"
                        FilterMenuType="FilterMenuType.CheckBoxList"                        
                        Field="@nameof(AreaViewModel.Location)" >
                <Template>
                    @{
                        // If there is 'None' value specified for location - show just empty cell (hide actual data object property value). 
                        // But filter will be able to work in this case filtering by value 'None' as if it is shown in the cell. 
                        // Filter require that filter option text must match with the text in the bound data object property.
                        AreaViewModel item = context as AreaViewModel;
                        string cellValue = item.Location == "None" ? null : item.Location;
                        <div>@cellValue</div>
                    }
                </Template>
           <FilterMenuTemplate Context="context">
                              <TelerikCheckBoxListFilter Data="@FilterAreaLocations"                        
                                                         Field="@(nameof(AreaLocationDto.Location))"
                                  @bind-FilterDescriptor="context.FilterDescriptor">
                               </TelerikCheckBoxListFilter>

             </FilterMenuTemplate>

</GridColumn>

It allows to filter rows with empty values when I select 'None' in the filter. But I must substitute nulls with text 'None' in Grid data to get to work (that is not desired). Sorting does not work as I need in this case. It places rows with empty 'Location' field in position of word 'None' (in alphabet order). But I need to sort it as if it has null (or empty string) value instead of 'None'.

So questions are (I have not found answers in documentation):

1. Is it possible to implement custom sorting (some comparision function to implement or override for example) where I can handle 'None' values as nulls?

2. Is there some placeholder in filters for empty values that allows to assign some text for filter item with empty value (or some approach to implement it) ? I would be able to use actual nulls instead of text 'None' in grid data in this case.

3. Is there some other approach to implement such behaviour for Grid filter that allows filtering/sorting to work in desired way ?

Grid

asked on 04 Jul 2023

0 answers

89 views

How to get rid of the tab stop that surrounds a <TabStriptab>'s <Content>?

I have a space with multiple tabs and once you get to the end of the multiple tabs, there is a tab stop that encases all of the currently selected tab's content. I am wanting to know if it is possible to remove this?
Thanks!

TabStrip

asked on 03 Jul 2023

0 answers

109 views

ListView Blazor paging closes dialog

I have a ListView with paging, it's in the editortemplate in a gridview. the column is defined as:

            <GridColumn Field="Operators" FieldType="@(typeof(int))" Title="Operators" Width="5rem" Visible="true" ShowColumnChooser="true" ShowColumnMenu="true" Lockable="false" Filterable="true" Editable="true">
                <EditorTemplate>
                   <TelerikListView Data=@AssignedOperators
                             Pageable="true"
                             PageSize="5" 
                             Context="operators" >
                        <HeaderTemplate>
                            Operators
                        </HeaderTemplate>
                        <Template>
                            <div class="k-card k-card-horizontal">
                                <div class="k-vbox k-flex-grow">
                                    <div class="k-card-body">
                                                <h4 class="k-card-title">@(operators.FirstName + " " + operators.LastName)</h4>
                                                <h5 class="k-card-subtitle">@operators.CompanyName</h5>
                                        @* <div class="card-date">@context.Date.ToString("MMM dd yyyy")</div> *@
                                    </div>
                                    <div class="k-card-actions k-actions-horizontal k-actions-start">
                                        <ListViewCommandButton OnClick="@RemoveOperator" Enabled="true" FillMode="@(ThemeConstants.Button.FillMode.Outline)">Remove</ListViewCommandButton>
                                    </div>
                                </div>
                                @* <img class="k-card-image" src="images/articles/@context.ImageUrl" alt="@context.Subtitle" /> *@
                            </div>
                        </Template>
                    </TelerikListView>
                </EditorTemplate>
            </GridColumn>

It works well, except for the paging part. When I click on page 2 button, the dialog closes. So I guess the paging buttons are of type submit and not button. How can I prevent the dialog from getting closed when paging?

Editor

Grid

ListView

asked on 03 Jul 2023

1 answer

129 views

FileNotFoundException "Telerik.Blazor.resources" iOS Blazor Hybrid DropDownList

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

DropDownList

answered on 03 Jul 2023

1 answer

164 views

Minifying ThemeBuilder output in Visual Studio

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:

Error: Can't find stylesheet to import.
 ╷
1 │ @import "@progress/kendo-theme-core/scss/functions/index.import.scss";
 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ╵
 node_modules\@progress\kendo-theme-bootstrap\scss\core\functions\index.import.scss 1:9  @import
node_modules\@progress\kendo-theme-bootstrap\scss\core\_index.scss 4:9                  @import
node_modules\@progress\kendo-theme-bootstrap\scss\button\_index.scss 1:9                @import
wwwroot\css\index.scss 7:9                                                              root stylesheet

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.

Styling

answered on 03 Jul 2023

1 answer

230 views

MultiSelect will not show TextField of Dictionary<int, ComplexEntity>

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.

MultiSelect

answered on 03 Jul 2023

1 answer

275 views

Annotations for PDFs .NET MAUI

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.

PDFViewer

answered on 03 Jul 2023

0 answers

162 views

Have a class for the menu drop down

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:

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

Menu

asked on 30 Jun 2023

1 answer

242 views

Pivot Grid not displaying?

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>

PivotGrid

answered on 30 Jun 2023