界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生Blazor UI组件(包括Pivot Grid、调度程序、图表、数据编辑器和报表等)。

在这篇文章中,我们将介绍DevExpress Blazor Grid 组件的新单元格编辑模式功能(在v23.2发布周期中作为社区技术预览版提供)。

获取DevExpress v23.2正式版下载(Q技术交流:909157416)

单元格编辑UI

当启用单元格编辑模式时,用户可以单击单元格,并通过这样做将其切换到编辑模式。一旦进入编辑模式,DevExpress Blazor Grid将在单元格中显示一个就地编辑器,用户可以使用此编辑器编辑当前单元格值,或者将焦点移动到其他单元格并显示关联的编辑器。当焦点移到另一行时,控件将验证用户输入并根据需要保存更改。

界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

当使用DevExpress Blazor Grid的单元格编辑模式时,Edit(编辑)、Cancel(取消)和Save按钮是不必要的。您可以从命令列中删除这些按钮,也可以删除整个命令列。不使用内置命令列,您可以添加工具栏或上下文菜单来显示自己的新记录和/或Delete按钮。

要在您的Blazor应用程序中激活单元格编辑模式,必须:

  1. 启用KeyboardNavigationEnabledd 属性,并将 EditModee 属性设置为 EditCell
  2. 如果您的数据对象有一个或多个主键,请将它/它们分配给KeyFieldName/KeyFieldNames 属性。
  3. 处理EditModelSaving和DataItemDeleting 事件来处理保存和删除操作。
  4. (可选)要在Grid组件中显示与crud相关的命令按钮,可以在 Columns 模板中声明DxGridCommandColumn对象。
<DxGrid Data="DataSource"
KeyFieldName="EmployeeId"
EditMode="GridEditMode.EditCell"
KeyboardNavigationEnabled="true"
EditModelSaving="Grid_EditModelSaving"
DataItemDeleting="Grid_DataItemDeleting">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
</DxGrid>
@code {
IGrid Grid { get; set; }
IEnumerable<EditableEmployee> DataSource { get; set; }
// ...
async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
// Saves changes
}
async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
// Deletes the processed data item
}
}

与DevExpress Blazor Grid的其他数据编辑模式类似,单元格编辑模式根据列数据类型自动生成单元格编辑器。对于高级使用场景,您可能需要自定义自动生成的编辑器,或者用所需的编辑器替换它们。当您探索这个特性时,一定要检查单元格编辑是否与为EditSettings和CellEditTemplate定义的DevExpress编辑器(以及自动生成的编辑器)一起工作。

键盘支持

单元格编辑模式支持键盘导航,并附带一组预定义的键盘快捷键,因此它要求您启用KeyboardNavigationEnabled 属性。要在数据单元格中显示编辑器,用户可以聚焦该单元格并按Enter。当编辑器可见时,以下键盘快捷键可用:

  • Enter — 验证单元格值并隐藏编辑器。
  • Esc — 隐藏编辑器并丢弃在此单元格中所做的更改,隐藏编辑器时按Esc将放弃行中所做的所有更改并取消行编辑。
  • Tab/Shift+Tab — 隐藏编辑器,聚焦下一个/上一个数据单元格,并在新聚焦的单元格中显示编辑器。

要在网格单元格之间快速导航,用户还可以执行以下内置快捷方式(隐藏本地编辑器时可用):

  • Home/End — 聚焦当前行的第一个/最后一个单元格。
  • Ctrl+Home/Ctrl+End — 聚焦当前页面上的第一个/最后一个数据单元格。
  • Page Up/Page Down — 向上/向下移动焦点一页。
内置验证

DevExpress Blazor Grid 根据编辑模型中定义的 数据注释属性 自动验证用户输入,一旦用户将焦点从编辑的单元格上移开,网格将验证该单元格的值。当焦点离开已编辑的行或用户按下Save按钮时,网格验证已编辑数据项的所有字段值。

验证后,组件将用彩色轮廓标记编辑器并显示验证图标。用户可以将鼠标悬停在错误图标上,在工具提示中显示相应的错误消息。网格阻止用户编辑其他行,直到解决了所有验证错误。

界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

保存更改

使用单元格编辑,您可以随时保存更改,可以将EditModelSaving和DataItemDeleting事件处理程序中的更改直接发布到底层数据库,从而实现逐行保存操作。或者,您可以在内存中积累更改(批处理编辑),并在用户执行特定操作(例如,按下外部按钮)时将它们发布到数据库。

界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

要在Blazor应用程序中引入批处理数据编辑,请对代码进行以下更改:

  1. 创建累积用户更改的存储。
  2. 在EditModelSaving和DataItemDeleting事件处理程序中,将更改放在此存储中,替代将其发布到数据库中。
  3. 创建允许用户放弃累积更改或将其应用于底层数据源的按钮。
  4. 处理CustomizeElement事件来根据需要突出显示修改的单元格。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/594897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

死锁的处理策略“预防死锁”-第三十七天

目录 前言 破坏互斥条件 破坏不剥夺条件 破坏请求和保持条件 静态分配法 破坏循环等待条件 顺序资源分配法 本节思维导图 前言 死锁的产生必须满足四个必要条件&#xff0c;只要其中一个或几个条件不满足&#xff0c;死锁就不会发生 破坏互斥条件 互斥条件&#xff1a;…

Swift并发的结构化编程

并发&#xff08;concurrency&#xff09; 早期的计算机 CPU 都是单核的&#xff0c;操作系统为了达到同时完成多个任务的效果&#xff0c;会将 CPU 的执行时间分片&#xff0c;多个任务在同一个 CPU 核上按时间先后交替执行。由于 CPU 执行速度足够地快&#xff0c;给人的错觉…

【python入门】day17:模块化编程、math库常见函数

什么叫模块 模块的导入 导入所有&#xff1a;import 模块名称 导入指定&#xff1a;from 模块名称 import 函数/变量/类 python的math库 什么是math库 Python的math库是Python的内建库之一&#xff0c;它提供了许多数学函数&#xff0c;包括三角函数、对数函数、幂函数等&a…

Scikit-Learn线性回归(四)

Scikit-Learn线性回归四:梯度下降 1、梯度下降1.1、梯度下降概述1.2、梯度下降及原理1.3、梯度下降的实现2、梯度下降法求解线性回归的最优解2.1、梯度下降法求解的原理2.2、梯度下降法求解线性回归的最优解2.3、梯度下降法求解线性回归案例(波士顿房价预测)3、Scikit-Learn…

我的创作纪念日三年收获和感悟

机缘 我刚开始接触创作也是最近几年开始&#xff0c;当初就是希望自己的收获分享给大家&#xff0c;不仅使自己成长&#xff0c;也可以带着大家一起成长&#xff0c;独乐乐不如众乐乐&#xff0c;人都是自私的以前我都是看到好的知识文章都是自己藏起来&#xff0c;发现收获的…

NSSCTF 简单包含

开启环境: 使用POST传flag&#xff0c;flag目录/var/www/html/flag.php 先使用post来尝试读取该flag.php 没反应: 查看一下源码index.php&#xff0c;看有什么条件 base64解密: <?php$path $_POST["flag"];if (strlen(file_get_contents(php://input)) <…

Qt/C++编写视频监控系统82-自定义音柱显示

一、前言 通过音柱控件实时展示当前播放的声音产生的振幅的大小&#xff0c;得益于音频播放组件内置了音频振幅的计算&#xff0c;可以动态开启和关闭&#xff0c;开启后会对发送过来的要播放的声音数据&#xff0c;进行运算得到当前这个音频数据的振幅&#xff0c;类似于分贝…

SpringSecurity-2.7中跨域问题

SpringSecurity-2.7中跨域问题 访问测试 起因 写这篇的起因是会了解到 SSM(CrosOrigin)解决跨域,但是会在加入SpringSecurity配置后,这个跨域解决方案就失效了,而/login这个请求上是无法添加这个注解或者通过配置(WebMvcConfig)去解决跨域,所以只能使用SpringSecurity提供的.c…

AI原生应用开发“三板斧”亮相WAVE SUMMIT+2023

面对AI应用创新的风口跃跃欲试&#xff0c;满脑子idea&#xff0c;却苦于缺乏技术背景&#xff0c;不得不望而却步&#xff0c;这曾是许多开发者的苦恼&#xff0c;如今正在成为过去。 12月28日&#xff0c;WAVE SUMMIT深度学习开发者大会2023在北京举办。百度AI技术生态总经理…

CMake入门教程【核心篇】宏模板(macro)

&#x1f608;「CSDN主页」&#xff1a;传送门 &#x1f608;「Bilibil首页」&#xff1a;传送门 &#x1f608;「本文的内容」&#xff1a;CMake入门教程 &#x1f608;「动动你的小手」&#xff1a;点赞&#x1f44d;收藏⭐️评论&#x1f4dd; 文章目录 1. 定义宏1.1 基本语…

二分查找(一)

算法原理 原理&#xff1a;当一个序列有“二段性”的时候&#xff0c;就可以使用二分查找算法。 适用范围&#xff1a;根据规律找一个点&#xff0c;能将这个数组分成两部分&#xff0c;根据规律能有选择性的舍去一部分&#xff0c;进而在另一个部分继续查找。 除了最普通的…

Ps:创建基于颜色的蒙版

有时候画面上的某种颜色显得不是很和谐&#xff0c;如下图所示。 将画面上的某种颜色换掉&#xff0c;也是得到创意效果的一种重要手段。 演示视频 如果能创建好相关颜色的蒙版&#xff0c;这样在替换颜色的时候就会更加方便。 ◆ ◆ ◆ 创建基于颜色的蒙版 主要思路&#xf…

【动态规划】C++算法:44 通配符匹配

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 动态规划 LeetCode44 通配符匹配 给你一个输入字符串 (s) 和一个字符模式 &#xff0c;请你实现一个支持 ‘?’ 和 ‘’ 匹配规则的通配符匹配&#xff1a; ‘?’ 可以匹配任何单个字符。 ’ 可以匹配…

122基于matlab的CSO-SVM,BA-SVM模式识别模型

基于matlab的CSO-SVM&#xff0c;BA-SVM模式识别模型。优化SVM的两个参数晚上最佳参数确定。输出分类识别结果和准确率。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 122鸡群优化算法蝙蝠优化算法 (xiaohongshu.com)

Unity | Shader基础知识番外(向量数学知识速成)

目录 一、向量定义 二、计算向量 三、向量的加法&#xff08;连续行走&#xff09; 四、向量的长度 五、单位向量 六、向量的点积 1 计算 2 作用 七、向量的叉乘 1 承上启下 2 叉乘结论 3 叉乘的计算&#xff08;这里看不懂就百度叉乘计算&#xff09; 八、欢迎收…

78 Python开发-多线程FuzzWaf异或免杀爆破

这里写目录标题 本课知识点:学习目的:演示案例:Python开发-简单多线程技术实现脚本Python开发-利用FTP模块实现协议爆破脚本Python开发-配合Fuzz实现免杀异或Shell脚本 涉及资源: 本课知识点: 协议模块使用&#xff0c;Request爬虫技术&#xff0c;简易多线程技术&#xff0c;…

探索模块化神经网络在现代人工智能中的功效和应用

一、介绍 在快速发展的人工智能领域&#xff0c;模块化神经网络 (MNN) 已成为一项关键创新。与遵循整体方法的传统神经网络架构不同&#xff0c;MNN 采用分散式结构。本文深入探讨了 MNN 的基础知识、它们的优势、应用以及它们带来的挑战。 evertongomede 在人工智能领域&#…

通灵术揭秘:空碗“竖筷子”不倒

通灵术揭秘&#xff1a;空碗“竖筷子”不倒 释名&#xff1a;竖筷子是流传很广的一种民间小术&#xff0c;因其法是在碗中竖起一支或三支筷子&#xff0c;故名。 用处&#xff1a;如果有人莫名其妙的生病了&#xff0c;医药无效&#xff0c;按民间的说法&#xff0c;就是遇鬼了…

苹果cmsV10暗黑大气MT主题模板源码-只有PC版本

苹果cms MT主题是一款多功能苹果cmsV10暗黑大气主题 初次使用说明&#xff1a; 网站模板选择mt 模板目录填写html 后台地址&#xff1a;MT主题,mt/mtset 先应用主题打开前台&#xff0c;再点击后台。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725…

Python武器库开发-武器库篇之代理池配置(四十)

武器库篇之代理池配置(四十) 我们在渗透的过程中&#xff0c;是必须要挂代理的&#xff0c;相信为何要挂代理的原因&#xff0c;各位也是非常的明白的&#xff0c;这里就不多讲了。关于如何挂代理和购买代理大家可以去看内网隧道代理技术&#xff08;十&#xff09;之公网资产…