I need an org chart functionality, but telerik doesn't have an org chart component for Blazor. I'm considering integrate asp org chart component o jQuery org char component, and this is my question, what approach is better?

If found this:

https://github.com/telerik/blazor-ui/tree/master/common/kendo-in-blazor

Hy telerik,

On touch screens there is no hover so you need to click an item to open the menu for the children items.

This is not taken into account by the current implemnentation of CloseOnClick.

Becouse if set to True, it never opens the nested menu items. 

For now I will set CloseOnClick=false in order to be able to open the submenus. But this will make the menu stay opened after clicking a item. With is a very anoying user experience. I can provide an exemple if necesary.

Eveything works as expected on Descktop, as the submenu opens with hover.

Is this a bug?

Will it be fxed?

Is there a way to close the menu programatically?

Any workaround?

I have no found a duplicate post.

Cheers!

I'd like to be able to programmatically filter only the values shown in the popup list of the MultiSelect. Is there a way to do this that does not use the built in filtering, which is clunky?

I tried the suggestion here (Blazor MultiSelect Demos - Custom Filtering | Telerik UI for Blazor), but the issue with that is the OnRead mechanism filters not only the values shown in the popup list, but also all the values available to the MultiSelect itself.

This means that if items are already selected in the MultiSelect, then the popup list is shown, then I filter the popup list using OnRead (and the filter does not include the values already selected in the MultiSelect), the MultiSelect loses those existing selections and they disappear. So the OnRead mechanism does not work for only filtering the popup list. When using the default filtering, that filtering only filters the popup list and keeps any existing selection in the MultiSelect, which is the correct behavior I'm looking for, but programmatically done.

So, bottom line, I'd like a mechanism to programmatically filter only the items displayed in the popup list that works separately from the default filtering of the MultiSelect.

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

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 ?

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>

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.