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
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)
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:
Thank you
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) */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
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"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
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