如何在内联编辑时根据值禁用Kendo UI Grid中的单元格？
在Kendo UI Grid中，可以通过内联编辑来修改单元格的值。如果需要根据某个条件来禁用单元格，可以使用Grid的edit事件和editRow方法来实现。
首先，在Grid的配置中，需要设置editable属性为true，以启用内联编辑功能。然后，在Grid的edit事件中，可以获取到当前正在编辑的行和列的信息。根据需要的条件，可以通过判断当前单元格的值来决定是否禁用该单元格。
以下是一个示例代码：
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
edit: function(e) {
var model = e.model;
var column = e.container.find("td").index(e.container);
// 根据条件禁用单元格
if (model.get("columnName") === "某个条件" && column === 2) {
e.container.find("input").prop("disabled", true);
}
},
columns: [
{ field: "columnName", title: "列名" },
{ field: "columnValue", title: "列值" }
]
});在上述代码中，edit事件中的条件判断可以根据实际需求进行修改。如果满足条件，可以通过e.container.find("input")找到当前单元格的输入框，并使用prop("disabled", true)来禁用该输入框。
这样，在内联编辑时，根据值禁用Kendo UI Grid中的单元格就可以实现了。
关于Kendo UI Grid的更多信息和使用方法，可以参考腾讯云的Kendo UI Grid产品介绍页面：Kendo UI Grid产品介绍
相关·内容
2回答
我正在尝试构建一个Restful服务，它将允许我使用Kendo UI Grid进行内联编辑。
我对Kendo UI和Restful服务都不熟悉，所以我不知道从哪里开始。
我正在使用作为参考，但它没有显示我可以使用Restful服务进行内联编辑。
有没有人知道我如何才能做到这一点，或者我可以去哪里查看示例？
，谢谢
浏览 2提问于2012-01-20得票数 3
回答已采纳
1回答
我正在尝试编辑单元格内的kendo网格元素。 我有一个kendo网格，其中的列定义如下： <kendo-grid-column title="Beam ID" field="id" width="30px">
</kendo-grid-column>
<kendo-grid-column field="additional_info.name" title="Name">
</kendo-grid-column> 我按照这个链接的第一个示例实现了一个单元格内编辑表单
浏览 12提问于2018-12-27得票数 0
我有一个MVC3项目，其中我经常使用Kendo UI Grid。
典型视图如下所示：
@using Kendo.Mvc.UI
@model List<ActionViewModel>
@(Html.Kendo().Grid<ActionViewModel>()
.Name("#grid")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Command(command => { command.Edit(); comman
浏览 3提问于2012-08-24得票数 5
回答已采纳
1回答
我在kendo ui网格上工作。默认情况下，网格不可编辑。
工具栏中有一个“编辑”按钮。当用户单击它时，网格应该可以在批处理模式下编辑，比如。
获得这项工作的唯一解决方案是使用新的属性(可编辑:true等)删除和重新创建网格/数据源。
这如预期的那样起作用。现在，我希望将焦点设置在第一行/单元格上，这样用户就可以看到网格现在是可编辑的(在下面的示例中，行变成了一个输入字段)。
对此有什么建议吗？
这是一个。
$('.k-grid-edit').on('click', function (e) {
e.preventDefault();
/
浏览 3提问于2014-05-06得票数 0
回答已采纳
在jqgrid中，内联编辑是通过双击单元格进行的。光标定位为第一个可编辑列。第二次单击“需要”将光标放置到单击的单元格中。
如何将光标放到单击的单元格中开始内联编辑？在单元格编辑模式中，单击的单元格正确地接收焦点。
function beginInlineEdit(rowID, afterSave) {
var grid2 = $("#grid");
if (rowID && rowID !== lastSelectedRow) {
var scrollPosition = $("#grid").closest(&
浏览 4提问于2011-08-28得票数 2
回答已采纳
我有这个Kendo UI网格。它读取并填充网格。但我面临的问题是，更新或删除按钮都不会发送POST请求。
保存按钮不执行任何操作。删除按钮会给我一个确认警告框，然后它会将其从网格中删除，但没有请求。
<kendo:grid name="grid" pageable="true" groupable="false" editable="true" sortable="true" filterable="true" height="300" >
<kendo:g
浏览 2提问于2013-02-10得票数 3
回答已采纳
我在我的Kendo Grid UI的一列中有一个下拉列表，我通过创建kendo DataSource并将该DataSource分配给该列的编辑器，从我的Web Api的Ajax调用中填充了该列表。我还通过一个单独的Api调用填充了我的整个Kendo Grid。
我有一个条件，如果来自Api的值是'Draft‘，那么在做内联编辑时应该禁用下拉列表(即当单击内联编辑按钮时)，否则它应该被启用。
浏览 19提问于2016-09-06得票数 0
回答已采纳
我正在考虑使用Kendo UI的Grid。
然而，我对它的灵活性和定制化有点不确定。我真正需要的是内联编辑，但同时我希望完全控制这一点。例如，我们开发了一个自定义的自动完成(使用jquery和javascript)。并希望在Kendo UI的Grid中使用此自定义自动完成功能。我不知道是否有人已经使用过这种方法，因为我在Kendo UI中找不到这种自定义级别。
谢谢。
约瑟夫。
浏览 1提问于2012-09-04得票数 1
回答已采纳
正在使用KEndo网格。弹出编辑工具栏和命令的内联编辑
$(".k-grid-popup", grid.element).on("click", function () {
var popupWithOption = {
mode: "popup",
template: kendo.template($("#customPopUpTemplate").html()),
window: {
title: "Your Title"
}
};
grid.options.editable = popupWithOption
浏览 0提问于2014-09-10得票数 0
我是kendo.ui的初学者，我写了这段代码来创建kendo.ui.grid
@(Html.Kendo().Grid<BrandViewModel>(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.BrandName);
columns.Bound(p => p.BrandAbbr);
columns.Bound(p => p.SrcImage);
columns.Comma
浏览 0提问于2013-08-12得票数 7
回答已采纳
我在页面上有一个Kendo UI Grid，我想让用户双击一行开始编辑它。我有以下用于检测双击的JS代码，但我不知道在函数中包含什么内容才能进入单击的行的编辑模式。
$(document).ready(function () {
$("#grid").delegate("tbody>tr", "dblclick", function () { alert("Double Click"); });
});
浏览 11提问于2017-02-17得票数 2
如何使kendo网格列在客户端UI上不可编辑，但可以在脚本中为其设置值？
var dataSource = new kendo.data.DataSource({
data: result,
schema: {
model: {
fields: {
IsSelected:{type:"boolean",editable:true},
浏览 1提问于2016-04-19得票数 1
回答已采纳
假设我有一个10行的kendo网格，我在网格上有一个command-column (编辑和删除)，我如何才能禁用最后一行的remove-command按钮？ <kendo-grid [data]="dataDesglose" [selectable]="true" [navigable]="true"
[reorderable]="true" [resizable]="true" [sortable]="true" style="height: 45vh"
(edit)=
浏览 27提问于2021-01-30得票数 0
我有一个kendo ui电子表格，我想要显示远程数据，并根据一个值禁用整个行，以防止用户编辑它而不是单元格。有没有办法做到这一点？？类似于kendo网格的内联编辑，但在这种情况下，我只想编辑电子表格中的某些行？？
浏览 13提问于2016-07-18得票数 0
回答已采纳
1回答
目前，我正在以可编辑模式使用Kendo Grid，其中我希望从网格的一个列中选择多个单元格，如果我在最后选定的单元格中进行更改，最后更改的值应该被设置为所有选定的单元格。
我不知道这是否可能。
有人能帮我一下吗？
浏览 1提问于2018-05-09得票数 0
描述了如何在剑道网格单元上放置工具提示。但是，它只是关于工具提示，其中包含了来自锚元素的一些信息，例如，它的title属性。但是，整合外部信息的最佳方法是什么呢？在我的例子中，当我在网格项的特定单元格上悬停时，我希望有一个工具提示显示网格项的最后一个编辑器的名称。名称不是单元格内容的一部分。它还来自每个网格行的后端。如何为工具提示访问它？
<kendo-grid [height]="200"
[data]="myModel">
<kendo-grid-column field="one" titl
浏览 4提问于2021-11-30得票数 0
回答已采纳
这类似于以前的，在用户更改网格中的行时，我希望同步数据源(与Access保存记录完全一样)。
在上面的文章中，当用户标签进入一个新的单元格时，我将向您展示如何做到这一点，如下所示.
function refreshFix1() {
kendo.ui.Grid.fn.refresh = (function (refresh) {
return function (e) {
this._refreshing = true;
refresh.call(this, e);
this._refreshing = false;
}
})(kendo.ui.Grid.fn
浏览 0提问于2015-02-18得票数 1
回答已采纳
我有一个来自远程源的充满信息的Kendo UI网格，我想在我的网站上的Kendo UI窗口关闭后强制刷新显示的信息。
我试过这个：
var grid = $("#usuariosGrid").data("kendoGrid");
grid.refresh();
但是它不起作用，这就是我创建Kendo UI网格的方法：
var ds = new kendo.data.DataSource({
transport: {
read: {
url: root_url + "/usuario/index",
浏览 6提问于2013-04-11得票数 7
回答已采纳
我有一个Kendo UI Grid。如果字段中有一些值，那么它应该显示为只读(不可编辑)，否则它将是一个可编辑的单元格。现在，我已经实现了下面给定的解决方案。
[http://jsfiddle.net/NX96g/175/][1]
它运行良好。如果该字段没有值或“空白/空/空”，则该单元格是可编辑的。但问题是，如果用户在空/空/空单元格中输入一些值，该单元格立即变为只读，并且用户无法对其进行编辑。当应用了脏单元格类时，如何让用户编辑单元格？
浏览 1提问于2016-06-22得票数 0
嗨，我正在使用进度来禁用一个网格，我可以使用
kendo.ui.progress($("#grid"), true);
但为了我的要求，我不能显示旋转的形象。为此，我尝试了方法1。
kendo.ui.progress($("#grid"), function(){
removeclass("k-loading-image") ;
return true;
});
方法2
$('#grid*').prop('disabled', false);
方法3
浏览 4提问于2014-07-21得票数 4
1回答
我跟踪Kendo UI网格。我试图从网格中警告更新的值。但我还是会犯错误
未定义的ReferenceError:未定义保存
如何解决此错误并显示网格中所有更新的值？
Body
<div id="grid"></div>
<br />
<input type="button" value="Save Row" onclick="save();" />
<input type="button" value="Submit To Serve
浏览 3提问于2014-03-06得票数 0
回答已采纳
4回答
是否有一个事件等同于Kendo Grid的onEditComplete，该事件仅在单元格的内容被编辑后触发？
提到了“编辑”事件，但是只要单元格进入编辑模式，这个事件就会触发(所以这相当于onBeginEdit)。
我找到的具有所需行为的最接近的事件是"save“事件，但此事件仅在单元格的内容发生更改时触发。我想要一个在单元格退出编辑模式时立即触发的事件。
网格的编辑模式设置为incell。
浏览 0提问于2013-05-10得票数 10
回答已采纳
我有一个带单元格编辑的kendo网格和一对日期列。我想为用户正在编辑的单元格内的数据编辑器指定一个最大日期和一个最小日期，但它似乎不存在任何属性。
我试着用模板来完成它：
<kendo-grid-column field="StartDate" title="Start Date">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<kendo-datepicker
format=
浏览 0提问于2019-04-08得票数 0
2回答
我正在尝试启用或禁用kendo网格单元依赖于MVC中同一行中的其他值。我试过了
grid.dataSource.at(i).fields["colname"].editable = true;
但它会影响所有的行列。我只希望选定行的单元格应该禁用/启用。
谢谢你的帮助。
浏览 1提问于2013-11-11得票数 1
1回答
我是Yii的新手，如果有人能告诉我是否有一种方法可以使用GridView进行内联编辑，即应该使用Ajax进行更新，我将不胜感激。到目前为止，我有：
<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
'title_en',
'title_mn',
['class' => 'yii\grid\ActionColumn', &
浏览 0提问于2015-12-16得票数 2
回答已采纳
如何在Javascript/AngularJS中为Kendo UI Grid的每个单元格设置一个指定值的title属性？
谢谢。
浏览 0提问于2015-12-17得票数 1
下面是我的网格列代码：
{name:'Track_Name',index:'isrc.Track_Name', width:195, align:"left", editable:true,
editoptions:{
dataInit:function (elem, options) {
$(elem).autocomplete({
source: "xtras/search_isrc.php",
dataType:
浏览 2提问于2016-02-24得票数 0
回答已采纳
1回答
我想根据特定单元格的值来设置它的cellStyle。
如果启动了Status ==，我希望背景是绿色的。
如果Status ==停止，我希望背景为红色。
考虑一下这张表：
<kendo-grid [data]="gridData" style="height: 200px">
<kendo-grid-column field="machineName" title="Machine">
</kendo-grid-column>
<kendo-grid-c
浏览 4提问于2019-02-20得票数 0
回答已采纳
我扩展了剑道网格
(function($) {
var MyGrid = kendo.ui.Grid.extend({
init: function(element, options) {
kendo.ui.Grid.fn.init.call(this, element, options);
},
options: {
name: 'MyGrid'
}
})
kendo.ui.plugin(MyGrid);
})(jQuery);
如何以角度的方式使用自定义小工具。
目前，我可以看到
浏览 2提问于2016-06-09得票数 0
2回答
我想在Kendo网格中添加新行，它在第一个单元格中具有默认值。如何在Kendo Grid添加行中设置默认值
我将在Kendo Grid中添加新行：：
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
但是我想根据单击的DOM元素的值来设置第一个单元格的值，比如
$('#AddSingleSuppliment').click(function () {
var temVal=$(this).text();
浏览 4提问于2013-11-25得票数 5
回答已采纳
我目前使用的是Angular 2中的Kendo UI Grid，并且我要求基于dataItem值对单元格应用背景色。我尝试使用Kendo Grid Column模板(参见下面的代码片段)，但它不会用该颜色填充整个单元格(参见附件中的屏幕截图)。任何帮助都将不胜感激。此外，这里还链接到柱塞示例- 。
<kendo-grid-column field="UnitPrice" title="Price" width="80">
<ng-template kendoGridCellTem
浏览 0提问于2017-08-08得票数 2
我正在使用Vue.JS的Kendo Grid包装器，我需要在Kendo Grid的底部添加新行。
用于jQuery的Kendo UI网格提供editable.createAt
“可编辑”：{ "createAt"：“底部”}
如何在vue.js包装器中使用上面的代码？
浏览 0提问于2019-07-29得票数 0
当Kendo UI上下文菜单的目标是Kendo UI编辑器的id时，该菜单不起作用：
<textarea id="keditor" kendo-editor kendo-toolbar style="width: 100%; overflow: scroll">
</textarea>
脚本：
$("#client-context-menu").kendoContextMenu({
target: "#keditor",
dataSource: response.Item.Agreement
浏览 7提问于2020-01-22得票数 0
如何在kendo UI调度程序中禁用事件?我从官方网站示例中学习了这个示例，并看到所有在事件中的单元格都有双击事件来创建和删除以及其他事件，但现在我只是使用它来显示结果，那么如何防止所有的创建、删除、编辑事件？
浏览 2提问于2014-04-19得票数 5
回答已采纳
我正试图通过使用Kendo的混合UI来创建我的网站的移动版本。我目前正在处理的页面是一个简单的CRUD屏幕，它通过设置为editable属性设置为popout的网格及其编辑形式。
我遇到的问题是，模式有一个time列，而且由于没有"time“模型类型，所以我不得不指定类型为"date”。这进而导致默认编辑表单使用日期输入而不是时间输入。
为了弥补这一点，我尝试设置一个模板来保存我的编辑表单。我现在遇到的问题是，包含表单元素的listview没有正确地呈现。下面是一个示例：
<!DOCTYPE html>
<html>
<head>
浏览 0提问于2020-10-19得票数 0
回答已采纳
我有一个有几个列的ui网格。其中两列是可编辑的。我还启用了行选择，这使得复选框出现在行的最左边列中。
我已禁用不可编辑列的单元格焦点。我想要实现的是，当我编辑一个可编辑列单元格并点击选项卡时，它应该只在可编辑列之间导航。当前设置的问题是焦点从一行中的可编辑单元格转移到下一行的选择复选框，而不是转到下一个可编辑单元格。我想禁用选中复选框的焦点。
vm.tableOptions = {
appScopeProvider: vm,
data: [],
enableSorting: true,
enableFiltering: t
浏览 1提问于2016-07-22得票数 1
数据是随机的，我无法预测列。我从远程读取数据并将其显示在网格上。
我在Kendo UI Grid中得到json对象作为[object Object]，我如何可视化它，或者有什么方法可以在Kendo网格中显示单元格的详细视图吗？
我想如果我能在这些单元格中插入一个JSON对象的treeview就可以解决这个问题。
浏览 1提问于2013-10-24得票数 1
基本上，我有一个带有InCell编辑功能的kendo UI gri。这就是它看起来的样子。
这是我编辑单元格时的样子。
这就是我想要的样子。我甚至不知道这是否可能，但它在我的需求列表中。有什么想法吗？
浏览 3提问于2014-08-18得票数 0
1回答
在MVC 4中使用Kendo UI网格
我正在尝试放置一个“编辑”按钮和"Delete“按钮，该按钮将把该行的模型发布到控制器和操作中。网格应该像一个简单的列表，有一个编辑和删除按钮。
@(Html.Kendo().Grid<MyViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UserLoginId);
columns.Bound(p => p.AppUserName);
浏览 5提问于2012-12-03得票数 0
回答已采纳
2回答
我正在使用asp.net MVC5的kendo ui。我有一些情况，我必须显示kendo ui下拉列表被禁用，但当我提交from (post)时，我用来绑定下拉列表的模型字段包含null而不是值。
下面是我的代码：
@(Html.Kendo().DropDownListFor(i => i.CallTypeId)
.Name("CallTypeId")
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("MasterValueName")
浏览 5提问于2015-12-29得票数 0
我在angularJS 1.5中使用kendo，并且我有一个简单的kendo网格绑定到一个数据源，该数据源使用以下函数配置了传输：
private buildDataSource() {
this.dataSource = new kendo.data.DataSource({
autoSync: true,
change: this.dataSourceChangeHandler.bind(this),
error: this.dataSourceErrorHandler.bind(this),
transport: {
浏览 7提问于2016-11-20得票数 1
回答已采纳
2回答
如何禁用剑道格格-复选框列？
我试过了
[disabled]="true"
[attr.disabled]="true"
disabled ="true"
disabled
readonly
但是没有任何东西可以帮助禁用下面的列。
<kendo-grid-checkbox-column width="50" showSelectAll="true">
</kendo-grid-checkbox-column>
浏览 0提问于2019-05-17得票数 4
我编写了在Kendo UI网格中显示信息的代码。它使用内联网格模式来更新和插入记录。
代码如下：
Timesheet.cshtml
@model HalsionTimesheetWebApp.Models.TimesheetIndexData
@(Html.Kendo().Grid(Model.TimesheetPrinting)
.Name("InlineGrid")
.Columns(columns =>
{
columns.Bound(trans => trans.TimesheetId).Title("ID"
浏览 2提问于2014-05-22得票数 0
我正在尝试使用来自asp.net MVC3的新的Kendo UI网格。
我有一个表这个表是由asp.net MVC3中的一个控制器自动生成的。
并使用Kendo.ui网格显示它。
但是，我将html代码放在单元格中，而不是html控件中。
示例：
它显示在单元格中：<input checked="checked" class="check-box" disabled="disabled" type="checkb..而不是输入，视图中的代码是@html.input
或者<a href="/Admin/Edit"
浏览 0提问于2012-07-04得票数 10
回答已采纳
帮助我编写代码，如何从dataSource逐行获得值id，并更改为当前值默认值(1)
行: var date = dataSource.get(1)；console.log(date.ProductName)
我的全部消息来源：
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
浏览 6提问于2021-04-06得票数 0
回答已采纳
我有一个依赖列，它需要根据第一个单元格的值是可编辑的。如何使用kendo网格的beforeedit事件来完成此操作。
我希望避免在剑道网格的编辑事件中关闭单元格。
下面是一个示例
浏览 1提问于2018-07-02得票数 0
1回答
未知列的Kendo网格工具提示
、、、、
我正在使用kendo网格，每次用户在任何网格单元上执行鼠标覆盖时，我都想显示工具提示。下面的示例很好，但是如果我不知道用户执行mouseover的列呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/
浏览 1提问于2018-06-05得票数 1
回答已采纳
2回答
目前kendo-grid-column的编辑器属性支持数值、文本和布尔值。在编辑模式下，可以在网格单元格内设置下拉控件吗？
浏览 9提问于2017-03-01得票数 0
在IE9中:如果我在kendo ui网格下面有一个滚动条并选择要编辑的单元格，则会在该网格下方插入空格，然后将鼠标从正在编辑的单元格移开或移回。
具体步骤如下：
00)在IE9 01中运行...htm文件)向左拖动窗口的右侧，以便在网格底部显示一个水平滚动条。
02)点击C00第一行编辑c00单元格
03)将鼠标从编辑字段移到下一行，然后再移回
04)注意网格底部插入的空格
05)如果您来回移动大约12 - 15次，空白区域将恢复为零。注意:在jsfiddle IE9中不会发生这种情况
如果没有水平滚动条，就不会发生这种情况。
如何使空格插入到
如果我把鼠标从编辑器上移开，网格就不会出现
字
浏览 0提问于2015-01-27得票数 0
嗨，我是使用ASP.Net MVC剃刀的Kendo UI网格的新手，我正在尝试创建一个3列网格，第一列是不可编辑的，其他两列是可编辑的数字文本输入，这是我现在有的代码，还有什么要添加的？像.Editable(editable => editable.Mode(GridEditMode.InLine))这样的工具是否有帮助，但如何将第一列设为只读
@Html.Kendo().Grid(Model.CpfPayableYearlyDetail.CpfPayableMonthlyDetails).Name("CpfPayableMonthlyDetails").Columns(
浏览 0提问于2015-01-15得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
