Hello support team,

from the donut chart example under https://demos.telerik.com/blazor-ui/chart/donut-chart:

Is there a specific reason why all charts have a Template sub-property for the ChartSeriesTooltip construct but the Template field with the template syntax for the ChartSeriesLabels construct? I would favour a unified syntax for both of the properties, if this is possible somehow...

Is this planned for the future to be unified? Especially formatting like shown under https://docs.telerik.com/blazor-ui/knowledge-base/chart-format-percent is not as simple as I would have expected as nobody wants to touch JavaScript code literally :D (Also, localizing data seems quite difficult with that technique).

The best option in my opinion would be to remove those templates completely and just let the user decide what to show there while using a field called e.g. TooltipMappingName and LabelMappingName or something like that. This gives the chart the maximum of configuration possible.

Example:

<TelerikChart>
    <ChartTitle Text="What is you favourite sport?"></ChartTitle>
    <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Donut"
                     Data="@Data"
                     Field="@nameof(ModelData.Value)"
                     CategoryField="@nameof(ModelData.Category)">
            <ChartSeriesTooltip Visible="true" Context="item" TooltipMappingName="@nameof(ModelData.Tooltip)"/>
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
                               Visible="true"
                               Background="transparent"
                               LabelMappingName="@nameof(ModelData.Label)">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Category { get; set; }
        public int Value { get; set; }
  public string Tooltip { get; set; }
        public string Label { get; set; }
    }

    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Category = "Football",
            Value = 35,
   Tooltip = "35%",
   Label = "Football: 35%"
        },
        new ModelData()
        {
            Category = "Basketball",
            Value = 25,
   Tooltip = "25%",
   Label = "Basketball: 25%"
        },
        new ModelData()
        {
            Category = "Volleyball",
            Value = 20,
   Tooltip = "20%",
   Label = "Volleyball: 20%"
        },
        new ModelData()
        {
            Category = "Rugby",
            Value = 10,
   Tooltip = "10%",
   Label = "Rugby: 10%"
        },
        new ModelData()
        {
            Category = "Tennis",
            Value = 10,
   Tooltip = "10%",
   Label = "Tennis: 10%"
        }
    };
}

Best regards,

Christian

I use Guids to identify data in my application. It is a lot more reliable than using integers; however, it appears as if the TreeList does not support the use of Guids for the Id and ParentId fields when building the list's view.

---

ADMIN EDIT

This was not a bug, it was probably a configuration issue, as the scenario works, so this is marked as "declined". See the thread below for a sample.

---

When I have some dynamic content inside the tooltip template, the tooltip seems not to be re-rendering. E.g. when I have a tooltip with a text input and button and wish to disable the button when no text is entered, the tooltip seems to be only refreshing after closing and re-opening it. Simplified example:

<TelerikTooltip TargetSelector=".search-tooltip" Position="TooltipPosition.Bottom" ShowOn="TooltipShowEvent.Click">
	<Template>
		<TelerikTextBox @bind-Value="@SearchText"></TelerikTextBox>
		<TelerikButton OnClick="@Search" Enabled="@(!string.IsNullOrEmpty(SearchText))">Search</TelerikButton>
	</Template>
</TelerikTooltip>

Even tried using the ValueChanged event of the TelerikTextBox and calling the StateHasChanged() method but had the same result (the enabled/disabled state of button only changed after closing&re-opening the tooltip).

I would expect the binding and re-rendering to work as normally in Blazor. Is there a way to manually 'call refresh' on the tooltip?

In our application, we have the need for aggregate functions in the grid which are determined at runtime, not design time. We were able to get this working for Group footers using a combination of the GroupFooterTemplate element and determining the applicable aggregates in OnStateInit and OnStateChanged. When our team saw that the FooterTemplate element was added, we were excited to bring "Grand Summary" functionality to this grid on top of the existing group summaries. As far as we have been able to determine, however, there doesn't appear to be a way, currently, to add AggregateDescriptors dynamically for the entire grid like we can for groups. We can do the aggregate operations manually against the data source, but this doesn't take into account and filtering which is applied to the grid. We have been unable to find any way of adding AggregateDescriptors for the overall Grid like we can for groups within the GridState's GroupDescriptor property.

Attached are two files: StateInitializationC#Code and gridRazor.txt, which contain relevant snippets of what we are currently doing.

In a Telerik Grid, we had just implemented the new Grid Footer Template.  However, any built-in filtering (filterrow, filtermenu, searchbox) we use now will cause the grid/page to crash when the input we type does not exist for any row in the grid.  If the input we type does exist, the filtering works correctly.  For instance, if wanted to filter the name "John Smith" and a row exists with that name, then that row will be filtered.  If we typed in "John Smithasdf", then the grid crashes and we receive the following message from the DevTools window:

blazor.server.js:19 [2020-09-21T16:58:12.070Z] Error: System.InvalidOperationException: Nullable object must have a value.
   at System.Nullable`1.get_Value()
   at BudgetPak.Pages.User.Budgeting.HeadcountReview.<>c__DisplayClass0_4.<BuildRenderTree>b__43(RenderTreeBuilder __builder4)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at Telerik.Blazor.Components.Grid.GridFooterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

From the highlighted text, we deduced the issue had to deal with the Grid Footer template.  Not all of our columns are aggregated on the footer row, so we were thinking that's what the "Nullable object must have a value" message meant.  When we removed the Grid Footer template, the filtering worked correctly.  With one of our other grids, we added a temporary footer grid, and the same crash would occur.

Is there a work-around for this?  The footer template otherwise is great, and we would like to use both that and filtering on our grids.  Please let us know if you need any more info.

Thanks,

Steve

• When I close Modal - Popup or Save button is clicked not able to Re-Load or Refresh the grid or Parent component
• I am calling the Save Action in Modal-Popup page and not using EventCallback method
• In Parent component, I am loading the Grid. But in Modal-Popup when calling Save Action the Grid or Parent component not refreshing.

Thanks

Vishnu Vardhanan

The Chart Tooltip does not render correct values for the data points when the chart is bound to a model, has multiple series and Template is used. The DataItem does not seem to work as expected.

ADMIN EDIT:

If the Chart is bound with Independent Series Binding the FormattedValue will get the correct values.

If the Chart has no Template the correct values for the data points will be displayed

Hello,

When using grid command button edit with the onedit handler shown in this documentation https://docs.telerik.com/blazor-ui/components/grid/editing/inline

There is a bug that causes the grid to reset to the first page when editing the last item on any page that isn't the first. In other words we can edit the last item in the gird on the first page but not on the second, third, fourth...etc. 
I have taken out all the logic in my edit handler as well and the problem still presents itself. 

Below is the relevenat code sample and I have also zipped a short video demonstrating the behavior.

<TelerikGrid @ref="@GridNameHere"
                             Class="smallerFont"
                             Data="@DataHere"
                             Pageable="true"
                             Page="@Page"
                             PageSize="@PageSize"
                             TotalCount="@Total"
                             Sortable="@true"
                             Groupable="@false"
                             FilterMode="@GridFilterMode.FilterMenu"
                             Reorderable="@true"
                             OnEdit="@OnEdit"
                             OnUpdate="@OnUpdate"
                             OnCreate="@OnUpdate">
                    <GridToolBar>
                        <GridCommandButton Command="Add" Icon="add">Add</GridCommandButton>
                    </GridToolBar>
                    <GridColumns>
                        <GridCommandColumn Width="150px">
                            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
                            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
                            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                        </GridCommandColumn>

                        <GridColumn Field="@(nameof(ModelName.FieldName))" Title="Column Name" Width="100px" />

                    </GridColumns>
                </TelerikGrid>

//Handler for edit

 protected void OnEdit(GridCommandEventArgs args)
{

// no code in here and problem still presents itself but feel free to put anything I recommend using the sample from the documentation above

}

For the Grid, is is possible to have a a SortField along with Field (that displays the data) in columns.

The SortField will be used instead of Field when sorting (if Grid is Sortable), like in WebForms: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.gridview.sortexpression?view=netframework-4.8.

Maybe you want to sort data based on other values instead of what is displayed.

This could be especially useful for dates that have been formatted for display in Field

but you don't want to use for sorting because date and string sorting is not the same.

I hate to refer to this as a bug, as I'm sure there is something we are missing. Here's are the bullet points of the scenario:

• We are using Telerik Drawer as our "NavMenu" component
• We are using Azure AD for Authentication

In the OnLogInSucceeded section of our Authentication.razor, we are building the user specific menu from SQL tables, structuring it in a hierarchical DrawerItem list.

When I pass that back to the Data property of the TelerikDrawer, the display does not update. StateHasChanged doesn't have any impact. We have tried tying it to a "service" to listen for changes. We have even called an event that would manually make the update.

MAIN LAYOUT

@inherits LayoutComponentBase
@inject NavigationManager navigationManager
@inject PublicClient Http
@inject IMatToaster toast

@using G2_Field.Shared
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

@inject IAuthorizationService AuthorizationService
@inject Employee dbUSER

@attribute [Authorize]


    <TelerikRootComponent>
        <div>
            <NavMenu @ref="nm" items="@Data" />
        </div>

        <div class="app-main">
            <div class="app-bar">
                <div style="float:left">
                    <TelerikButton OnClick="@ToggleDrawer" Icon="@Telerik.Blazor.IconName.Menu" Class="k-flat" />
                </div>
                <div style="float:right">
                    <LoginDisplay />
                </div>
            </div>
            <div>
                @Body
            </div>
        </div>
    </TelerikRootComponent>
    <MatToastContainer />

    @code {
        public TelerikDrawer<DrawerItem> Drawer { get; set; }
        public DrawerItem SelectedItem { get; set; }
        public bool Expanded { get; set; } = true;
        NavMenu nm;

        public List<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "HOME", Icon = Telerik.Blazor.IconName.Window, Description = "Home", URL="" }
        };

        public async Task ToggleDrawer() 
        {
            await nm.ToggleDrawer();
        }

        public async Task OnSidebarChange(List<DrawerItem> di)
        {
            Data = di;
            Console.WriteLine(di.Last().Children.Last().Text);
            await nm.RefreshMenu(di);
        }...

AUTHENTICATION

@page "/authentication/{Action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using G2_Field.Shared
@using System.Security.Claims
@inject Employee dbUSER
@inject PublicClient Http
@using System.Threading.Tasks

<RemoteAuthenticatorView Action="@Action" OnLogInSucceeded=@OnLogInSucceeded>
    <LoggingIn>
        You are about to be redirected to https://login.microsoftonline.com.
    </LoggingIn>
</RemoteAuthenticatorView> 

@code{
    [Parameter] public string Action { get; set; }
    AppCategories[] iMenu = new AppCategories[0];
    [CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; }

    [CascadingParameter] public Task<AuthenticationState> AuthenticationState { get; set; }
    [CascadingParameter] public List<DrawerItem> d { get; set; }
    [CascadingParameter(Name = "theMainLayout")] public MainLayout ml { get; set; }

    public async void OnLogInSucceeded()
    {
        var user = (await AuthenticationState).User;
        var un = (await AuthenticationState).User.Claims.ToList();
        var username = "";
        if (user.Identity.IsAuthenticated)
        {
            // Do some stuff
            Console.WriteLine("Log In Succeeded Event Fired");

            foreach (Claim u in un)
            {
                //Console.WriteLine(u.Type + " = " +  u.Value.ToString());
                if (u.Type == "preferred_username") { username = u.Value.ToString(); }
            }
            dbUSER = await Http.Client.GetJsonAsync<Employee>("/api/Index/GetCurrentEmployee/" + username);

            Console.WriteLine("EmpUserName=" + dbUSER.EmpUserName);

            var gUserName = dbUSER.EmpUserName;
            iMenu = await Http.Client.GetJsonAsync<AppCategories[]>("/api/Index/GetUserAppCategories/" + gUserName);

            d = new List<DrawerItem>();

            d.Add(new DrawerItem { Text = "HOME", Icon = "fa-home", Description = "Home", URL = "" });
            foreach (var app in iMenu)
            {
                List<DrawerItem> y = new List<DrawerItem>();
                foreach (var cat in app.ItemList)
                {
                    DrawerItem z = new DrawerItem
                    {
                        Text = cat.MenuItemTitle,
                        Icon = cat.MenuItemIcon,
                        Description = cat.MenuItemDescription,
                        URL = cat.MenuItemURL
                    };
                    y.Add(z);
                }

                DrawerItem x = new DrawerItem {
                    Text = app.MenuCategoryTitle,
                    Icon = Telerik.Blazor.IconName.Menu,
                    Description = app.MenuCategoryTitle,
                    Children = y
                };
                d.Add(x);
            }
            StateHasChanged();
            = new MainLayout();
            ml.OnSidebarChange(d);

        }
    }...



NAVMENU

@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using G2_Field.Shared


<TelerikDrawer @ref="@Drawer" Data="@items" MiniMode="false" Mode="@DrawerMode.Overlay" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">
    <Template Context="AuthDrawerContext">
        <div class="k-drawer-items" role="menubar" aria-orientation="vertical">
            <ul>
                @foreach (var item in AuthDrawerContext)
                {
                    var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;
                    <li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">
                        <div class="k-level-@(item.Level)">
                            <TelerikIcon Icon="@item.Icon"></TelerikIcon>
                            <span class="k-item-text">@item.Text</span>
                        </div>

                        @if (item.Expanded && (item.Children?.Any() ?? false))
                        {
                            <span class="k-icon k-i-arrow-chevron-down" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>
                        }
                        else if (!item.Expanded && (item.Children?.Any() ?? false))
                        {
                            <span class="k-icon k-i-arrow-chevron-right" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>
                        }
                    </li>
                }

            </ul>
        </div>
    </Template>
</TelerikDrawer>


@code {
    [Parameter] public List<DrawerItem> items { get; set; }
    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool Expanded { get; set; } = true;
    public List<DrawerItem> Data { get; set; } = new List<DrawerItem> { new DrawerItem { Text = "HOME", Icon = Telerik.Blazor.IconName.Window, Description = "Home", URL = "" } };

    public async Task ToggleDrawer() => await Drawer.ToggleAsync();

    protected override void OnInitialized()
    {
        items = Data;
        SelectedItem = items.First();
        StateHasChanged();
    }

    public void OnHover()
    {

    }

    public async Task RefreshMenu(List<DrawerItem> di)
    {
        items = di;
    } 

Hello,

im trying to render a treview but its not showing any item, im also print the results of my query on a table using a for loop and it shows the results ok , but the trevieww its not loading any data. Attached my code :

I am using the Telerik UI for Blazor 2.13. The export excel does not work with it. I am using the exact code snippet from docs as below on my test page:

@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
    Export button to save the current data *@
@page "/test"
@using Telerik.Blazor.Components

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
              Groupable="true">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

Whenever I click on the export button. It simply does not respond. I do see lot of http requests though :

Please let me know if you need anymore details.

Dear team,

we use a BlazoredTypeahead control inside a TelerikWindow and have this problem.

When you open the result dropdown of BlazoredTypeahead and click on the scrollbar in the result dropdown, the result dropdown is closed suddenly.

This only happens when a BlazoredTypeahead control is inside a TelerikWindow. If I remove the Telerik Window everything works as expected.

Attached is a running example, which demonstrates the issue. In the example just click on the "New" button in the grid, this will open the TelerikWindow, which contains the BlazoredTypeahead control.

Thanks for your help.

With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.

Is there a way to scroll up by code until this is fixed ???

Submitted on customer behalf:

This line of code is taken directly out of your https://demos.telerik.com/blazor-ui/grid/editing-inline

What kind of magic updates the actual database?

privatevoidUpdateItem(GridCommandEventArgs args)

{

var argsItem = args.ItemasProductBindingModel;

var index =GridData.FindIndex(i => i.ProductId== argsItem.ProductId);

if(index !=-1)

{

GridData[index]= argsItem;

}

}"

Grid OnRead .Clear() Issue

With the following component:

@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; } = new List<SampleData>();
    //public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
    private int page = 1;

    private void ReadItems(GridReadEventArgs args)
    {
        //MyData = new List<SampleData>();  //OK!
        //MyData = new ObservableCollection<SampleData>(); //OK!
        MyData.Clear();  //List: No update. ObservableCollection: System.StackOverflowException!
        Populate();
        StateHasChanged();
    }

    private void Populate()
    {
        foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        }))
        {
            MyData.Add(data);
        }
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

I see the issues in the comment fields.  Changing OnRead to async makes no difference.  

The workaround is to assign a new List or ObservableCollection instead of using .Clear()

ADMIN EDIT: The issue stems from the data operations in the business logic, and it is not a bug in the component and it does not relate to WebAPI usage.

Hi there,

as a follow-up of https://feedback.telerik.com/blazor/1461176-set-specific-position-in-virtual-scrolling-mode we have implemented the suggested skip handling. But there seems an issue when the data is fetched asynchronously, specifically from an Web API.

After hours of debugging and analyzing i have narrowed it down to the following simple Blazor app showcasing the bug:

https://github.com/ViRuSTriNiTy/blazor-app-telerik-grid-skip-bug

Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.

The second skip followed immediatelly after the first one originates from the Telerik assembly hence i cannot investigate it further (no source code).

What are your thoughts? Is it a bug?

So lonG

Daniel