Our application has, on many pages, complex business logic to enable or disable specific cells based upon the viewing mode, the user's capabilities, the type of data in the row, etc. If a cell is to be disabled, we also want to change the background color.. This is easily accomplished with the OnCellRender property.
However, we cannot enable/disable specific cells within a column without creating a column template with conditional logic. And so, in all our grids, EVERY column has to have a template, just for that trivial function. And now we have business logic smeared across both the razor page and the code page.
A template should be required only if you are doing something unusual or exceptional. Setting a cell to be enabled or disabled is completely routine, and one should not have to create a template just for that.
If you would add a property such as OnCellEnable, to override the column Enabled property on a per-cell basis, it would be extremely useful and would eliminate the need for literally hundreds of templates.
Thanks
I am trying to display a related virtual entity from an object in Grid. The List of objects is loaded using Entity Framework Core. I am certain that the related entities are loaded;
The transactions object that is returned ultimately to the TelerikGrid.Data definitely contain the related fields (checked with breakpoint).
<TelerikGrid @ref="@SafexTransactionGrid"
Data=@SafexContractTransactionGridData
ConfirmDelete="true"
Pageable="true"
Groupable="true"
Sortable="true"
FilterMode="GridFilterMode.FilterMenu"
Resizable="true"
Reorderable="true"
EditMode="GridEditMode.Popup"
SelectionMode="GridSelectionMode.Multiple"
PageSize="15"
Navigable="true">
<GridColumns>
...
<GridColumn Field="@nameof(SafexContractTransaction.Trader.Name)" Title="Trader Name" Editable="false"/>
...
</GridColumns>
</TelerikGrid>
@code {
private List<SafexContractTransaction> SafexContractTransactionGridData
{
get
{
// returns all the data including populated Trader property
return FourtyTwoUnitOfWork.SafexContractTransactionRepo.GetAll(SafexContractGrid.SelectedItems);;
}
}
}
private TelerikGrid<SafexContractTransaction> SafexTransactionGrid { get; set; }
}
Yet when the grid is displayed it does not contain the property.
How can I solve this?
Hi Support,
I found a bug that Telerik grid filter for blazor on web assembly version not working for dynamic datasource. While the server one work just fine. Please see the video for more detail. I am also attach the two solution for your investigation.
https://www.loom.com/share/c876a98500ea4a8fbacd3aa30179485d
This same peice of code work in Server version but not for client version
<TelerikRootComponent>
<TelerikGrid Data="@GridData"
Height="350px"
Sortable="true"
Pageable="true"
SortMode="@SortMode.Single"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
PageSize="10">
<GridColumns>
<GridColumn Field="Col1" Width="80px" Locked="true" />
<GridColumn Field="Col2" Width="140px" />
</GridColumns>
</TelerikGrid>
</TelerikRootComponent>
@code { public List<dynamic> GridData = new List<dynamic>();
protected async override Task OnInitializedAsync()
{
for (int i = 1; i < 10; i++)
{
dynamic row = new ExpandoObject();
row.Col1 = $"col1_{i}";
row.Col2 = $"col2_{i}";
GridData.Add(row);
}
} }
Please help me fix this issue ASAP as our product need this filter to ship the release.
Thanks
Huy Nguyen
Hello,
The Grid header and data cells become misaligned if the user changes the page zoom level. The right padding of the Grid header area resizes, according to the zoom level, but the scrollbar width remains the same. This triggers the misalignment.
The problem disappears after browser refresh at the current zoom level.
AutoFitting all columns should not leave blank space in the Grid, the last column should take the available space.
This functionality might be triggered by a setting a bool parameter to true.
Hi,
I am using a grid on a data structure that has nested properties inside. Previously, I was able to do this which worked fine: (notice the first 2 colums)
<TelerikGrid Data="@PackedInfo.PackedParts" Height="100%">
<GridColumns>
<GridColumn Field=@nameof(PackedPart.Part.PartNo) Title="Part no" />
<GridColumn Field=@nameof(PackedPart.Part.PartDescription) Title="Description" />
<GridColumn Field=@nameof(PackedPart.UnitWeightG) Title="Substance Weight" />
<GridColumn Field=@nameof(PackedPart.FlashPointCentigrade) Title="Flash point" />
<GridColumn Field=@nameof(PackedPart.Pg) Title="PG" />
<GridColumn Field=@nameof(PackedPart.Qty) Title="PG" />
</GridColumns>
</TelerikGrid>
I recently upgraded to the latest version (Telerik.UI.for.Blazor (2.29.0) and noticed that the first 2 fields are no longer displaying. I fixed this, by specifying the field names as string values:
<TelerikGrid Data="@PackedInfo.PackedParts" Height="100%">
<GridColumns>
<GridColumn Field="Part.PartNo" Title="Part no" />
<GridColumn Field="Part.PartDescription" Title="Description" />
<GridColumn Field=@nameof(PackedPart.UnitWeightG) Title="Substance Weight" />
<GridColumn Field=@nameof(PackedPart.FlashPointCentigrade) Title="Flash point" />
<GridColumn Field=@nameof(PackedPart.Pg) Title="PG" />
<GridColumn Field=@nameof(PackedPart.Qty) Title="PG" />
</GridColumns>
</TelerikGrid>
I have also tried using @nameof(Part.PartNo) but that didn't work either. Only providing nested properties as string values works. This should not be the intended behaviour i'm sure?
regards,
Chris Nateghi
I am using Dutch culture and the following issue occurs when resizing - the edit button jumps to the end and back again.
----
ADMIN EDIT
The Excel export seems to honor it, so it can be used as a workaround.
Reproducible with the workaround commented out:
<TelerikButton OnClick="@CurrentPage">Current Page</TelerikButton>
<TelerikButton OnClick="@AllPages">All Pages</TelerikButton>
<TelerikGrid Data="@GridData"
@ref="@GridRef"
Pageable="true"
Sortable="true"
Resizable="true"
Reorderable="true"
FilterMode="@GridFilterMode.FilterRow"
Groupable="true">
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
async Task AllPages()
{
ExportAllPages = true;
await Task.Delay(20); // allow the component to rerender with the new parameter
await GridRef.SaveAsCsvFileAsync();
//await GridRef.SaveAsExcelFileAsync(); // this works
}
async Task CurrentPage()
{
ExportAllPages = false;
await Task.Delay(20); // allow the component to rerender with the new parameter
await GridRef.SaveAsCsvFileAsync();
//await GridRef.SaveAsExcelFileAsync(); // this works
}
private TelerikGrid<SampleData> GridRef { get; set; }
List<SampleData> GridData { get; set; }
bool ExportAllPages { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
{
ProductId = x,
ProductName = $"Product {x}",
UnitsInStock = x * 2,
Price = 3.14159m * x,
Discontinued = x % 4 == 0,
FirstReleaseDate = DateTime.Now.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int UnitsInStock { get; set; }
public decimal Price { get; set; }
public bool Discontinued { get; set; }
public DateTime FirstReleaseDate { get; set; }
}
}
Hello,
If the Grid has X columns at first, and then it renders Y more columns, the new Y columns will not be resizable. Here is a test page.
A possible workaround is to define all columns initially, but hide some of them with Visible="false".
This worked in 2.29 and broke in 2.30.
Hi, how to show a pointer cursor while mouse over the group arrow icon? I could probably set style="cursor: pointer", but just wondering if there is any other approach. Thanks.
https://blazorrepl.telerik.com/QGadEnbT24qbDh1G49
If the window component does not implement a Width parameter, it will seem like docked to right when dragging. The issue stems from the update of top and left styles while the width of the component grows with them.
1. Open the repl
2. Initiate dragging
**Workaround**
Set the Width parameter of the Window component
Hello,
My Grid is setting filters in OnStateInit. Then, the filters are cleared via GridRef.SetState(null)
This used to work until 3.0.1, but not in 3.1.0. Here is a test page:
https://blazorrepl.telerik.com/mmEdFnvA31osNnjO20Column resizing does not work correctly together with filter row and detail template.
Resize the second or the third column to any direction. The first column will shrink to the same width, as the expand column.
This broke in version 2.24.
<TelerikGrid FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Data="@GridData"
Resizable="true">
<DetailTemplate>
detail template
</DetailTemplate>
<GridColumns>
<GridColumn Field="Id" />
<GridColumn Field="Id" Title="Resize Me First" />
<GridColumn Field="Id" Title="Resize Me First" />
</GridColumns>
</TelerikGrid>
@code {
List<GridModel> GridData { get; set; }
protected override void OnInitialized()
{
List<GridModel> data = new List<GridModel>();
for (int i = 1; i <= 3; i++)
{
data.Add(new GridModel { Id = i });
}
GridData = data;
}
public class GridModel
{
public int Id { get; set; }
}
}
Grouping by a nested (child) Grid column is not possible in OnStateInit.
A possible workaround is to group in OnAfterRenderAsync.
@using Telerik.DataSource
<TelerikGrid Data=@GridData @ref="TheGrid"
Groupable="true"
OnStateInit="@((GridStateEventArgs<User> args) => OnStateInitHandler(args))">
<GridColumns>
<GridColumn Title="Personal Information">
<Columns>
<GridColumn Field=@nameof(User.LName) Title="Last Name" />
<GridColumn Field=@nameof(User.FName) Title="First Name" />
</Columns>
</GridColumn>
<GridColumn Title="Status and Last Login">
<Columns>
<GridColumn Field=@nameof(User.StatusName) Title="StatusName" />
<GridColumn Field=@nameof(User.LastLoginDate) Title="Last Login" DisplayFormat="{0:yyyy-MMM-dd}" />
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<User> TheGrid { get; set; }
List<User> GridData { get; set; }
protected override void OnInitialized()
{
var data = new List<User>();
for (int i = 1; i <= 20; i++)
{
data.Add(new User()
{
Id = i,
FName = "First Name " + i,
LName = "Last Name " + i,
StatusId = i * 123,
LastLoginDate = DateTime.Now,
StatusName = "Status Name " + (i % 5 + 1)
});
}
GridData = data;
}
private void OnStateInitHandler(GridStateEventArgs<User> args)
{
GridState<User> desiredState = new GridState<User>()
{
GroupDescriptors = new List<GroupDescriptor>()
{
new GroupDescriptor()
{
Member = nameof(User.StatusName),
MemberType = typeof(string)
}
}
};
// will trigger an exception if grouping by a nested column
args.GridState = desiredState;
}
@*protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var desiredState = TheGrid.GetState();
desiredState.GroupDescriptors = new List<GroupDescriptor>()
{
new GroupDescriptor()
{
Member = nameof(User.StatusName),
MemberType = typeof(string)
}
};
await TheGrid.SetState(desiredState);
}
await base.OnAfterRenderAsync(firstRender);
}*@
public class User
{
public long Id { get; set; }
public int StatusId { get; set; }
public string StatusName { get; set; }
public string FName { get; set; }
public string LName { get; set; }
public DateTime LastLoginDate { get; set; }
}
}