At the moment, the focus remains on the cell. It should be in the input so the user does not have to perform an extra action (say, click with the mouse) in order to edit data.
This also applies to inserting a new row - the first cell should be focused.
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;
}---
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.
.png){kind=avatar}
This will let Excel mark the field as a Date and act according to the current culture on the machine that opens the file.
---
ADMIN EDIT:
This feature would let you define custom formats, so you may want to Vote for it and Follow it too: Custom Format for Excel Export per column. It is important to keep in mind that the Excel formats are completely different from the .NET formats.
If this is of high importance for you right now, you could create your own Excel file with the desired settings by following the example from this thread.
---
When I enter edit mode for a cell (I used InCell edit mode), the row height decreases.
*** Thread created by admin on customer behalf ***
Example Repo - https://github.com/benhysell/BlazorGridPagingIssue
tldr - OnRead args do not contain the correct page after restoring state without manual intervention.
Project Setup
- Base Blazor Client/Server template with Weather Forecasts as the data
- Server has a single OData endpoint to return 50 weather forecasts. Each forecast starts with Temperature 0 and adds 1 per row to allow one to know which page they should be on
- Client has two pages configured, 'Paging NOT Working' and 'Paging Work Around'
Steps to Reproduce
- Navigate to 'Page NOT Working', select a page, i.e. page 5, navigate to the Counter page, navigate back to Page NOT Working.
- Grid will show Page 5 in the page selector, however the data being show in from Page 1
- Looking at Chrome 'Network' tab the OData query to obtain data from the backend does not contain proper offset for Page 5 data
- args.Request.Page reports Page 1, however the state of the Grid was just restored to Page 5
Workaround
I currently have a work around, this can be seen in the other page 'Paging Work Around'.
- On the first call to OnRead I check to see the last Grid state that was stored
- If the arg.GridState.Page does not match, (Stored vs the Request) I update the Request with the proper Page
- Proper OData query is generated to the backend.
Expected Behavior
- After state is restored first call to OnRead() would report the proper Page and make correct OData call.
If I set grouping in OnStateInit, the GroupFooterTemplate does not have data for the aggregates I have set. If I group manually by dragging a column header, the data is there.
------
ADMIN EDIT: This stems from a framework behavior. The <GridAggregates> tag is a child component of the grid and as such, initializes after the grid. Since there is no event when all such child components are initialized the parent component cannot wait for them before starting to render and thus, it initializes before it can know what aggregates are defined.
1. Click the Previous page button in the pager
<TelerikGrid Data="@MyData" Pageable="true" Navigable="true">
<GridColumns>
<GridColumn Field="ID"></GridColumn>
<GridColumn Field="TheName" Title="Employee Name"></GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
}
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:
- a form of Id/field in the group descriptor that controls this. Caveat - groups don't generally have such an id and the descriptor does not control the UI, it controls the data.
- an event that provides the level, field name and group value that lets me choose this for every group as it renders. Caveat - might not plug in the state, but if you have a certain business logic for that you can just keep it in that event always, regardless of the grid state, or keep additional information in an application state.
- the current indexes could become recursive (see the image attached below). Caveat: you can't be sure that the next time data loads the data and so the groups will be the same when loading state
it would be helpful to have the ability to set Class attribute for rendered TD.
this would allow for example to set a background color for a column
For example, when I have two levels of grouping, I want to render only the inner footer templates, but not the outer.
While this is possible with some CSS like the snippet below, this does not scale well, and does not work well for arbitrary number of groups
<style>
.k-group-footer + .k-group-footer {
display:none;
}
</style>
Group by the Vacation and Team columns to see the effect
<TelerikGrid Data=@GridData Groupable="true" Pageable="true">
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) Groupable="false" />
<GridColumn Field=@nameof(Employee.Team) Title="Team">
<GroupFooterTemplate>
Team group footer
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation">
<GroupFooterTemplate>
IsOnLeave group footer
</GroupFooterTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
}
Reproducible:
1. Run the snippet below
2. click the grid
3. press Down until you reach the last row, then press Down again
<TelerikGrid Navigable="true" Pageable="false"
Data=@GridData Height="400px" >
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
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.
---
I want to know when the user moves focus to a new row - I intend to use that to select this row and to perform some operations on an adjacent grid.
----
ADMIN EDIT
The majority of things are possible through templates right now. You can put in the desired template (editor, row, cell, header, whatever you need to capture events from) and add the desired handler to your own DOM element. Then, you can alter the grid, if needed, through its state. If you need the row data item - it is available in the templates related to the data rows. If you need adjacent rows models - you can get them from the sorted list of grid data when you use its OnRead event - you have the current row and you can get a previous/next one as needed from that list.
That said, I am keeping this item open (status "Unplanned") so we can still gather any feedback and its popularity and what the community thinks, and whether it will be a meaningful addition to the component.
----
Similar to the focusout-event of html-input...I want to do something after leaving a row.
----
ADMIN EDIT
The majority of things are possible through templates right now. You can put in the desired template (editor, row, cell, header, whatever you need to capture events from) and add the desired handler to your own DOM element. Then, you can alter the grid, if needed, through its state. If you need the row data item - it is available in the templates related to the data rows. If you need adjacent rows models - you can get them from the sorted list of grid data when you use its OnRead event - you have the current row and you can get a previous/next one as needed from that list.
That said, I am keeping this item open (status "Unplanned") so we can still gather any feedback and its popularity and what the community thinks, and whether it will be a meaningful addition to the component.
----