As a developer user, I need to add a Markdown Editor control to my Blazor UI application so that I can capture and display markdown-compliant text input.
Grid errors with both filtering and a detail template:
<Telerik.Blazor.Components.TelerikGrid Data="@GridData" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow">
<GridColumns>
<Telerik.Blazor.Components.GridColumn Title="Name" Filterable="true" Field="@nameof(GridItem.Name)"></Telerik.Blazor.Components.GridColumn>
<Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Id)" Filterable="true" Title="Id"></Telerik.Blazor.Components.GridColumn>
</GridColumns>
<DetailTemplate>
<div>Custom Template</div>
</DetailTemplate>
</Telerik.Blazor.Components.TelerikGrid>
@code {
List<GridItem> GridData { get; set; } = new List<GridItem>();
protected override void OnInitialized()
{
GridData = GenerateData();
}
private List<GridItem> GenerateData()
{
List<GridItem> data = new List<GridItem>();
for (int i = 0; i < 5; i++)
{
GridItem mdl = new GridItem { Id = i, Name = $"Name {i}" };
data.Add(mdl);
}
return data;
}
public class GridItem
{
public int Id { get; set; }
public string Name { get; set; }
}
}
The grid renders correctly with either the DetailTemplate or FilterMode, but not both.
Example repo - https://github.com/kviiim/BlazorDetailTemplateGridFilterIssue
-Ben
Looking for the TreeList control from kendo-ui to be brought over from jQuery to Blazor https://www.telerik.com/kendo-ui/treelist
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 :
@inherits LayoutComponentBase
This error appears after update 15, in 14.1 it works correctly.
ADMIN EDIT:
This error occurs from the FilterMode set to FilterRow. As a workaround, until the fix is implemented, you could use the FilterMenu instead.
Regards
blazor.server.js:15 [2020-06-30T23:44:51.768Z] Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
at System.Collections.Generic.List`1.get_Item(Int32 index)
at Telerik.Blazor.Components.Grid.GridCellBase`1.get_Column()
at Telerik.Blazor.Components.Grid.GridCellBase`1.get_BoundColumn()
at Telerik.Blazor.Components.Grid.GridFilterCell`1.get_BoundColumnFilterCellTemplate()
at Telerik.Blazor.Components.Grid.GridFilterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(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()
build.config showing in project as a linked file......
linked path: :\Users\User\.nuget\packages\telerik.ui.for.blazor\2.15.0\contentFiles\any\netstandard2.1\build.config
content:
<?xml version="1.0" encoding="utf-8"?> <configuration> <packageSources> <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" /> <add key="LocalNuget" value="D:\Jenkins\Workspace\Blazor-Package\nugets" /> </packageSources> </configuration>
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;
}
}"
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]
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