I have a Telerik Blazor Grid where I have implemented a custom FilterMenuTemplate which is used on 12 of the columns in the grid.

The custom FilterMenuTemplate displays a checkbox for all the distinct values in the database for that column field.

It takes approximately 2-3 seconds for the data to be returned from the database, and this is for each column.

When I first implemented the custom FilterMenuTemplate I only added it to a single column and it worked fine.  Since adding it to all 12 columns I have experienced a null reference exception.  The exception happens when the data hasn't finished being returned from the database and the collection Data property in the custom FilterMenuTemplate is null.

I added a null check like so to stop the null reference exception from being thrown, instead displaying a message to the user that the data is loading...:

<div class="filter-values-container">
    @if (Data == null)
    {
        <p>Loading filter values...</p>
    }
    else
    {
        foreach (var item in Data)
        {
            <div>
                <TelerikCheckBox Value="@(CurrentDistinctValueFilters.Contains(item.Key.ToString()))"
                                 ValueChanged="@((bool value) => CheckBoxValueChanged(value, item.Key.ToString()))"
                                 Id="@($"{Field}_{item.Key}")"
                                 Enabled="@EnableDistinctValues"/>
                <label for="@($"{Field}_{item.Key}")" class="k-label k-form-label">
                    @item.Value
                </label>
            </div>
        }
    }
</div>

What I was hoping would happen is that once the user clicks on the column filter, that the filter popup would temporarily show the loading message and then dynamically update and remove the loading message instead show the checkboxes once the Data property had data from the database.

This doesn't appear to happen, instead the filter popup remains open and the loading message stays on screen.  In order to get the filter popup to update with the checkboxes the user has to cancel the filter popup and re-active it to show the data.

Is there away of updating the filter popup dynamically once it is open and the data is available to render the checkboxes?

As a temporary crud workaround what I have none for now is disabled all the columns with these particular custom filters by binding the Filterable property on those columns to a boolean property which gets set to true when ALL the data for ALL 12 of those columns have been retrieved from the database.

e.g.

Filterable="@DataLoadedForGridFilters"

The downside to this is that none of those 12 column filters are enabled to be used for about 25+ seconds after the grid and then the associated column filter data have been retrieved from the database.

I need to return separate variables for the selected values (which will be used to query the data) and selected Text that will be use to populate a textbox on the page to show the user what they selected. I have a multiselect embedded within a Telerik Window so it pops-up, they select items and press the select button I have and the pop-up is hidden. it's returning the selected values but how do I also bind to the selected text?

Hi,

I have some measurement date in a database table:

...
        public int Number { get; set; }
        public DateTime Start { get; set; }
        public long ElapsedTime { get; set; }
...

I want make a view similar in the attached image with expandable rows group by the date.

In the Viewmodel I add a property to get the Date from Start to support GROUP BY Date:

public IQueryable<MeasurementViewModel> GetMeasurements()
        {
            var result = _context.Measurement.Select(w => new MeasurementViewModel
            {
                Date = w.Start.Date,
                Start = w.Start,
                Number = w.Number,
                ElapsedTime = w.ElapsedTime,
            }); ;
            return result;
        }

What is better to use: Grid with Grouping and aggregat or TreeList?

For TreeList I dont have parentID and childID. I think it is possible to calculate it.

The standard Grid group example doesn't work: if I drag the Date column to the header only the waiting spinner is shown.

A solution for the grid should be: without Text "Drag a column header..." and not changeable by user.

The expandable date-header-rows sould show some aggregates per day: Count()  and SUM(ElapsedTime).

Is that possible?

Best regards,

Peter

Does the GridReadEventArgs support some sort of in functionality?

I am trying to programmatically use several multiselect lists to create the initial query for loading data into a grid via an OData datasource.

The "query" created is close but the fieldname is surrounded by single quotes so the query does not work

This is what is created

filter=(contains('abc,DEF','MyColName'))

but this is the proper syntax

filter=(contains('abc,DEF', MyColName))

Is there anyway short of manipulating the resulting query string to remove the single  quotes from around 'MyColName'?

Or IsContainedIn now supported in the latest version of the Blazor UI library?

When you enable filtering on grid columns the default out of the box implementation gives you 2 textboxes with an "AND" operator between the 2 textboxes.  For numeric columns a dropdown with options like "is less than or equal to", "is greater than or equal to" etc is displayed.  For string columns a dropdown with "contains" etc is displayed.

I would like to utilise the default filter implementation as described above but with the addition of my own custom checkbox filter above that will render all possible distinct values from the database.

Is there a Telerik component (similar to the TelerikCheckBoxListFilter component) that I can add to my custom FilterMenuTemplate component that will bring back the default out of the box filter UI for numbers and strings or if I'm implementing my own custom FilterMenuTemplate do I also have to manually re-create these standard filters?

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()

//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

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>

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

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>

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>