Hello,
I'm having issues trying to figure out how to change values (from the model) when I'm Incell Mode without triggers the OnRead events after. The actual code is working great since I was able to remove the Incell mode on the OnChangeModel event below, but OnRead is keeps call after (which I didn't need and slow user experience)
Is there a way to cancel the OnRead ?
<TelerikGrid OnRead="ReadItems" EditMode="GridEditMode.Incell"
@ref="@GridRef">
<GridColumns>
<GridEditDropDownColumn Field="Test1" Data="@Eval?.ListEvaluationTypes" Title="Title" Width="130px" OnChange="OnChangeModel" />
</GridColumns>
</TelerikGrid>
private TelerikGrid<EvaluationListDTO> GridRef { get; set; }
protected async Task OnChangeModel(object model)
{
var item = (EvaluationListDTO)model;
var state = GridRef?.GetState();
//Save in the Database
// use the state to remove the edited item (close the editor)
state.EditItem = null;
state.OriginalEditItem = null;
await GridRef.SetStateAsync(state);
}
In this example. Select a cell in column C. Then double click on another cell in column C. The unhandled exception will show up and a null reference exception is logged in the console.
https://blazorrepl.telerik.com/QHuSQBlj170zO4u130
The exception message is:
System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm.
Hello,
I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu. I am using the Telerik Grid. The Column Menus use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.
I want to be able to set a CSS to the main wrapping element of the Column Menu (<div class="k-animation-container>), so I can specifically set the z-index for only Column Menu instances of the animation container.
Problem Statement:
We have the following blazor grid:
We have enabled the GridColumnMenuSettings
Now when we open the column chooser it does not disable for the last option.
When we don't have the GridCheckboxColumn then it works as intended
The last column option is disabled
Expected Result : We don't want the check box column to be shown in the column chooser and the last option to be unchecked in the column chooser needs to be disabled.
@* Use the Template to render the list of columns and add some custom styles *@
<TelerikGrid Data="@MyData"
Pageable="true"
PageSize="5"
Width="700px"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
ShowColumnMenu="true">
<GridSettings>
<GridColumnMenuSettings Sortable="true"
Lockable="false"
FilterMode="@ColumnMenuFilterMode.None" />
</GridSettings>
<GridColumns>
<GridCheckboxColumn Width="80px" HeaderClass="header-select-all" />
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
<GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
<GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
</GridColumns>
</TelerikGrid>
@code {
public string TextboxValue { get; set; } = string.Empty;
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
FirstName = $"FirstName {x}",
LastName = $"LastName {x}",
CompanyName = $"Company {x}",
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
Please expose the current data of the Grid and TreeList when using Data or OnRead. This will spare the need to cache data for the second time in-memory, or repeat all data operations. The benefit is that the app can:
When I click TelerikGridCommandButton and inside OnClick event calling method uriHelper.NavigateTo("/xxx"); application hangs.
Using latest VS 2019 version and Blazor Preview 4
I'm following your example listed here (in ObservableCollection section)
https://docs.telerik.com/blazor-ui/components/grid/selection/overview
The following scenario does not work.
Select an item in the grid.
Clear data set. Grid (simplified) look like this. Notice that the checkbox is selected even though nothing is in the grid.
Uncheck chekcbox.
Check checkbox -> All items from the previous data set will be selected (printed in ul bellow grid)
I have inspected the grid and i does not contain any item in its Data collection so I'm unsure from where does it get the selection.
Best regards,
Robert
When I set more than one group on StateInit, I get an error - either the browser closes, or I see a stack overflow.
Sample reproducible with workaround (to initialize the data source so it is not null) is below
Sample error and stack trace
ArgumentNullException: Value cannot be null. (Parameter 'source')
<TelerikGrid Data=@GridData Pageable="true" Height="300px">
<GridColumns>
<GridColumn Field="@(nameof(Employee.EmployeeId))">
<FooterTemplate>
some footer
</FooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.Salary) Title="Salary">
</GridColumn>
<GridColumn Field=@nameof(Employee.Name)>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; } // = new List<Employee>(); // workaround
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public decimal Salary { get; set; }
}
}
Hi Telerik team,
In a Blazor Grid with filters enabled the event "OnStateChanged" is fired twice when I use a filter (set, change, remove).
---
ADMIN EDIT
This behavior is expected - when the grid is filtered, there are two actions that happen:
This is not something we intend to change at this point.
---
To reproduce this I took one of the provided examples and added the event handler:
@page "/"
<TelerikGrid Data=@GridData
SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
SelectedItems="@PersistedSelectedItems"
@bind-Page="@CurrentPage"
PageSize="@PageSize"
Pageable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateChanged="@((GridStateEventArgs<Employee> args) => OnStateChangedHandler(args))">
<GridColumns>
<GridCheckboxColumn />
<GridColumn Field=@nameof(Employee.EmployeeId) />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) />
</GridColumns>
</TelerikGrid>
@if (PersistedSelectedItems != null)
{
<ul>
@foreach (Employee employee in PersistedSelectedItems.OrderBy(e => e.EmployeeId))
{
<li>
@employee.EmployeeId
</li>
}
</ul>
}
@code {
public List<Employee> PersistedSelectedItems { get; set; } = new List<Employee>();
int CurrentPage { get; set; }
int PageSize { get; set; } = 5;
private async void OnStateChangedHandler(GridStateEventArgs<Employee> args)
{
await Task.Delay(5000);
}
protected void OnSelect(IEnumerable<Employee> employees)
{
IEnumerable<Employee> CurrentPageEmployees = GridData.Skip(PageSize * (CurrentPage - 1)).Take(PageSize);
if (employees == null || employees.Count() == 0)
{
//the user de-selected all items with the header checkbox
PersistedSelectedItems = PersistedSelectedItems.Except(CurrentPageEmployees).ToList();
}
else
{
//handle any deselected items
var UnselectedEmployees = CurrentPageEmployees.Except(employees);
PersistedSelectedItems = PersistedSelectedItems.Except(UnselectedEmployees).ToList();
//add any new items if they were not selected already
foreach (var item in employees)
{
if (!PersistedSelectedItems.Contains(item))
{
PersistedSelectedItems.Add(item);
}
}
}
}
//data binding and sample data
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; }
}
}
Best regards,
Rayko
When the sum of the widths of the Grid columns is higher than the total width of the Grid and a horizontal scrollbar appears the Virtual Scrolling twitches when the user scrolls to the bottom of the Grid. The same behavior can be observed if the Grid has Resizeable columns and by resizing them horizontal scrollbar appears.
<AdminEdit>
The issue is reproducible on mobile Safari without horizontal scrolling.
</AdminEdit>