网格工具栏

网格提供了一个工具栏，您可以在其中添加各种不绑定到具体行的操作。

要使用工具栏，请定义GridToolBar网格的标签。在其中，您可以使用任意HTML和组件来获得所需的布局GridCommandButton中的实例(可以在中阅读有关这些按钮中可用的特性的更多信息命令列文章)。

工具栏没有与数据源中的项相关联。的项属性的单击事件处理程序参数GridCommandButton永远都是零和编辑，更新，取消命令不能使用它。

在这篇文章中，你将学习如何使用:

• 内置命令
• 自定义命令
• 自定义布局

内置命令

网格提供了内置命令，您可以通过其工具栏调用这些命令。要使用它们，请设置命令属性设置为命令名。内置的命令名是:

• 添加- - - - - -开始在网格中插入一个新项．

• ExcelExport-启动Excel导出的网格数据．

• CsvExport-启动CSV导出网格数据．

@result   Add Employee       编辑 更新 取消    @code {string result;public List MyData {get;设置;} private async Task UpdateHandler(GridCommandEventArgs args) {SampleData item = args。Item为SampleData;//通过你的服务执行实际的数据源操作SampleData updatedItem = await MyService.Update(item);//用服务数据更新本地视图模型数据Result =字符串。格式(“ID为{0}的员工现在的名称为{1}，雇用日期为{2}”，updatedItem。ID, updatedItem。Name, updatedItem.HireDate); } private async Task CreateHandler(GridCommandEventArgs args) { SampleData item = args.Item as SampleData; // perform actual data source operations here through your service SampleData insertedItem = await MyService.Create(item); // update the local view-model data with the service data await GetGridData(); result = string.Format("On {2} you added the employee {0} who was hired on {1}.", insertedItem.Name, insertedItem.HireDate, DateTime.Now); } //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 DateTime HireDate { 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 _data { get; set; } = new List(); public static async Task Create(SampleData itemToInsert) { itemToInsert.ID = _data.Count + 1; _data.Insert(0, itemToInsert); return await Task.FromResult(itemToInsert); } public static async Task> Read() { if (_data.Count < 1) { for (int i = 1; i < 50; i++) { _data.Add(new SampleData() { ID = i, Name = "Name " + i.ToString(), HireDate = DateTime.Now.AddDays(-i) }); } } 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; return await Task.FromResult(_data[index]); } throw new Exception("no item to update"); } } }

自定义命令

可以使用工具栏添加调用特定于应用程序的操作的按钮。

@result   Fire MyCommand        @code {string result;private void MyCommandFromToolbar(GridCommandEventArgs args){//注意-参数。项object is null because the command item is not associated with an item result = "my custom toolbar command fired at " + DateTime.Now.ToString(); StateHasChanged(); } //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 DateTime HireDate { get; set; } } public IEnumerable MyData = Enumerable.Range(1, 50).Select(x => new SampleData { ID = x, Name = "name " + x, HireDate = DateTime.Now.AddDays(-x) }); }

自定义布局

您可以添加自己的HTML和组件，在网格标题中创建更复杂的布局，以满足您的业务需求。您仍然可以使用网格命令按钮，以及其他组件和逻辑。

@result   
 @*工具栏中的第一层儿童得到display:内嵌伸缩和伸缩收缩:0继承自网格，我们在这里改变它，以显示我们可以，或者你可以使用网格定义的布局，如果它适合你的需要*@ 
 添加员工 
 
< TelerikDropDownList Data="@(new List() {"first"， "second"， "third"})" TValue="string" TItem="string" ValueChanged="@((string itm) => result = itm) "> 
 
 @*一个用flex向右对齐内容的例子*@  result = $"自定义按钮点击{日期时间。现在}")">点击我 
 
      编辑 更新 取消   @code {string result;private void CreateHandler(GridCommandEventArgs args) {SampleData newItem = args。Item为SampleData;MyData。Insert(0, newItem); // actual CRUD operations are not implemented, for brevity result = string.Format("On {2} you added the employee {0} who was hired on {1}.", newItem.Name, newItem.HireDate, DateTime.Now); StateHasChanged(); } //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 DateTime HireDate { get; set; } } public List MyData = Enumerable.Range(1, 50).Select( x => new SampleData { ID = x, Name = "name " + x, HireDate = DateTime.Now.AddDays(-x) }).ToList(); }

另请参阅

• 现场演示:网格工具栏