We would like to see this functionality:
Stacked Header like in https://blazor.syncfusion.com/demos/datagrid/stacked-header?theme=bootstrap4
Please add a feature to export the grid to Microsoft Word file
---
ADMIN EDIT:
I am attaching a sample to this post that you can use to generate the docx file through the Telerik Document Processing libraries by looping over the data.
You can extend it further (add more fields, refactor so it is more reusable, extract to service,...) and if you would like to export the current grid data, see about implementing the data operations manually through the OnRead event - you can cache the DataSourceRequest object and then run a .ToDataSourceResult() query on the data to get what the grid displays on its current page. An example of a similar approach is available here for a customized excel export.
You can also read more about working with tables in a Word document here to apply more styling options as needed.
---
Currently, the empty cells in the exported Excel file contain zero-length strings. As a result, the ISBLANK() function returns false for them while the cells essentially do not have content.
Please allow the empty Grid cells to be treated as blank in the exported Excel file.
===
ADMIN EDIT
===
For the time being, you may extend the formula to also check whether the length of the cell content is 0. For that purpose, you may use the LEN() function as suggested here: https://learn.microsoft.com/en-us/office/troubleshoot/excel/isblank-function-return-false#workaround.
The `Context` of `<GridColumn>` is of type `object`, requiring typecasting in order to use the value.
Instead, make `<GridColumn>` generic so that `Context` is strongly typed. If you use `TItem` as the name for the generic then Blazor will infer it without the user having to specify it.
At the moment, the CollapsedGroups collection in the grid state is the indexes of the root-level groups that you can collapse. I want to also be able to control the expanded state of nested groups.
ADMIN EDIT:
Ideas I can see are the following, do add your vote and comments on how you expect that to be exposed:
When I have a grid with Reordable=true and a ComboBox in the HeaderTemplate, I cannot click in the combo box because the reordable functionality prevents it.
---
ADMIN EDIT
This could be exposed through a data- attribute that you could add to your DOM elements so that the grid can know to skip them, for example:
<TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterMenu" Reorderable="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
<HeaderTemplate>
Continent <br />
<div style="text-align:center">Id</div>
<div @onclick:stopPropagation="true" data-draggable="false">
<TelerikComboBox Data="@Continents" Filterable="true" class="headerCombo"
@bind-Value="@SelectedContinentId"
TextField="@nameof(Continent.Name)" ValueField="@nameof(Continent.Id)" Id="MyId">
</TelerikComboBox>
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
</GridColumns>
</TelerikGrid>
@code {
/* Grid */
string result { get; set; }
void DoSomething()
{
result = $"button in header template clicked on {DateTime.Now}, something happened";
}
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime HireDate { get; set; }
}
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
{
ID = x,
Name = "name " + x,
HireDate = DateTime.Now.AddDays(-x)
});
/* ComboBox */
public class Continent
{
public int Id { get; set; }
public string Name { get; set; }
}
IEnumerable<Continent> Continents = new List<Continent>() { new Continent { Id = 1, Name = "Africa" }, new Continent { Id = 2, Name = "Asia" }, new Continent { Id = 3, Name = "South America" } };
public int SelectedContinentId { get; set; } = 1;
}
---
I am trying to get the currently filtered data out of the grid as per this KB article and I want to include the searchbox filters. I do not, however, want to use OnRead but I want to get the grid state on a click of a button and get the filters plus the searchbox filters from it instead.
---
ADMIN EDIT
Here is a sample of getting those filters through the OnRead event without using remote operations - all the data is in the view model (the SourceData field) so this does not change the way operations happen compared to not using OnRead.
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@( new MarkupString(output) )
<br />
<TelerikButton OnClick="@GetFilters">Get Filters</TelerikButton>
<TelerikGrid Data=@GridData TotalCount=@Total OnRead=@ReadItems
FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true EditMode="@GridEditMode.Inline">
<GridToolBar>
<GridSearchBox />
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(Employee.ID) />
<GridColumn Field=@nameof(Employee.Name) Title="Name" />
<GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<Employee> GridRef { get; set; }
string output { get; set; }
public DataSourceRequest CurrentRequest { get; set; }
void GetFilters()
{
output = string.Empty;
foreach (var item in CurrentRequest.Filters)
{
if (item is FilterDescriptor) // filter row
{
FilterDescriptor currFilter = item as FilterDescriptor;
output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}<br />";
}
if (item is CompositeFilterDescriptor) // filter menu
{
CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor;
output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:<br />";
// there will actually be 1 or 2 only, this showcases the concept and the types
foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors)
{
output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}<br />";
}
output += "END nested filter<br />";
}
}
}
public List<Employee> SourceData { get; set; }
public List<Employee> GridData { get; set; }
public int Total { get; set; } = 0;
protected override void OnInitialized()
{
SourceData = GenerateData();
}
protected async Task ReadItems(GridReadEventArgs args)
{
CurrentRequest = args.Request;
var datasourceResult = SourceData.ToDataSourceResult(args.Request);
GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
Total = datasourceResult.Total;
StateHasChanged();
}
//This sample implements only reading of the data. To add the rest of the CRUD operations see
//https://docs.telerik.com/blazor-ui/components/grid/editing/overview
private List<Employee> GenerateData()
{
var result = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 100; i++)
{
result.Add(new Employee()
{
ID = i,
Name = "Name " + i,
HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
});
}
return result;
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime HireDate { get; set; }
}
}
---
We often have grid data with a widely varying quantity of cell content from row to row. We usually present this with constant row height initially to have as much row overview as possible at a glance.
Grabbing the row divider line and individually make it larger or even double click on it to fit the size would be very useful for users.
When you set widths to some columns in the grid, the rest of the columns stretch to accommodate the rest of the width. Thus, the row drag column can stretch and become unexpectedly wide. A screenshot of the problem is attached.
Perhaps the GridRowDraggableSettings could have a parameter for the width of the draggable column.
<AdminEdit>
As a workaround you can use some CSS to set a width for the Drag column:
<style>
.custom-row-draggable-col-width.k-grid .k-drag-col {
width: 100px;
}
</style>
<TelerikGrid Data="@MyData" Height="400px"
Class="custom-row-draggable-col-width"
Pageable="true"
Resizable="true"
Reorderable="true"
RowDraggable="true"
OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnRowDropHandler(args))">
<GridSettings>
<GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
</GridSettings>
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
private void OnRowDropHandler(GridRowDropEventArgs<SampleData> args)
{
//The data manipulations in this example are to showcase a basic scenario.
//In your application you should implement them as per the needs of the project.
MyData.Remove(args.Item);
var destinationItemIndex = MyData.IndexOf(args.DestinationItem);
if (args.DropPosition == GridRowDropPosition.After)
{
destinationItemIndex++;
}
MyData.Insert(destinationItemIndex, args.Item);
}
public List<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
</AdminEdit>
===ADMIN EDIT===
Currently, we use groups for calculating all aggregates in Grid. We can optimize the process so that when there are no groups, specific aggregates are still calculated.
When I define a bigger number of MultiColumn Header the rendering performance of the Grid component quickly deteriorates.
I would like an improvement in this regard.
I would like the grid and treelist to honor the DisplayFormatAttribute.NullDisplayText Property so I don't have to use cell templates to change what null values render.
I want to be able to use interfaces and models that are created from a service when working with the grid. A parameterless constructor is not enough for me, I need to be able to instantiate models in a more complex manner.
---
ADMIN EDIT
The tentative event name I have put in the title might vary when the implementation is researched. The goal would still be the same - the grid to provide an event when it needs an instance of the model so you can provide it with one. At the moment this happens when a row enters edit mode, when the filter list needs to be built, and when you are inserting an item (a caveat with the last one might be the OnClick event for the command button - the new event might have to fire before OnClick so it can give you the model).
---
Consider the following example. It will trigger AmbiguousMatchException, because reflection discovers two SpecialProp properties.
<TelerikGrid TItem="@GridModel"
Data="@GridData"
AutoGenerateColumns="true">
</TelerikGrid>
@code {
List<GridModel> GridData { get; set; } = new();
protected override void OnInitialized()
{
for (int i = 1; i <= 3; i++)
{
GridData.Add(new GridModel()
{
SpecialProp = i,
Text = "Text " + (i * 111)
});
}
}
public record GridModel : Base1 { }
public record Base1 : Base2
{
public new decimal? SpecialProp { get => base.SpecialProp / base.HelperProp.GetValueOrDefault(1); set => base.SpecialProp = value.HasValue ? (int)(value.GetValueOrDefault() * base.HelperProp.GetValueOrDefault(1)) : null; }
}
public record Base2
{
public int? SpecialProp { get; set; }
public string Text { get; set; }
public int? HelperProp = 10;
}
}
Why not replace
private PropertyInfo FieldPropertyInfo => ContainerGenericArgument?.GetProperty(Field);
with something like
PropertyInfo FieldPropertyInfo = ContainerGenericArgument?.GetProperties().FirstOrDefault(p => p.Name == Field);
with the possibility to cache the result from GetProperties()?