Questions on UI for Blazor Forum

1 answer

1.9K+ views

Tailwind CSS

We are using another product called Tailwind to add css classes in to our project to design the look of certain things. This however seems to have a conflict with the telerik components most specifically the combobox where when you click on it to show the items it flashes and doesn't stay open so you can't select an item from it. I haven't seen anything else in the forums or anywhere else with other people having this issue so not sure if it's something anyone has come across

ComboBox

answered on 10 Jun 2021

1 answer

255 views

Can't have an empty entry in TreeList like in a Grid

I am using the ComboBox control to select values. Additionally there is a button next to the control which opens the TelerikWindow containing a Datagrid displaying the same data as the ComboBox. The benefit to the user should be paging and searching through the data. The user can select a row from the DataGrid which is then displayed in the ComboBox after closing the window. Since the ComboBox can be empty and have no value selected, an empty data entry is inserted into the bound data collection at the beginning, so the empty option is reflected in the grid.

This works very well, but since I also have hierarchical data I had to change to the TreeList Control instead of the DataGrid. The switch was easy, but then it stopped working, because the TreeList doesn't allow empty values. Without an empty selection option the TreeList works great, but I need this empty row in the grid, since the ComboBox has it as well.

I get following exception at runtime, that the key in the dictionary can't be null.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Value cannot be null. (Parameter 'key')
System.ArgumentNullException: Value cannot be null. (Parameter 'key')
   at System.Collections.Generic.Dictionary`2[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[Telerik.Blazor.Components.TreeList.Models.TreeListItem`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], Telerik.Blazor, Version=2.24.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8]].TryInsert(Object key, TreeListItem`1 value, InsertionBehavior behavior)
   at System.Collections.Generic.Dictionary`2[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[Telerik.Blazor.Components.TreeList.Models.TreeListItem`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], Telerik.Blazor, Version=2.24.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8]].Add(Object key, TreeListItem`1 value)
   at Telerik.Blazor.Data.TelerikTreeListDataSource`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetItems(IEnumerable`1 data)
   at Telerik.Blazor.Data.TelerikTreeListDataSource`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].BuildTree(IEnumerable`1 sourceData)
   at Telerik.Blazor.Data.TelerikTreeListDataSource`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].InitData(IEnumerable`1 sourceData)
   at Telerik.Blazor.Data.TelerikTreeListDataSource`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ProcessData(IEnumerable data)
   at Telerik.Blazor.Components.Common.DataBoundComponent`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ProcessDataInternal()
   at Telerik.Blazor.Components.Common.DataBoundComponent`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].OnParametersSetAsync()
   at Telerik.Blazor.Components.TelerikTreeList`1[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<>n__0()
   at Telerik.Blazor.Components.TelerikTreeList`1.<OnParametersSetAsync>d__127[[TelerikBlazorGrid.Client.ViewModels.ComboBoxData`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], TelerikBlazorGrid.Client, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

Here are some code snippets

//My model class
public class ComboBoxData<T>
{
   public T? Value { get; set; }
   public string? Text { get; set; } = string.Empty;
}

//The data bound to the Grid / TreeList
public IEnumerable<ComboBoxData<string?>> Data { get; set; } = new List<ComboBoxData<string?>>();

//In the initialize method I insert an empty model object at the beginning
protected override Task OnInitializedAsync()
{
   var dataList = GenerateData();
   dataList.Insert(0, new ComboBoxData<string?>());
   Data = dataList;

   return base.OnInitializedAsync();
}

I also attached you a small Blazor WASM example with both Grid implementations to show the problem.

Thanks in advance for helping.
Best regards

Grid

TreeList

answered on 10 Jun 2021

1 answer

487 views

ChartCategoryAxisLabels HTML Template

Is there any way to place HTML code into Template for category-axis?

Documentation suggests one way like this:

<ChartCategoryAxisLabels Template="#=value#"></ChartCategoryAxisLabels>

But I need to realize more complicated tasks. For example, show image instead of simple text (place url into on of the categories and then show it through <img> tag). Now, I сouldn't do anything more than:

<ChartCategoryAxes>
  <ChartCategoryAxis Name="chartCategories" Categories="@NumberCategoriesData"></ChartCategoryAxis>
  <ChartCategoryAxis Name="pictureCategories" Categories="@PictureCategoriesData">
         <ChartCategoryAxisLabels Template="#=value#"></ChartCategoryAxisLabels>
   </ChartCategoryAxis>
</ChartCategoryAxes>
<ChartValueAxes>
   <ChartValueAxis AxisCrossingValue="@crossingPoints"></ChartValueAxis>
</ChartValueAxes>

If there isn't more options to solve this approach, is it already planned to add or not?

Charts

Styling

answered on 09 Jun 2021

1 answer

290 views

How do I remove the And/Or and second filter from the FilterMenu?

I tried this.... But I end up with nothing....

<GridColumn Width="7%" Field="@nameof(VehiclePartModel.YearId)">
<FilterMenuTemplate>
@{
if (context is FilterMenuTemplateContext filterMenuTemplateContext)
{
filterMenuTemplateContext.FilterDescriptor.FilterDescriptors.Clear();
filterMenuTemplateContext.FilterDescriptor.FilterDescriptors.Add(new FilterDescriptor(nameof(VehiclePartModel.YearId), FilterOperator.IsEqualTo, string.Empty));

}
}
</FilterMenuTemplate>
</GridColumn>

Grid

answered on 09 Jun 2021

1 answer

400 views

Need help returning selected values from multiselect.

I have a mutliselect contained with in a window control which is then hosted on the parent page as a component.

The window control also contains a button to click once you select from the multi select which in it's onclick code performs a call back to the mainpage like this: OnSelectedItems.InvokeAsync(selectedItems);

At this point the selected items are in the variable. But the parent page does not seem to receive them. I am sending the component code as well as how it's referenced in the parent page. I have tried everything.

This is the parent page razor code:

EditForm Model="@ps" OnValidSubmit="FilteredSearchAsync">
<button type="submit">Search</button>
<label id="lbldodId">
DoD Id:
<InputText id="DodIdSearch" @bind-Value="ps.DodId" />
<img src="/Images/icon-magnifying-glass.jpg" @onclick="showPopup" alt="" style="width:25px;height:25px;" />
</label>

<SearchFilterPopupComponent IsVisible="@showFilterPopup" InputData ="@dodIdList" selectedItems="@selectedDodIds" OnSelectedItems="@UpdateThisComponent"></SearchFilterPopupComponent>

<label id="lblFirstName">
First Name:
<InputText id="FirstNameSearch" @bind-Value="ps.FirstName" />
</label>
<label id="lblLastName">
Last Name:
<InputText id="LastNameSearch" @bind-Value="ps.LastName" />
</label>
<button @onclick="ClearSearch">Clear</button>
</EditForm>

protected void UpdateThisComponent()
{
if (selectedDodIds.Count > 0) // at this point the count is zero
{
showFilterPopup = false;
ps.DodId = selectedDodIds[0]; //just grabbing the first one for now

StateHasChanged();
}
}

This is my component code:

<TelerikWindow @bind-Visible="@IsVisible">
<WindowTitle>
<strong>The Title</strong>
</WindowTitle>
<WindowActions>
<WindowAction Name="Minimize" />
<WindowAction Name="Maximize" />
<WindowAction Name="Close" />
</WindowActions>
<WindowContent>
<TelerikMultiSelect Data="@InputData"
@bind-Value="@selectedItems"
Placeholder="Enter Dod ID or click to see all."
Width="350px" ClearButton="true" AutoClose="false">
</TelerikMultiSelect>

<TelerikButton OnClick="@ItemsSelected">Select</TelerikButton>

</WindowContent>
</TelerikWindow>

public partial class SearchFilterPopupComponent
{
[Parameter] public List<string> InputData { get; set; }
[Parameter] public EventCallback<List<string>> OnSelectedItems { get; set; }
[Parameter] public EventCallback<bool> OnVisibleChanged { get; set; }
[Parameter] public bool IsVisible { get; set; }
[Parameter] public List<string> selectedItems { get; set; }

protected void OpenWin()
{
IsVisible = true;
}

protected void CloseWin()
{
IsVisible = false;
OnVisibleChanged.InvokeAsync(IsVisible);
}

protected void ItemsSelected()
{
IsVisible = false;
OnSelectedItems.InvokeAsync(selectedItems); //AT this point all the items selected are in this variable.
}
}
}

MultiSelect

answered on 09 Jun 2021

2 answers

154 views

Window immediately closes and then parent form OnValidSubmit() function is called

Hi there,

I have a form:

    <TelerikForm Model="Template" OnValidSubmit="SubmitTemplateAsync">
        <FormItems>
            <TelerikTextBox @bind-Value="Template.Title" PlaceHolder="Title"></TelerikTextBox>
            <br />
            @foreach (EvaluateQuestionGroup group in Template.QuestionGroups)
            {
                <TelerikTextBox @bind-Value="group.Title"></TelerikTextBox>
                <TemplateLibraryEvaluateQuestionGrid Template="Template" QuestionGroup="group"></TemplateLibraryEvaluateQuestionGrid>
                <br />
            }
        </FormItems>

    </TelerikForm>

The Grid in this form has a window component that allows a user to post comments about individual grid rows. To access this popup they click a telerikbutton rendered in a grid column which toggles the window and passes it the grid row as a Parameter.

However, when a user clicks the button the window pops up and then immediately after OnInitializeAsync ends it disappears, at which point the form pasted above calls its OnValidSubmit.

Can you tell me why this is happening?

All the best,
John

Grid

Window

answered on 09 Jun 2021

1 answer

182 views

Window popup issue when user scroll up or down in a page

Hello

A short video was recorded how and when the issue occurred.

Best

Window

answered on 09 Jun 2021

2 answers

124 views

so does all the window markup have to be defined in your main page that wants to show it?

I want to make a separate razor page to to hold the markup & code for the window component. Then display it modally on the man page. Can that be done?

Window

answered on 08 Jun 2021

1 answer

319 views

Adjusting Blazor Vertical Range Slider height?

I understand how to make the range slider fill a horizontal space using Width but is there a way to make a Vertical Range Slider fill a vertical space?

RangeSlider