Declined
Last Updated: 19 Aug 2019 15:16 by ADMIN

Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.

 

=====================================

@page "/poopy"


@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button

<style>
    .k-mid:hover .showme {
        display: block;
    }

    .showme {
        display: none;
        margin-left: 10px;
    }

    .showhim:hover .showme {
        display: block;
    }
</style>


@using Telerik.Blazor.Components.TreeView

<TelerikTreeView Data="@TreeData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
            <ItemTemplate>
                <div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
                <div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
                    <TelerikIcon IconName="@IconName.Plus" />
                </div>
            </ItemTemplate>
        </TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>

@helloString

@code {
    MarkupString helloString;

    void NodeClicked(string node)
    {
        helloString = new MarkupString(node);
    }


    void SayHelloHandler()
    {
        string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
        helloString = new MarkupString(msg);
    }


    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> TreeData { get; set; }

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

    private void LoadTreeData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });

        TreeData = items;
    }
}

======================================

Microsoft.JSInterop.JSException

  HResult=0x80131500
  Message=Cannot read property 'scrollHeight' of null
TypeError: Cannot read property 'scrollHeight' of null
    at Object.r (https://localhost:44326/_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js:1:1433)
    at https://localhost:44326/_framework/blazor.server.js:8:28347
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44326/_framework/blazor.server.js:8:28316)
    at https://localhost:44326/_framework/blazor.server.js:1:19148
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44326/_framework/blazor.server.js:1:19119)
    at e.processIncomingData (https://localhost:44326/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44326/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44326/_framework/blazor.server.js:1:38027)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Microsoft.JSInterop.JSRuntimeBase.<InvokeWithDefaultCancellation>d__13`1.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<GetContentHeight>d__57.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<SetMaxHeight>d__56.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_1(Object state)
   at System.Threading.QueueUserWorkItemCallback.<>c.<.cctor>b__6_0(QueueUserWorkItemCallback quwi)
   at System.Threading.ExecutionContext.RunForThreadPoolUnsafe[TState](ExecutionContext executionContext, Action`1 callback, TState& state)
   at System.Threading.QueueUserWorkItemCallback.Execute()
   at System.Threading.ThreadPoolWorkQueue.Dispatch()
Approved
Last Updated: 16 Aug 2019 14:01 by ADMIN

If filtering is enabled, the error may prevent the view from rendering  similar to NotImplementedException: Unexpected frame type during RemoveOldFrame: None.

Without filtering, an exception is thrown when you attempt to edit a field, similar to Error: System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Nullable`1[System.Int64]'.

Approved
Last Updated: 16 Aug 2019 07:44 by ADMIN
Created by: Mark Stevens
Comments: 0
Category: Charts
Type: Feature Request
1
At the moment, the charts always have a flat look, but I want the rounded (gradient) look that you get when you don't reference the theme (see attached).
Won't Fix
Last Updated: 16 Aug 2019 13:05 by ADMIN
Created by: Eric
Comments: 1
Category: UI for Blazor
Type: Bug Report
1

You may get an exception like

InvalidOperationException: The current thread is not associated with the Dispatcher. Use Invoke() or InvokeAsync() to switch execution to the Dispatcher when triggering rendering or modifying any state accessed during rendering.

or you may get components that simply don't work (for example, a Window does not show, a treeview does not expand).

The solution is to revert to the RenderComponentAsync method in your _Hosts.cshtml file.

Pending Review
Last Updated: 13 Aug 2019 15:38 by ADMIN
Created by: Tyler
Comments: 3
Category: UI for Blazor
Type: Feature Request
1
The Notifications component I think would be a great addition to UI for Blazor!  
Use it quite often with SPAs
In Development
Last Updated: 19 Aug 2019 15:18 by ADMIN
Scheduled for 1.6.0
When you change the data source of the treeview and the new data has a different set of Expanded states than the old data, you will get a `Microsoft.JSInterop.JSException: 'Cannot read property 'scrollHeight' of null` in VS. It will also fail to show you proper debug information, symbols and source code.


Simple Repro

@using Telerik.Blazor.Components.TreeView
 
<button class="btn btn-primary" @onclick="@(() => ChangeTreeData(false))">Change tree data</button>
 
<TelerikTreeView Data="@FlatData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding ParentIdField="Parent" ExpandedField="IsExpanded"></TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>
 
@code {
    public List<TreeItem> FlatData { get; set; } = new List<TreeItem>();
 
    public class TreeItem //most fields use the default names and will bind automatically in this example
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? Parent { get; set; } //this is a non-default field name
        public bool HasChildren { get; set; }
        public bool IsExpanded { get; set; } //this is a non-default field name
    }
 
    protected override void OnInit()
    {
        ChangeTreeData(true);
    }
 
    int currIndex { get; set; } = 0;
 
    void ChangeTreeData(bool expandItems)
    {
        currIndex++;
 
        FlatData.Clear();
 
        List<TreeItem> data = new List<TreeItem>();
 
        data.Add(new TreeItem { Id = currIndex, HasChildren = true, IsExpanded = expandItems, Parent = null, Text = $"root {currIndex}" });
        data.Add(new TreeItem { Id = currIndex + 1, HasChildren = false, IsExpanded = expandItems, Parent = currIndex, Text = $"root {currIndex}: child one" });
 
        FlatData.AddRange(data);
    }
 
}
Approved
Last Updated: 09 Aug 2019 05:14 by ADMIN
Created by: Mark Stevens
Comments: 0
Category: Charts
Type: Feature Request
1
Declined
Last Updated: 09 Aug 2019 05:26 by ADMIN
Created by: Robert
Comments: 4
Category: TabStrip
Type: Feature Request
1
There is no keepTabContent property for TabStrip. When setting that property to true in angular component, the component renders all tabs and they are persisted in the DOM.
I would like the same behavior for Blazor component.
Declined
Last Updated: 09 Aug 2019 06:40 by ADMIN

Hello,

I'm trying the grid component and I'm able to add a row to the grid using the embbed editor. But I wanted to add an item externally to the list:


<button @onclick="@MyClick">Add item</button>

 

void MyClick()
{
    MyData.Add(new SampleData() { ID = 46, Name = "from click" });
    StateHasChanged();
}

The new line does not appear on the grid but if I add a second item through the embbed editor then I get the 2 items!

I also try to replace the List<MyData> by an ObservableCollection<MyData> unsuccessfully.

 

Thanks & regards,

 

Approved
Last Updated: 06 Aug 2019 07:40 by ADMIN

I want to be able to control the page at which the user is in the grid. I will later use that to call my own API through the OnRead event. Binding the Page parameter does not seem to work, however.

Reproducible:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.NumericTextBox
@using Telerik.DataSource.Extensions;
 
<TelerikNumericTextBox @bind-Value="@startPage"></TelerikNumericTextBox>
 
<TelerikGrid Data=@GridData TotalCount=@Total Page="@startPage"
             Filterable=true Sortable=true Pageable=true EditMode="inline">
    <TelerikGridEvents>
        <EventsManager OnRead=@ReadItems></EventsManager>
    </TelerikGridEvents>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(Employee.ID) />
        <TelerikGridColumn Field=@nameof(Employee.Name) Title="Name" />
        <TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
    </TelerikGridToolBar>
</TelerikGrid>
 
There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.
 
@code {
    int startPage { get; set; } = 2;
 
    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;
 
    protected override void OnInit()
    {
        SourceData = GenerateData();
    }
 
    protected async Task ReadItems(GridReadEventArgs args)
    {
        Console.WriteLine("data requested: " + args.Request);
 
        //you need to update the total and data variables
        //the ToDataSourceResult() extension method can be used to perform the operations over the full data collection
        //in a real case, you can call data access layer and remote services here instead, to fetch only the necessary data
 
        //await Task.Delay(2000); //simulate network delay from a real async call
 
        var datasourceResult = SourceData.ToDataSourceResult(args.Request);
 
        GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
        Total = datasourceResult.Total;
 
        StateHasChanged();
    }
 
    //This sample implements only reading of the data. To add the rest of the CRUD operations see
 
    private List<Employee> GenerateData()
    {
        var result = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Employee()
            {
                ID = i,
                Name = "Name " + i,
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }
 
        return result;
    }
 
    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

while the similar approach works without OnRead:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.NumericTextBox
 
<TelerikNumericTextBox @bind-Value="@startPage" Min="1"></TelerikNumericTextBox>
 
<TelerikGrid Data="@MyData" Height="300px"
             Pageable="true" Sortable="true" Page="@startPage"
             FilterMode="Telerik.Blazor.FilterMode.FilterRow">
    <TelerikGridColumns>
        <TelerikGridColumn Field="@(nameof(SampleData.Id))" />
        <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </TelerikGridColumns>
</TelerikGrid>
 
@code {
    int startPage { get; set; } = 2;
 
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Approved
Last Updated: 05 Aug 2019 07:12 by ADMIN
Created by: Garrett
Comments: 0
Category: Charts
Type: Bug Report
1

After updating the chart data, some elements remain in the DOM. This can clutter the browser if the data updates come in on intervals and the chart remains in operation for a while. A screenshot is attached below.

MCVE:

@using Telerik.Blazor
@using Telerik.Blazor.Components.Button
@using Telerik.Blazor.Components.Chart
 
<h3>Chart</h3>
 
 
<TelerikButton Primary="true" @onclick="AddDataPoint">Add data point</TelerikButton>
 
<TelerikChart Transitions="false">
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="CPU Usage Data" Data="@simpleData">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>
 
    <TelerikChartValueAxes>
        <TelerikChartValueAxis Max="100" Color="black"></TelerikChartValueAxis>
    </TelerikChartValueAxes>
 
    <TelerikChartTitle Text="CPU Usage"></TelerikChartTitle>
 
    <TelerikChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
    </TelerikChartLegend>
</TelerikChart>
 
 
 
@code {
    void AddDataPoint()
    {
        Random random = new Random();
        var _val = Math.Round((random.NextDouble() * 100), 3);
 
        if (simpleData.Count >= 60)
        {
            simpleData = simpleData.TakeLast(59).ToList();
        }
        simpleData.Add(_val);
 
        //StateHasChanged();
 
    }
 
    public List<object> simpleData = new List<object>();
}

Approved
Last Updated: 01 Aug 2019 07:10 by Bernhard

I need the ability to show or hide command buttons based on a row's property.

I am aware that I can just cancel commands, but in my opinion, a command button should not even be shown when the command can't or shouldn't be executed on a row.

Unfortunately, I was unable to find a way to access the "context" (the instance) in a TelerikGridCommandColumn the same way you're able to in a normal TelerikGridColumn.

Approved
Last Updated: 31 Jul 2019 14:18 by ADMIN
Created by: Mark
Comments: 1
Category: Grid
Type: Feature Request
2
Grid needs the ability to show totals or other aggregates for selected columns
Approved
Last Updated: 31 Jul 2019 13:11 by ADMIN
Created by: Brian
Comments: 2
Category: TabStrip
Type: Bug Report
1

Content inside the tabs is narrow and elements float next to each other. For example, charts or other divs have limited width (screenshot of the issue at the end of this post).

@using Telerik.Blazor
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor.Components.TabStrip
 
@*WORKAROUND 1*@
<style>
    .k-tabstrip .k-animation-container-relative {
        width: 100%;
    }
</style>
 
@*WORKAROUND 2
<style>
    .k-tabstrip .k-animation-container-relative {
        display: block;
    }
</style>*@
 
<TelerikTabStrip>
    <TelerikTab Title="First">
        First tab content.
        <div style="border: 1px solid red;">some div that must be as wide as the tab strip</div>
        Chart follows and it should also be as wide as the tab
        <TelerikChart>
            <TelerikChartSeriesItems>
                <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
                </TelerikChartSeries>
                <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
                </TelerikChartSeries>
            </TelerikChartSeriesItems>
 
            <TelerikChartCategoryAxes>
                <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
            </TelerikChartCategoryAxes>
 
            <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>
 
            <TelerikChartLegend Position="ChartLegendPosition.Right">
            </TelerikChartLegend>
        </TelerikChart>
    </TelerikTab>
    <TelerikTab Title="Second" Disabled="true">
        Second tab content. This tab is disabled and you cannot select it.
    </TelerikTab>
    <TelerikTab Title="Third">
        Third tab content.
    </TelerikTab>
</TelerikTabStrip>
 
<TelerikChart>
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
        </TelerikChartSeries>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>
 
    <TelerikChartCategoryAxes>
        <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
    </TelerikChartCategoryAxes>
 
    <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>
 
    <TelerikChartLegend Position="ChartLegendPosition.Right">
    </TelerikChartLegend>
</TelerikChart>
 
 
@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

 

Completed
Last Updated: 14 Aug 2019 07:43 by ADMIN
Release 1.5.0
Created by: Eric
Comments: 0
Category: DatePicker
Type: Bug Report
1
In the following sample, the pickers should have different (distinct) formats, but they are always yyyy-MM-dd

@using Telerik.Blazor.Components.DatePicker


<TelerikDatePicker Enabled="false" @bind-Value="@HireDate" Format="MMMM/dd/yyyy"></TelerikDatePicker>
@HireDate

<br/>

<TelerikDatePicker @bind-Value="@MeetingDate" Format="MM/dd/yyyy HH:mm:ss"></TelerikDatePicker>
@MeetingDate

@code  {
DateTime HireDate { get; set; } = new DateTime(2018, 5, 6);
DateTime MeetingDate { get; set; } = new DateTime(2019, 3, 4, 15, 0, 0);
}
Approved
Last Updated: 31 Jul 2019 05:01 by ADMIN
Created by: Eric
Comments: 0
Category: DatePicker
Type: Bug Report
1
In the following sample, the first picker should be disabled but it isn't.

@using Telerik.Blazor.Components.DatePicker


<TelerikDatePicker Enabled="false" @bind-Value="@HireDate" Format="MMMM/dd/yyyy"></TelerikDatePicker>
@HireDate

<br/>

<TelerikDatePicker @bind-Value="@MeetingDate" Format="MM/dd/yyyy HH:mm:ss"></TelerikDatePicker>
@MeetingDate

@code  {
DateTime HireDate { get; set; } = new DateTime(2018, 5, 6);
DateTime MeetingDate { get; set; } = new DateTime(2019, 3, 4, 15, 0, 0);
}
Declined
Last Updated: 31 Jul 2019 09:59 by ADMIN
Created by: Igonik84
Comments: 3
Category: UI for Blazor
Type: Feature Request
1

What about supporting INotifyCollectionChanged data source for the Grid?

Approved
Last Updated: 29 Jul 2019 05:40 by ADMIN
Created by: Milind
Comments: 1
Category: TextBox
Type: Bug Report
1

Hello,

 

In the demo page of textbox if I type my name Milind (I have good typing speed), it doesn't show the complete word in textbox. Some of the chars are dropped.(Milind - Miind, Soham - soam, Shevade - Shvae) etc. Even the backspace key on keyboard doesnt seem to work properly. If I type the name at very slow speed I am able to retain all typed chars. It seems to be a bug

Attaching video for reference

Thanks,

 

Milind Shevade

Declined
Last Updated: 19 Aug 2019 04:37 by ADMIN
Created by: Valid Development Factory
Comments: 2
Category: Charts
Type: Bug Report
1

Hi,

We tried making the name property of our TelerikChartSeries dynamic by binding it to a string value. This however seems to completely crash startup, the browser tab freezes and the console doesn't show any errors. If we just put in a simple string in the Name property the application runs without a problem.

<TelerikChartSeries Type="ChartSeriesType.Column" Name="@Team1Name" Data="@Results" Field="@nameof(ChartViewModel.Team1Score)" CategoryField="@nameof(ChartViewModel.CategoryName)">
    <TelerikChartSeriesLabels Visible="true" />
</TelerikChartSeries>

As you can see in this example we're binding the Name property to Team1Name which can be changed whenever another team is selected from a dropdownlist.

Thank you in advance.

1 2 3 4 5 6