Kendo ui 更改剑道ui单元的类_Kendo Ui_Kendo Grid_Edit

Kendo ui 更改剑道ui单元的类

kendo-ui

Kendo ui 更改剑道ui单元的类,kendo-ui,kendo-grid,edit,Kendo Ui,Kendo Grid,Edit,我的应用程序中有这个网格 @(Html.Kendo().Grid<TekstenViewModel.Tekst>() .Name("Grid") .Columns(columns => { columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='checkbox' />").Width(10);

我的应用程序中有这个网格

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='checkbox' />").Width(10);
        columns.Bound(product => product.Naam).Width(100).ClientTemplate("<div id='editDiv'><div class='inputDiv'><input id='naam' type='text' value='#=Naam#' class='naamInput' ></div><div class='editorDiv'><a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Naam #', '#: ID #', 'Naam')\"></a></div></div>");
        columns.Bound(product => product.Waarde).Width(100).ClientTemplate("<div id='editDiv'><div class='inputDiv'>#=Waarde#</div><div class='editorDiv'><a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Waarde #', '#: ID #', 'Waarde')\"></a></div></div>");
        columns.Bound(product => product.Opmerking).Width(250).ClientTemplate("<div id='editDiv'><div class='inputDiv'>#=Opmerking#</div><div class='editorDiv'><a class=\"meerActies iconBtn\" onclick=\"openPopupDemo('#: Opmerking #', '#: ID #', 'Opmerking')\"></a></div></div>");
        columns.Template(@<text></text>).ClientTemplate("<div id='editDiv'><div class='deleteDiv'><a class=\"delete iconBtn\" onclick=\"deleteResourceItem(#: ID #, '#: Naam #')\"></a></div></div>").Title("").Width(10);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Groupable()
    .Navigatable()
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .Events(events => events.Edit("onEdit")).Change("onChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)

        .Model(model =>
        {
            model.Id(product => product.ID);
            model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
            model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
            model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
        })
        .Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
        .Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }).Data("onReadAdditionalData"))
        .Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
        .Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
    )     
)

这是两个类

#editDiv .naamInput
{
    background: transparent;
    border: none;
}

#editDiv .naamInputEdit
{
    background: transparent;
    border: none;
    width: 500px;    
}

这是我点击输入时网格的图像

当我在输入中单击时，什么也不会发生，但是如果我在输入中的单元格中单击其他单元格，它将更改除我单击的单元格以外的所有其他单元格

这里有一个例子。我点击了第一个单元格，它改变了第二个单元格和所有其他单元格

我做错了什么？有什么想法吗？

试试这个

在剑道网格编辑中，执行此操作

风格

<style>
.naamInput
 {
    background: blue !important;
    border: none !important;
 }
</style>

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div id="grid"></div>
        <style>
            .naamInput
            {
                background: blue !important;
                border: none !important;
            }
        </style>
        <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/Products",
                                dataType: "jsonp"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    navigatable: true,
                    pageable: true,
                    height: 550,
                    edit: function (e) {
                        var row = $(e.container).closest("tr");
                        var rowindex = $("tr", grid.tbody).index(row);
                        var colIdx = $("td", row).index($(e.container));
                        var columname = e.sender.columns[colIdx].field;
                        alert(columname);

                        e.container.find("[name='" + columname + "']").toggleClass('naamInput');
                    },

                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                        { field: "Discontinued", width: 120 },
                        { command: "destroy", title: " ", width: 120 }],
                    editable: true
                });
            });
        </script>
    </div>


</body>
</html>

演示：

请尝试以下代码片段

仅编辑功能

edit: function (e) {
    alert($(e.container));
    var row = $(e.container).closest("tr");
    alert(row);
    var rowindex = $("tr", grid.tbody).index(row);
    alert(rowindex);
    var colIdx = $("td", row).index($(e.container));
    alert(colIdx);
    var columname = e.sender.columns[colIdx].field;
    alert(columname);

    e.container.find("[name='" + columname + "']").toggleClass('naamInput');
},

整页代码

<style>
.naamInput
 {
    background: blue !important;
    border: none !important;
 }
</style>

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div id="grid"></div>
        <style>
            .naamInput
            {
                background: blue !important;
                border: none !important;
            }
        </style>
        <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/Products",
                                dataType: "jsonp"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    navigatable: true,
                    pageable: true,
                    height: 550,
                    edit: function (e) {
                        var row = $(e.container).closest("tr");
                        var rowindex = $("tr", grid.tbody).index(row);
                        var colIdx = $("td", row).index($(e.container));
                        var columname = e.sender.columns[colIdx].field;
                        alert(columname);

                        e.container.find("[name='" + columname + "']").toggleClass('naamInput');
                    },

                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                        { field: "Discontinued", width: 120 },
                        { command: "destroy", title: " ", width: 120 }],
                    editable: true
                });
            });
        </script>
    </div>


</body>
</html>


贾耶什·戈亚尼
纳米普特先生
{
背景：蓝色！重要；
边界：没有！重要；
}
$（文档）.ready（函数（）{
var crudServiceBaseUrl=”http://demos.telerik.com/kendo-ui/service",
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
}
},
批次：对，
页面大小：20，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{可编辑：false，可空：true}，
产品名称：{验证：{必需：true}}，
单价：{type:“number”，验证：{required:true，min:1}，
中止：{type:“boolean”}，
UnitsInStock:{type:“number”，验证：{min:0，必需：true}
}
}
}
});
$（“#网格”）.kendoGrid({
数据源：数据源，
可导航：是的，
pageable:对，
身高：550，
编辑：功能（e）{
var行=$（e.container）.最近的（“tr”）；
var rowindex=$（“tr”，grid.tbody）.index（行）；
var colIdx=$（“td”，行）.index（$（e.container））；
var columname=e.sender.columns[colIdx].字段；
警报（列名）；
e、 container.find（“[name=”+columnName+“]]”）。toggleClass（'naamInput'）；
},
工具栏：[“创建”、“保存”、“取消”]，
栏目：[
“产品名称”，
{字段：“单价”，标题：“单价”，格式：{0:c}，宽度：120}，
{字段：“单位库存”，标题：“库存单位”，宽度：120}，
{字段：“中断”，宽度：120}，
{命令：“销毁”，标题：，宽度：120}]，
可编辑：真
});
});

如果有任何问题，请告诉我。

这实际上是解决方案的一部分，但不是全部。我正在使用Razor，所以我将您的代码更改为.Events（Events=>Events.Edit（“grid_Edit”））和函数grid_Edit（e）{alert（e）；e.container.find（'[name=Naam]'）。toggleClass（'naamInput'）}。这是可行的，问题是它只对Naam列有效，我如何才能得到容器Naam？？css是一样的，我只需要得到容器的名称，而不是硬编码它。那你到底想要什么？您希望更改所有输入框颜色或仅更改一个输入字段颜色。函数网格_编辑（e）{e.container.find（'[name=ColumnName]'）。toggleClass（'naamInput'）}。我想对所有列执行完全相同的操作，但我不知道如何获取列名。我试过这个。selectedGridColumnName，但它没有定义。@ruimatins如果它都是

input

tag，那么就执行这个

e.container.find（'input'）。toggleClass（'naamInput'）

，它对网格中的所有字段都能正常工作。@ruimatins查看我编辑的Demo.HI。谢谢你的答复。我使用的是函数grid_edit（e）{var grid=$（“#grid”）.data（“kendoGrid”）；var row=$（e.container）。最近的（“tr”）；var rowindex=$（“tr”，grid.tbody）。index（row）；alert（rowindex）；var colIdx=$（“td”，row）。index（$（e.container））；var columnName=e.sender.columns[colIdx]。字段；警报（columnName）；e.container.find（“[name=”+“+columnName+”）”）”）。toggleClass（'naamInput'）；}但它不起作用，它甚至不执行

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div id="grid"></div>
        <style>
            .naamInput
            {
                background: blue !important;
                border: none !important;
            }
        </style>
        <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/Products",
                                dataType: "jsonp"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    navigatable: true,
                    pageable: true,
                    height: 550,
                    edit: function (e) {
                        var row = $(e.container).closest("tr");
                        var rowindex = $("tr", grid.tbody).index(row);
                        var colIdx = $("td", row).index($(e.container));
                        var columname = e.sender.columns[colIdx].field;
                        alert(columname);

                        e.container.find("[name='" + columname + "']").toggleClass('naamInput');
                    },

                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                        { field: "Discontinued", width: 120 },
                        { command: "destroy", title: " ", width: 120 }],
                    editable: true
                });
            });
        </script>
    </div>


</body>
</html>