在Kendo网格的一列中禁用kendo编辑器

时间:2014-08-22 08:22:23

标签: kendo-grid disabled-control kendo-editor

我有这个剑道网格

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox'/>").Width(10).Hidden(!Model.Administrator);
        columns.Bound(product => product.Naam).Width(125).ClientTemplate("<div id='editorDiv'><div class='input'>#=Naam#</div><div class='editor'>" + 
            Html.WebCore().LinkButton(type: ButtonType.MeerActies, htmlAttributes: new { onclick = "openPopupDemo('#: Naam #', '#: ID #', 'Naam')" }));

        columns.Bound(product => product.Waarde).Width(125).ClientTemplate("<div id='editorDiv'><div class='input'>#=Waarde#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.MeerActies, htmlAttributes: new { onclick = "openPopupDemo('#: Waarde #', '#: ID #', 'Waarde')" }));

        columns.Bound(product => product.Opmerking).Width(250).ClientTemplate("<div id='editorDiv'><div class='input'>#=Opmerking#</div><div class='editor'>" + 
            Html.WebCore().LinkButton(type: ButtonType.MeerActies, htmlAttributes: new { onclick = "openPopupDemo('#: Opmerking #', '#: ID #', 'Opmerking')" }));

        columns.Template(@<text></text>).ClientTemplate("<div id='deleteDiv'><div class='delete'><a class=\"delete iconBtn\" onclick=\"deleteResourceItem(#: ID #, '#: Naam #')\"></a></div></div>").Width(10).Hidden(!Model.Administrator);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Events(events => events.Edit("onCellEdit"))
    .Groupable()
    .Navigatable()
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)

        .Model(model =>
        {
            model.Id(product => product.ID);
            model.Field(product => product.Naam).Editable(Model.Administrator);
            model.Field(product => product.Opmerking).Editable(Model.Administrator);
            model.Field(product => product.Waarde).Editable(!Model.ReadOnly);
            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))
    )
    )

@Html.WebCore().Popup.Remove("confirmResourceItemPopup", "Verwijderen resource item", "")

这是网格的图片 enter image description here

虚线按钮打开Kendo编辑器。

我在项目中使用声明身份验证。我有ReadOnly和管理员权限。如果您具有ReadOnly权限,则禁用编辑器。

这是我的编辑。

@Html.WebCore().Popup.CustomButtons("popupDemo", "Waarde", Html.Kendo().Editor().Name("waardeEditor").HtmlAttributes(new { @class = "editorStyle" }).Tools(tools => tools
    .Clear()
    .Bold().Italic().Underline().Strikethrough()
    .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
    .InsertUnorderedList().InsertOrderedList()
    .Outdent().Indent()
    .CreateLink().Unlink()
    .InsertImage()
    .SubScript()
    .SuperScript()
    .TableEditing()
    .ViewHtml()
    .Formatting()
    .FontName()
    .FontSize()
    .FontColor().BackColor()        
).ToHtmlString(), new[]{new PopupButton("popupDemoAnnuleren", "Cancel", false),new PopupButton("popupDemoOk", "OK")})

这是在ReadOnly为true时禁用它的代码。

 $(document).ready(function () {
            if ('@Html.Raw(Json.Encode(Model.ReadOnly))' == "true") {
                $("#waardeEditor").data("kendoEditor").body.contentEditable = false;
            }
        });

所以,这样做是在编辑器中禁用编辑,无论你点击哪个按钮。

现在,我的情况是用户具有超过ReadOnly权限,但也不是管理员。这意味着他只能编辑并保存Waarde列。

我确实有一种方法可以禁用其他列中的按钮,但是我的应用程序的要求指定用户应该能够在编辑器中打开Naam和Opmerking列中的单元格内容,但是不能编辑它,他们应该能够打开和编辑Waarde列的内容。

这就是我被困住的地方。我无法找到在所有列中禁用编辑器的方法,除非您单击Waarde列中的任何按钮。

1 个答案:

答案 0 :(得分:0)

我做到了。它比我想象的要简单。我使用了用于打开编辑器的onPopupDemo方法。

这里是代码。

 var selectedGridRowID = 0;
        var selectedGridColumnName;
        function openPopupDemo(gridCellContent, gridIdentifier, columnIdentifier) {
            var editor = $("#waardeEditor").data("kendoEditor")

            if ('@Html.Raw(Json.Encode(Model.ReadOnly))' == "false" && '@Html.Raw(Json.Encode(Model.Administrator))' == "false" && columnIdentifier != "Waarde") {
                editor.value(gridCellContent)
                editor.body.contentEditable = false;
            }
            else {
                editor.value(gridCellContent)
                editor.body.contentEditable = true;
            }

            domain.WebCore.popup.show("popupDemo");
            selectedGridRowID      = gridIdentifier;
            selectedGridColumnName = columnIdentifier;
        };