<TelerikGrid Data="@GridData"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
SelectionMode="@GridSelectionMode.Multiple"
@bind-SelectedItems="SelectedItems">
<GridColumns>
<GridCheckboxColumn Width="35px"/>
<GridColumn Field="@(nameof(Data.Name))" />
</GridColumns>
</TelerikGrid>
@code{
public class Data
{
public string Name { get; set; }
}
public List<Data> GridData { get; set; }
public IEnumerable<Data> SelectedItems { get; set; }
protected override void OnInitialized()
{
GridData = new List<Data>();
SelectedItems = new List<Data>();
GridData.Add(new Data{Name="abc"});
GridData.Add(new Data{Name="abe"});
GridData.Add(new Data{Name="xyz"});
}
}1. Filter the above grid by "abc" (the filtered grid will display "abc" correctly as the only entry)
2. Click into the "SelectAll" Checkbox (SelectedItems will wrongly contain "abc" AND "abe" !!!)
3. Click on "ClearFilter" Button --> the grid will display both "abc" and "abe" as selected !!!
It might be an indexing problem because the "SelectAll" Logic always seems to ignore the last character of the search string while the filtering of the display takes all characters into account.
This bug has cost be many hours and stomach pain! Please let me know, if this will be fixed soon. If not I will have to implement my own filtering (which makes me wonder why I'm using Telerik UI).
I have a grid that i use to display a number of different items with, some that have the need to display child or hierarchical grids, and some that don“t.
At the moment, all of the items show the "plus" button to expand the child grid, event though there is nothing there to show.
When a collection is null I think that the "plus" button to expand the hierarchical, or child grid, should be hidden.
Or at least I should be able to hide that button manually by choice.
Regards Magnus.
For example, I'd like something like this:
Field Name: record.TotalSales -> Auto-generated column title: "Total Sales" with inserted space
ADMIN EDIT: See also the idea below about "AutoGeneratedTitles" Func<string, string> property where the user could perform whatever processing they liked upon the default value. Please leave your comment on what approach you would prefer to be exposed.
We would like to see this functionality:
Stacked Header like in https://blazor.syncfusion.com/demos/datagrid/stacked-header?theme=bootstrap4
The null type of operator can cause errors on the backend
*** Thread created by admin on customer behalf ***
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.
---
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:
On initialization of the Grid the oDataString is correct, but when I apply a filter or apply a sort to a Grid column the ToODataString extension method generates an incorrect request URL. If I revert back to 2.16.0 everything works as expected.
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;
}---
When using row virtualization, the visible rows are miscalculated when the browser zoom is used (hold control with mouse scroll).
The result of the miscalculation is that the first row at some point is not visible.
To reproduce the problem you should scroll to the top of the grid and see the first row.
Then start to zoom down and see how the first row is displaced.
Seems like only 50%, 100%, 150%, 200% (multiply of 50%) are calculated correctly in row virtualization
<AdminEdit>
You can reproduce the bug with the attached code.
It's browser-specific and is appearing only in chromium browsers.
It could be related to the way browsers calculate the size of the elements when zooming.
Currently, there is an open bug in the chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1048147&q=component%3AUI%3EBrowser%3EZoom%20height&can=2
</AdminEdit>
The orderby clause only has one column when multicolumn sorting is enabled, you can test it with this sample.
---
ADMIN EDIT
A workaround is to replace the orderby generated by the grid with your own clause that uses the DataSourceRequest to extract all sort descriptors, here's an example:
@using System.Net.Http.Json
@using System.Text.RegularExpressions
@using Telerik.Blazor.Extensions
@using WasmApp.Shared
@inject HttpClient Http
<TelerikGrid Data=@GridData
Height="460px"
RowHeight="60"
PageSize="10"
Pageable="true"
Sortable="true"
FilterMode="@GridFilterMode.FilterRow"
SortMode="@SortMode.Multiple"
OnRead=@ReadItems
TotalCount=@Total>
<GridColumns>
<GridColumn Field="ProductID" />
<GridColumn Field="ProductName" />
<GridColumn Field="Discontinued" />
</GridColumns>
</TelerikGrid>
@code{
public List<ODataProduct> GridData { get; set; } = new List<ODataProduct>();
public int Total { get; set; } = 0;
protected async Task ReadItems(GridReadEventArgs args)
{
var baseUrl = "https://demos.telerik.com/kendo-ui/service-v4/odata/Products?";
string OdataUrl = args.Request.ToODataString();
// replace the original orederby clause with one that contains all the order rules
Regex x = new Regex("(orderby=)(.*?)(&)", RegexOptions.IgnoreCase);
string actualOrderByClause = "orderby=";
for (int i = 0; i < args.Request.Sorts.Count; i++)
{
if (i > 0)
{
actualOrderByClause += ",";
}
string order = args.Request.Sorts[i].SortDirection == Telerik.DataSource.ListSortDirection.Ascending ? "" : "%20desc";
actualOrderByClause += $"{args.Request.Sorts[i].Member}{order}";
}
actualOrderByClause += "&";
string OdataQueryWithMultipleOrder = x.Replace(OdataUrl, actualOrderByClause);
//do the request as usual
var requestUrl = $"{baseUrl}{OdataQueryWithMultipleOrder}";
ODataResponseOrders response = await Http.GetFromJsonAsync<ODataResponseOrders>(requestUrl);
GridData = response.Products;
Total = response.Total;
}
}---
If you set args.IsCancelled=true in any CUD event handler, the loading sign will never go away.
---
ADMIN EDIT
If you don't need to cancel the event (e.g., because remote validation or data operation failed), you should avoid cancelling it - its purpose is to keep the grid in the current mode (edit/insert) when the operation fails so the user does not lose data.
That said, the loading sing should disappear in thsoe cases too, and a workaround is to disable it by setting the EnableLoaderContainer="false" parameter of the grid.
---
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).
---
I have a WASM application and I setup my Grid to use the editor as an editing field in the Grid. When the user types something the application is laggy and it might even hang.
---
ADMIN EDIT
Attached is a sample app that alleviates this a little by using a regular textarea and making editor updates less frequent.
---