I have the following page:
@page "/test"
@using System.Collections.ObjectModel
<TelerikToolBar Class="toolbar-size" Adaptive="false">
<ToolBarButton Icon="@SvgIcon.FileAdd" OnClick="@OnAdd">Add</ToolBarButton>
</TelerikToolBar>
<TelerikSplitter Height="500px">
<SplitterPanes>
<SplitterPane Size="20%" Collapsible="true">
<TelerikTreeView Data="@Items" @bind-CheckedItems="@CheckedItems"
CheckBoxMode="TreeViewCheckBoxMode.Multiple">
<TreeViewBindings>
<TreeViewBinding ParentIdField="ParentIdValue"></TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
</SplitterPane>
<SplitterPane Collapsible="true">
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
@code {
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentIdValue { get; set; }
public bool HasChildren { get; set; }
public ISvgIcon Icon { get; set; }
}
public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();
public IEnumerable<object> CheckedItems { get; set; } = new List<object>();
private int counter;
private void OnAdd()
{
this.Items.Add(new TreeItem { Id = counter, Text = $"test {counter}" });
counter++;
}
}
If I add some items with the add button, then check some items, and then add some more items, the check state seems to be lost.
However, if I collapse and expand the split panel, the items get checked again.
Is this a bug, or what am I doing wrong?
<QuickGrid Items="@_Items" ItemKey="(item) => item.Guid" Theme="">
I have the below code that I was hoping would show the hint above the {getting Started] drawer item when user puts mouse over it.
But to no hope. :( didnt work.
What am I doing wrong?
}
Hi
Are there any plans on improving the performance on the default export to excel from a Telerik grid using Blazor Wasm?
As seen in this example:
https://docs.telerik.com/blazor-ui/components/grid/export/excel#basics
<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
FilterMode="@GridFilterMode.FilterRow" Groupable="true" >
<GridToolBarTemplate>
<GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBarTemplate>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
Columns..
</GridColumns>
</TelerikGrid>
At the moment we have about 150 columns and 4000 rows that needs to be exported which takes quite a while.
If not what are your recommendations in speeding up the excel export?
I have a Telerik Grid and EditForm side-by-side on a page. The EditForm displays the selected object upon clicking a grid row. Below is an excerpt of my custom form component.
@typeparam TEntity where TEntity : class, IEntity, new()
<div>
<TelerikGrid
@ref="GridRef"
Pageable="true"
Sortable="true"
Resizable="true"
ShowColumnMenu="true"
Reorderable="true"
PageSize="50"
SelectionMode="@GridSelectionMode.Single"
SelectedItems="@_selectedItems"
SelectedItemsChanged="@((IEnumerable<TEntity> list) => OnGridSelectedItemsChanged(list))"
OnRowClick="@OnGridRowClick"
OnRead="GetGridData"
EnableLoaderContainer="true">
@* toolbar, columns, etc. *@
</TelerikGrid>
<EditForm EditContext="@_editContext" OnSubmit="OnSubmitAsync">
<TelerikDateTimePicker Placeholder=" "
Value="(DateTime?)PropertyValue"
ValueExpression="ValueExpression<DateTime?>()"
ValueChanged="(DateTime? val) => OnValueChanged(val)"
Readonly="true">
</TelerikDateTimePicker>
</EditForm>
</div>
@code {
private EditContext? _editContext;
private IEnumerable<TEntity> _selectedItems = Enumerable.Empty<TEntity>();
private TEntity? _selectedItem;
[CascadingParameter] public TEntity? Entity { get; set; }
protected override void OnInitialized()
{
_editContext = new(Entity);
_editContext.OnFieldChanged += OnFieldChanged!;
}
// Override the grid's built-in row selection by handling the SelectedItemsChanged event. Do not execute any logic in it to let the OnGridRowClick handle the selection.
// https://docs.telerik.com/blazor-ui/knowledge-base/grid-select-or-deselect-item-on-row-click
private void OnGridSelectedItemsChanged(IEnumerable<TEntity> selectedList)
{
}
private async Task OnGridRowClick(GridRowClickEventArgs args)
{
var currItem = args.Item as TEntity;
if (currItem?.Id == _selectedItem?.Id) return;
var discardChanges = await ConfirmDiscardFormChangesAsync();
if (!discardChanges) return;
_selectedItems = new[] { currItem };
_selectedItem = _selectedItems.First();
}
private async Task OnValueChanged(object? value)
{
// not getting fired when grid's selected item is changed, which is good
}
private void OnFieldChanged(object sender, FieldChangedEventArgs args)
{
// gets fired when grid's selected item is changed
// _editContext.IsModified() is true here
}
}
Whenever the form displays an item upon clicking a different row with DateTime field value different from the previously selected one, the EditContext's IsModified() becomes true. This is not the case when I replace the TelerikDateTimePicker with Blazor's InputDate component.
I attempted to develop a versatile grid component for Blazor to facilitate reusability.
@typeparam TItem
<TelerikGrid Data="Data" SelectionMode="GridSelectionMode.Multiple"
Pageable="true" PageSize="3" Page="1"
Sortable="true" SortMode="@SortMode.Multiple"
FilterMode="GridFilterMode.FilterMenu"
EditMode="@GridEditMode.Popup"
Resizable="true" Reorderable="true" ConfirmDelete="true">
<GridSettings>
<GridValidationSettings Enabled="true"></GridValidationSettings>
<GridPopupEditSettings MaxWidth="600px"
MaxHeight="300px"
Class="custom-popup"
Title="Update Details">
</GridPopupEditSettings>
<GridPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
ButtonsLayout="FormButtonsLayout.Center"
Columns="3">
</GridPopupEditFormSettings>
</GridSettings>
<GridToolBarTemplate>
<GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileCsv">Export to Excel</GridCommandButton>
<GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
</GridToolBarTemplate>
<GridExport>
<GridExcelExport FileName="EmployeeDetails Sheet" AllPages="true" />
</GridExport>
<GridColumns>
@GridCols
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code
{
[Parameter]
public IEnumerable<TItem>? Data{get; set;}
[Parameter]
public RenderFragment<TItem>? GridCols { get; set; }
}
@page "/emp"
@inject HttpClient Http
@using System.Text.Json;
<h1>Employee Details</h1>
@if (employees == null)
{
<p><em>Loading...</em></p>
}
else
{
<GenericGrid TItem="EmpDetails" Data="@employees">
<GridCols>
<GridColumn Field="@nameof(EmpDetails.Name)" Title="Employee Name" />
<GridColumn Field="@nameof(EmpDetails.Age)" Title="Age" />
<GridColumn Field="@nameof(EmpDetails.Place)" Title="Place" />
</GridCols>
</GenericGrid>
}