Hi !
How can i hide some columns on small device ?
Telerik.Blazor.Components.GridColumn.Class does not exist ?
Regards,
--------
ADMIN EDIT
This will be done through the Visible parameter of the column. You can bind it to a flag that hides the column for the desired scenarios (resolution, user settings, etc.). The new feature we provide to facilitate this will be a MediaQuery component that lets you have an easy flag in the C# code based on the media query for the desired resolution. There will be a demo how to use it with the grid columns when the 2.23.0 release is live. With this approach you will still use a CSS media query, but this will give you more flexibility to use it in more functionality than just the grid columns, and will avoid adding extra properties to the column.
--------
I need the ability to show or hide command buttons based on a row's property.
I am aware that I can just cancel commands, but in my opinion, a command button should not even be shown when the command can't or shouldn't be executed on a row.
Unfortunately, I was unable to find a way to access the "context" (the instance) in a TelerikGridCommandColumn the same way you're able to in a normal TelerikGridColumn.
---
ADMIN EDIT
You can Vote for and Follow this request for a follow up on providing the model as context to the command column: https://feedback.telerik.com/blazor/1461283-pass-the-model-context-to-command-button. At the moment, conditional command buttons are possible in a "normal" column through the grid state, the page above shows an example.
---
Like this (example taken from "https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation"):
---
ADMIN EDIT
This is not a bug, but intended behavior. As web grid is not Excel. You can find more details in the original thread opened by Aditya with this question: https://www.telerik.com/forums/grid-checkboxlist-filter---auto-select-all-upon-entering-filter-criteria
---
This is related to Grid CheckBoxList Filter - https://demos.telerik.com/blazor-ui/grid/filter-checkboxlist
In Microsoft Excel, when we start typing in the Search box, the matching entries along with "Select All" are already checked. So upon typing the required criteria, the user just needs to select Ok button to view the filtered results.
In the case of Blazor Grid, the matching entries and Select All option are not checked automatically. So the user would need to do an additional action of checking "Select All". Please refer to the attached screenshots.
Is there a way to have "Select All" auto checked upon typing the filter criteria?
asynct Task ContextMenuClick(ContextMenuItem) {
var state = Grid.GetState(); state.FilterDescriptors.Add(new FilterDescriptor { Member = "Created", Operator = FilterOperator.IsEqualTo, Value = "Administrator" }); await Grid.SetState(state);
}
How it should look like:
Data load in background thread with selected row on UI crashing application when there is selection
1. Select a row
2. Click the button
3. check the server console and/or try to do something else
@using System.Collections.ObjectModel
<TelerikGrid @ref="@Grid"
Data="@GridData"
SelectionMode="@GridSelectionMode.Single"
OnRowClick="@OnRowClickHandler"
@bind-SelectedItems="@SelectedData"
EditMode="@GridEditMode.Incell"
Resizable="true"
Width="100%"
Height="200px"
Reorderable="true"
Groupable="false"
ShowColumnMenu="false"
FilterMode="@GridFilterMode.None"
Sortable="true">
<GridColumns>
<GridColumn Field=@nameof(ViewModel.Name) Editable="false">
</GridColumn>
</GridColumns>
</TelerikGrid>
<TelerikButton OnClick="RefreshButtonClick">Refresh</TelerikButton>
@code {
private const int RowHeight = 40;
private const string Height = "700px";
private const int PageSize = 20;
private ObservableCollection<ViewModel> GridData { get; set; } = new ObservableCollection<ViewModel>();
private IEnumerable<ViewModel> SelectedData { get; set; } = Enumerable.Empty<ViewModel>();
private TelerikGrid<ViewModel> Grid { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadData();
await base.OnInitializedAsync();
}
async Task LoadData()
{
var data = Enumerable.Range(1, 5).Select(x => new ViewModel { Name = $"name {x}" });
GridData = new ObservableCollection<ViewModel>(data);
}
private async Task RefreshButtonClick()
{
Console.WriteLine("reload data");
// spawn a new thread, a Timer will do as well
await Task.Run(() =>
{
IEnumerable<ViewModel> data = new List<ViewModel> { new ViewModel { Name = "1" }, new ViewModel { Name = "2" }, new ViewModel { Name = "3" } };
this.GridData.Clear();
this.GridData.AddRange(data);
});
}
private void OnRowClickHandler(GridRowClickEventArgs args)
{
Console.WriteLine("click to select");
ViewModel viewModel = (ViewModel)args.Item;
//this is here because of theincell editing, not relevant to the issue
SelectedData = new List<ViewModel>() { viewModel };
}
public class ViewModel
{
public ViewModel()
{
}
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
}
}
Hi,
Please simplify customizing Grid Popup, it should be available under Grid with build-in context and binding
I am already using your do-it-yourself example but IMHO it is too much code
Regards
Andrzej
It would be really nice now that we have a grid loader, to be able to customize this using a custom template.
Currently it fixes even the animation type, so while we have chosen a different enum (Pulsing) for all our loaders, our grids now look different because it is not possible currently to change the grid loader beyond turning it on and off.
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;
}
}
---
When I have a Navigable grid and I press Esc on the keyboard while editing/inserting a row, I want to do something (e.g., clean up the newly inserted row altogether from the data). Usually, I can use the OnCancel event for this, but it does not fire when pressing the Esc key on the keyboard.
*** Thread created on customer behalf by admin ***
If a new item for a grid is created and the CreateHandler is cancelled due to some validation error, the new loading indicator does not disappear.
protected async void CreateHandler(GridCommandEventArgs args)
{
var myItem = (MyModel) args.Item;
if (!IsValid(myItem))
{
args.IsCancelled = true;
return;
}
...
}
Regards,
René
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.
---
Using the keyboard to save items works inconsistently. When editing an item, hitting enter seems to save the change as expected. When inserting an item, however, the item is lost.
---
ADMIN EDIT
Tthe grid calls the OnUpdate handler again, not OnCreate which results in data loss - the newly inserted item is unlikely to match existing data and so it appears to be lost.
Workaround - call the OnCreate handler yourself when the ID of the record is the default for its type - for example, zero for an integer. This indicates a newly inserted record in the grid.
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px" Navigable="true"
OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<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 {
async Task UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
if (item.ID == 0)
{
await CreateHandler(args);
}
else
{
// perform actual data source operations here through your service
await MyService.Update(item);
// update the local view-model data with the service data
await GetGridData();
Console.WriteLine("Update event is fired.");
}
}
async Task DeleteHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
await MyService.Delete(item);
// update the local view-model data with the service data
await GetGridData();
Console.WriteLine("Delete event is fired.");
}
async Task CreateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
await MyService.Create(item);
// update the local view-model data with the service data
await GetGridData();
Console.WriteLine("Create event is fired.");
}
async Task CancelHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// if necessary, perform actual data source operation here through your service
Console.WriteLine("Cancel event is fired.");
}
// in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
}
public List<SampleData> MyData { get; set; }
async Task GetGridData()
{
MyData = await MyService.Read();
}
protected override async Task OnInitializedAsync()
{
await GetGridData();
}
// the following static class mimics an actual data service that handles the actual data source
// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
public static class MyService
{
private static List<SampleData> _data { get; set; } = new List<SampleData>();
public static async Task Create(SampleData itemToInsert)
{
itemToInsert.ID = _data.Count + 1;
_data.Insert(0, itemToInsert);
}
public static async Task<List<SampleData>> Read()
{
if (_data.Count < 1)
{
for (int i = 1; i < 50; i++)
{
_data.Add(new SampleData()
{
ID = i,
Name = "Name " + i.ToString()
});
}
}
return await Task.FromResult(_data);
}
public static async Task Update(SampleData itemToUpdate)
{
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
if (index != -1)
{
_data[index] = itemToUpdate;
}
}
public static async Task Delete(SampleData itemToDelete)
{
_data.Remove(itemToDelete);
}
}
}
---