Progress® Telerik® UI for Blazor Feedback Portal

Completed

Last Updated: 19 May 2020 16:15 by ADMIN

Release 2.14.0

Bug with grid EditorTemplate

Created by: Kostas

Comments: 1

Category: UI for Blazor

Type: Bug Report

Bug with grid EditorTemplate

Based on the example used in this page (https://docs.telerik.com/blazor-ui/components/grid/editing/incell)

i tried to use a component of my own composed by teleriks components in the editor template

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAccessTokenProvider AuthenticationService
@inject NavigationManager Navigation
@inject WeatherForecastDataSource WeatherForecastDataSource
@using Olympus.Artemis.Shared
@attribute [Authorize]

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>


<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        <TelerikGrid Data="_data" Height="400px"  
                     Pageable="true" Sortable="true" Groupable="true" EditMode="@GridEditMode.Incell" Navigable="true"
                     FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" @ref="_grid"
                     Resizable="true" Reorderable="true">
            <GridColumns>
                <GridColumn Field=@nameof(TestItem.WeatherForecastID) Title="Position" Width="200px">
                    <Template Context="item">
                        @{

                            var value = ((TestItem)item).WeatherForecastID;
                            var text = data.Where(x => x.ID == value).Select(x => x.Date).FirstOrDefault();

                        }
                        @text
                    </Template>
                    <EditorTemplate>
                        @{
                            currentItem = context as TestItem;
                            <Test2 OnChange="@onChange" DataSource="@this.WeatherForecastDataSource" Value="@currentItem.WeatherForecastID"></Test2>
 
                        }
                    </EditorTemplate>
                </GridColumn>
            </GridColumns>
        </TelerikGrid>


       
    </tbody>

</table>


@code {   
    protected async Task onChange(object o) {
        currentItem.WeatherForecastID =(Guid) o;
        Console.WriteLine("wrwerwe"+currentItem.WeatherForecastID);
        await CloseEditor(currentItem);
    }
    protected async override Task OnParametersSetAsync()
    {
        data =await WeatherForecastDataSource.GetDataAsync();

        await base.OnParametersSetAsync();
    }
    public List<WeatherForecast> data = new List<WeatherForecast>();
    public TestItem currentItem { get; set; }
    TelerikGrid<TestItem> _grid;
    DateTime selectedValue { get; set; } = DateTime.Now;
    private List<TestItem> _data = new List<TestItem>()
    {
            new TestItem { MyDate = DateTime.Today, DateName = "Σημερα" ,WeatherForecastID= new Guid("be4f3a98-5fd3-4972-bc49-1c442cdf87dd") ,ID=Guid.NewGuid()},
            new TestItem { MyDate =DateTime.Today.AddDays(1), DateName = "Αύριο",WeatherForecastID=new Guid("7fac0c25-653b-4606-afef-19f6e27fc57a"),ID=Guid.NewGuid() },
            new TestItem { MyDate =DateTime.Today.AddDays(2), DateName = "Μεθαύριο" ,WeatherForecastID= new Guid("48eb0a12-5971-479a-852d-6383f30e14cb"),ID=Guid.NewGuid()},
            new TestItem { MyDate =DateTime.Today.AddDays(3), DateName = "Αντιμεθαύριο" ,WeatherForecastID= new Guid("113bde91-b0b9-45e0-9d4b-5b280650e042"),ID=Guid.NewGuid()}
    };


    public class TestItem:Olympus.Artemis.Shared.InfoEntities.BaseInfo {
        public Guid WeatherForecastID { get; set; }
        public DateTime MyDate { get; set; }
        public string DateName { get; set; }
        public override bool Equals(object obj)
        {
            if (obj != null && obj is TestItem)
            {
                TestItem curr = obj as TestItem;
                return (ID == curr.ID) && (WeatherForecastID == curr.WeatherForecastID) && (MyDate == curr.MyDate) && (DateName == curr.DateName);
            }
            return false;
        }
    }
    public async Task CloseEditor(TestItem currentItem)
    {
        var state = _grid?.GetState();

        if (currentItem.ID == null && state.InsertedItem != null)
        {
            // insert operation - the item is new
            await CreateHandler(new GridCommandEventArgs()
            {
                Item = state.InsertedItem
            });
        }
        else
        if (currentItem.ID != null && state.EditItem != null)
        {
            Console.WriteLine($"field c {state.EditField}  {typeof(TestItem).GetProperty(state.EditField).GetValue(currentItem)}");
            Console.WriteLine($"field e {state.EditField}  {typeof(TestItem).GetProperty(state.EditField).GetValue(state.EditItem)}");

            // edit operation on an existing item
            await UpdateHandler(new GridCommandEventArgs()
            {
                Item = state.EditItem,
                Field = state.EditField
            });
        }

        state.InsertedItem = state.OriginalEditItem = state.EditItem = default;
        StateHasChanged();
        await Task.Delay(200); // let the grid re-render and close the cell if keyboard navigation is enabled

        await _grid?.SetState(state);
    }
    async Task UpdateHandler(GridCommandEventArgs args)
    {

        string fieldName = args.Field;
        object newVal = args.Value; // you can cast this, if necessary, according to your model
        Console.WriteLine(fieldName);

        TestItem item = (TestItem)args.Item; // you can also use the entire model
        Console.WriteLine(item.ID);

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        var index = _data.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            if (!_data[index].Equals(item))
            {
                _data[index] = item;
                Console.WriteLine("Update event is fired for " + args.Field + typeof(TestItem).GetProperty(args.Field).GetValue(item));
                // this copies the entire item, consider altering only the needed field
            }
        }

    }
    async Task CreateHandler(GridCommandEventArgs args)
    {
        TestItem item = (TestItem)args.Item;

        item.ID = Guid.NewGuid();
        _data.Insert(0, item);

        Console.WriteLine("create");
        // perform actual data source operation here through your service
    }


}

The test2 component created by me is this one It only includes a telerikdropdown

@using Olympus.Artemis.Shared
<TelerikComboBox Data="@Items" Value="@Value" ValueField="ID" OnChange="@OnChange" TextField="Date">

</TelerikComboBox>
@code {


    [Parameter]
    public EventCallback<Object> OnChange { get; set; }

 

    [Parameter]
    public Guid Value { get; set; }

    [Parameter]

    public DataSource<WeatherForecast> DataSource { get; set; }

    private IEnumerable<WeatherForecast> Items { get; set; } = new List<WeatherForecast>();
    protected async override Task OnInitializedAsync()
    {
        Items = await DataSource.GetDataAsync();

        await base.OnInitializedAsync();
    }


}

But when i try to select something from the dropdown list the grid cel does not close gracefully

I get this error (the problem is when it executed the line await _grid?.SetState(state);)

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Unhandled exception rendering component: Unknown edit type: 0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Error: Unknown edit type: 0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.applyEdits (https://localhost:44310/_framework/blazor.webassembly.js:1:15000)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.updateComponent (https://localhost:44310/_framework/blazor.webassembly.js:1:12872)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.t.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:1704)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.window.Blazor._internal.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:34679)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at _mono_wasm_invoke_js_unmarshalled (https://localhost:44310/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:166495)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at wasm_invoke_iiiiii (wasm-function[3166]:0x9d336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at icall_trampoline_dispatch (wasm-function[5782]:0x1006fa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at mono_wasm_interp_to_native_trampoline (wasm-function[4612]:0xcc80e)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at ves_pinvoke_method (wasm-function[3215]:0x9ed39)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at interp_exec_method (wasm-function[1126]:0x25a67)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Microsoft.JSInterop.JSException: Unknown edit type: 0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Error: Unknown edit type: 0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.applyEdits (https://localhost:44310/_framework/blazor.webassembly.js:1:15000)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.updateComponent (https://localhost:44310/_framework/blazor.webassembly.js:1:12872)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.t.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:1704)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.window.Blazor._internal.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:34679)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at _mono_wasm_invoke_js_unmarshalled (https://localhost:44310/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:166495)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at wasm_invoke_iiiiii (wasm-function[3166]:0x9d336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at icall_trampoline_dispatch (wasm-function[5782]:0x1006fa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at mono_wasm_interp_to_native_trampoline (wasm-function[4612]:0xcc80e)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at ves_pinvoke_method (wasm-function[3215]:0x9ed39)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at interp_exec_method (wasm-function[1126]:0x25a67)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3038030 + 0x00046> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3037f50 + 0x00014> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3037e58 + 0x0001e> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2de1a68 + 0x000f2> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Unhandled exception rendering component: Cannot read property 'parentNode' of undefined
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 TypeError: Cannot read property 'parentNode' of undefined
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.e [as removeLogicalChild] (https://localhost:44310/_framework/blazor.webassembly.js:1:6927)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.applyEdits (https://localhost:44310/_framework/blazor.webassembly.js:1:13641)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.updateComponent (https://localhost:44310/_framework/blazor.webassembly.js:1:12872)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.t.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:1704)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.window.Blazor._internal.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:34679)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at _mono_wasm_invoke_js_unmarshalled (https://localhost:44310/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:166495)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at wasm_invoke_iiiiii (wasm-function[3166]:0x9d336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at icall_trampoline_dispatch (wasm-function[5782]:0x1006fa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at mono_wasm_interp_to_native_trampoline (wasm-function[4612]:0xcc80e)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at ves_pinvoke_method (wasm-function[3215]:0x9ed39)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Microsoft.JSInterop.JSException: Cannot read property 'parentNode' of undefined
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 TypeError: Cannot read property 'parentNode' of undefined
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.e [as removeLogicalChild] (https://localhost:44310/_framework/blazor.webassembly.js:1:6927)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.applyEdits (https://localhost:44310/_framework/blazor.webassembly.js:1:13641)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.updateComponent (https://localhost:44310/_framework/blazor.webassembly.js:1:12872)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.t.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:1704)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.window.Blazor._internal.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:34679)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at _mono_wasm_invoke_js_unmarshalled (https://localhost:44310/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:166495)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at wasm_invoke_iiiiii (wasm-function[3166]:0x9d336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at icall_trampoline_dispatch (wasm-function[5782]:0x1006fa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at mono_wasm_interp_to_native_trampoline (wasm-function[4612]:0xcc80e)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at ves_pinvoke_method (wasm-function[3215]:0x9ed39)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3038030 + 0x00046> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3037f50 + 0x00014> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3037e58 + 0x0001e> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2de1a68 + 0x000f2> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Unhandled exception rendering component: No element is currently associated with component 96
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Error: No element is currently associated with component 96
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.updateComponent (https://localhost:44310/_framework/blazor.webassembly.js:1:12336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.t.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:1704)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.window.Blazor._internal.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:34679)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at _mono_wasm_invoke_js_unmarshalled (https://localhost:44310/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:166495)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at wasm_invoke_iiiiii (wasm-function[3166]:0x9d336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at icall_trampoline_dispatch (wasm-function[5782]:0x1006fa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at mono_wasm_interp_to_native_trampoline (wasm-function[4612]:0xcc80e)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at ves_pinvoke_method (wasm-function[3215]:0x9ed39)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at interp_exec_method (wasm-function[1126]:0x25a67)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at interp_runtime_invoke (wasm-function[5660]:0xf937a)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Microsoft.JSInterop.JSException: No element is currently associated with component 96
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 Error: No element is currently associated with component 96
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at e.updateComponent (https://localhost:44310/_framework/blazor.webassembly.js:1:12336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.t.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:1704)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Object.window.Blazor._internal.renderBatch (https://localhost:44310/_framework/blazor.webassembly.js:1:34679)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at _mono_wasm_invoke_js_unmarshalled (https://localhost:44310/_framework/wasm/dotnet.3.2.0-preview5.20216.1.js:1:166495)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at wasm_invoke_iiiiii (wasm-function[3166]:0x9d336)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at icall_trampoline_dispatch (wasm-function[5782]:0x1006fa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at mono_wasm_interp_to_native_trampoline (wasm-function[4612]:0xcc80e)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at ves_pinvoke_method (wasm-function[3215]:0x9ed39)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at interp_exec_method (wasm-function[1126]:0x25a67)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at interp_runtime_invoke (wasm-function[5660]:0xf937a)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3038030 + 0x00046> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3037f50 + 0x00014> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3037e58 + 0x0001e> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2de1a68 + 0x000f2> in <filename unknown>:0

The test control is a simplified version of a more complex control i was trying to create (mutlicolumn combobox)

If I instead use the telerikdropdown in editortemplate everything works ok

Completed

Last Updated: 14 May 2020 16:19 by ADMIN

Create a chips component for Blazor UI

Created by: Darryl

Comments: 1

Category: UI for Blazor

Type: Feature Request

Create a chips component for Blazor UI

One feature that is missing from the current set of Blazor UI components is a chips control. I'm not sure if it's OK to link to 3rd party controls, but this is a fairly common control that is available on multiple platforms. I can provide some samples if required.

Completed

Last Updated: 14 May 2020 08:39 by ADMIN

Release 2.10.0

ListView component

Created by: shanthu

Comments: 0

Category: UI for Blazor

Type: Feature Request

ListView component

I would like a simple list with templates for my items. Much like the grid, but not confined to cells and rows.

Completed

Last Updated: 14 May 2020 08:38 by ADMIN

Release 2.13.0

Side navigation component (like a Drawer)

Created by: James

Comments: 6

Category: UI for Blazor

Type: Feature Request

Side navigation component (like a Drawer)

Please add a side navigation bar for Blazor.

Completed

Last Updated: 11 May 2020 12:08 by ADMIN

Release 2.13.0

Dropdown components to calculate their dropdown element width to match the actual width of the component in px when PopupWidth is not set

Created by: Sten

Comments: 5

Category: UI for Blazor

Type: Feature Request

Dropdown components to calculate their dropdown element width to match the actual width of the component in px when PopupWidth is not set

ADMIN EDIT: see the title and the discussion on how this would be handled, it is not going to be a separate property.

As in e.g. WPF/UWP, it would be convenient to get the "actual width" of a component in order to arrange other elements to follow the same width (or height).

Consider a TelerikDropDownList with Width="100%" and I want the PopupWidth to have same width (PopupWidth="100%" will not result in same).

                <TelerikDropDownList Width="100%" PopupWidth="@(Dropdown?.Width)" @ref="Dropdown" DefaultItem="@(new Country{Name ="Select..."})"  Data="@Countries" ValueField="Abbreviation" TextField="Name" PopupHeight="400px" @bind-Value="@Employee.ContactDetails.CountryCode"></TelerikDropDownList>

    public TelerikDropDownList<Country, string> Dropdown { get; set; }

Here, I would like to set PopupWidth as below, to avoid the result in attached image.

PopupWidth="@(Dropdown?.ActualWidth)

Completed

Last Updated: 07 May 2020 10:36 by ADMIN

Release 2.13.0

DateRangePicker

Created by: Gordon

Comments: 1

Category: UI for Blazor

Type: Feature Request

DateRangePicker

Would be great to have a DateRangePicker so I don't have to use JS interop to use my old one

Duplicated

Last Updated: 04 May 2020 13:18 by ADMIN

TelerikTreeView item expandability based on read-only model property or controlled outside

Created by: jura

Comments: 1

Category: UI for Blazor

Type: Feature Request

TelerikTreeView item expandability based on read-only model property or controlled outside

Now we can expand/collapsed tree view item using bound read/write model property.

We need to bind read-only property or controll expandability outside of tree view.

Examples:

Expand tree view item when IsActive read-only model property is true
Expand/collapse all tree items with a button click

Thank you

Duplicated

Last Updated: 04 May 2020 13:16 by ADMIN

TelerikWindow hidden under TreeViewItem

Created by: jura

Comments: 1

Category: UI for Blazor

Type: Bug Report

TelerikWindow hidden under TreeViewItem

When a content is displayed in TelerikWindow and a TelerikTreeView`s item is expanded, the item`s content is above the window one due to higher z-index.

To fix it, use this CSS:

/* Telerik window content (with z-index 10001) above their animation container (with z-index 10002, used for example in tree view) */
.k-dialog-wrapper {
z-index: 11000;
}

Completed

Last Updated: 01 May 2020 08:03 by ADMIN

I'm getting an error - not always, but sometimes

Created by: Boštjan

Comments: 4

Category: UI for Blazor

Type: Bug Report

I'm getting an error - not always, but sometimes

Completed

Last Updated: 27 Apr 2020 09:42 by ADMIN

Release 2.13.0

Using OnStateInit with SelectedItems throws a null reference when the collection is initialized with Enumerable.Empty

Created by: Toni

Comments: 1

Category: UI for Blazor

Type: Bug Report

Using OnStateInit with SelectedItems throws a null reference when the collection is initialized with Enumerable.Empty

Does not seem to be an issue when the grid state is not used.

Declined

Last Updated: 27 Apr 2020 07:36 by ADMIN

Support .Net Core gRPC feature within the component

Created by: Ben Hayat

Comments: 6

Category: UI for Blazor

Type: Feature Request

Support .Net Core gRPC feature within the component

Admin edit: While this cannot become a built-in feature, you may find useful the following example: https://github.com/telerik/blazor-ui/tree/master/common/grpc-example

Hello Team;

As .Net Core 3 offers gRPC support, I'm suggesting that the Blazor Team, look into some of the components that could automatically talk to backend gRPC services to get data, i.e. Auto Complete or DropDown box.

This way it could simplify different ways of providing datasource to some of these data oriented components.

Hope this suggestion helps!
..Ben

Completed

Last Updated: 07 Apr 2020 17:46 by ADMIN

Horizontal scrolling in Blazor grid does not respect set column width

Created by: Manuel

Comments: 3

Category: UI for Blazor

Type: Bug Report

Horizontal scrolling in Blazor grid does not respect set column width

According to the doc (https://docs.telerik.com/blazor-ui/components/grid/columns/width),

"When all column widths are explicitly set and the cumulative column width is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected."

I have a grid with a width of 1500px and a cumulative column width of 1750 pixels:

<TelerikGrid Data="@datos"
Class="ns-grid-fitxatges"
PageSize="10"
Pageable="true"
Sortable="true"
Width="1500px"
Height="60vh">
<GridColumns>
<GridColumn Field="@nameof(LlistaFitxatgesDto.CodiInternActivitat)" Title="Codi Intern" Width="150px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.CodiExternActivitat)" Title="Codi Extern" Width="250px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.Activitat)" Width="300px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.HoraFitxatge)" Title="@Loc["Fitxatge"]" Width="150px">
<Template>
@{
var hora = (context as LlistaFitxatgesDto).HoraFitxatge.DateTime;
<span>@hora.ToString("dd/MM/yyyy HH:mm:ss")</span>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(LlistaFitxatgesDto.Sessio)" Title="@Loc["Sessió"]" Width="180px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.Sentit)" Title="@Loc["Sentit"]" Width="80px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.TipusDocument)" Title="@Loc["DOC"]" Width="70px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.DocParticipant)" Title="@Loc["Document"]" Width="90px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.Nom)" Title="@Loc["Nom"]" Width="90px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.Cognom1)" Title="@Loc["Cognom1"]" Width="90px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.Cognom2)" Title="@Loc["Cognom2"]" Width="90px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.Metode)" Title="@Loc["Metode"]" Width="80px" />
<GridColumn Field="@nameof(LlistaFitxatgesDto.RutaXml)" Title="XML" Width="60px">
<Template>
@{
var ruta = (context as LlistaFitxatgesDto).RutaXml;
<a href="@ruta">XML</a>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(LlistaFitxatgesDto.Terminal)" Title="Terminal" Width="70px" />
</GridColumns>
</TelerikGrid>

The horizontal scroll bar appears all right, but the column widths are not respected. As shown in the image, the columns on the right are squeezed

Any clues?

Thanks in advance

Duplicated

Last Updated: 06 Apr 2020 16:03 by ADMIN

Crash when filtering TreeView

Created by: Simon

Comments: 1

Category: UI for Blazor

Type: Bug Report

Crash when filtering TreeView

Using your tree view live sample, filter the list with "1", then try to expand "Test1" - crash.

I would expect "Test1" to apprear in the list but without the expandable icon or the expandable icon does nothing when clicked

Duplicated

Last Updated: 22 Mar 2020 08:23 by ADMIN

Controls Are Not Holding Their Values @ 2.9.0

Created by: Uluç

Comments: 4

Category: UI for Blazor

Type: Bug Report

Controls Are Not Holding Their Values @ 2.9.0

Hello,

I have updated Blazor UI to the latest version (2.9.0) and some of my controls lost their state.

Let me explain:

I have a page with 4 tabs (TelerikTabStrip), if i choose the value of a dropdown (TelerikDropDown) in the first tab and move to the second tab and then come back to the first tab, the value would be lost and the dropdown is empty however, if i put a breakpoint and look at the model, it shows that the value is still preserved.

Is there something i am missing? is this an update gone wrong (on my side)?

I have downgraded back to 2.8.0 and it works as expected.

Thanks.

Declined

Last Updated: 20 Mar 2020 17:23 by ADMIN

Document CSS classes and use of Bootstrap support

Created by: Jon

Comments: 7

Category: UI for Blazor

Type: Feature Request

Document CSS classes and use of Bootstrap support

The CSS classes used by Blazor UI are not documented. (I haven't looked outside the Blazor area, so maybe it's somewhere else in the docs? My team has no need for other Telerik products.) On a similar note, the Themes page in the documentation explains how to reference alternate themes like Bootstrap, but it doesn't explain how to actually use the classes, or how it integrates with the real Bootstrap CSS, which have many various useful, well-known utilities like margin and padding settings, which don't seem to be part of the Telerik theme support. (I'm an architect at a very large corporation, we do have one of those includes-everything DevCraft licenses, I just can't log in with that account.)

Completed

Last Updated: 18 Mar 2020 11:30 by ADMIN

Release 2.9.0

Upload Async

Created by: Loren

Comments: 3

Category: UI for Blazor

Type: Feature Request

Upload Async

One of the controls i find myself using a lot it the Async Uploaders. Since this curently requires a far amount of JS to get working in Blazor i would love to see it added so i dont have to write and manage all the JS.

Duplicated