web-dev-qa-db-ja.com

条件が満たされた場合、Kendo Gridでセルを読み取り専用にします

次のようなデータがあるとします。

[
    {ID: 1, SomeForeignKeyID: 4, IsFkEnabled: true},
    {ID: 2, SomeForeignKeyID: 9, IsFkEnabled: false}
]

Kendo Gridはこのデータを使用しています：

columns.Bound(m => m.ID);
columns.ForeignKey(p => p.SomeForeignKeyID, ViewBag.ForeignKeys as IEnumerable<object>, "Value", "Name");

問題は次のとおりです。IsFkEnabled== trueの場合、ForeignKey列を行のみで編集可能にする方法は？編集モードはInCellです。

javascriptkendo-uikendo-gridkendo-asp.net-mvc
26
Andrzej

注：

  • このソリューションは、セル内編集のみに機能します（インラインまたはポップアップ編集には別のアプローチが必要です）
  • 最初のアプローチは、特定の状況下で不要な視覚効果（グリッドジャンプ）につながる可能性があります。あなたがそれを経験した場合、私はアプローチ＃2をお勧めします
  • mVCラッパーを使用する場合、アプローチ＃2は機能しない可能性があります（ただし、Kendo.Mvc.UI.Fluent.GridEventBuilderを拡張することも可能です）。その場合、JSで編集ハンドラーをバインドする必要があります

アプローチ＃1

グリッドの edit イベントを使用して、次のようなことを行います。

$("#grid").kendoGrid({
    dataSource: dataSource,
    height: "300px",
    columns: columns,
    editable: true,
    edit: function (e) {
        var fieldName = e.container.find("input").attr("name");
        // alternative (if you don't have the name attribute in your editable):
        // var columnIndex = this.cellIndex(e.container);
        // var fieldName = this.thead.find("th").eq(columnIndex).data("field");

        if (!isEditable(fieldName, e.model)) {
            this.closeCell(); // prevent editing
        }
    }
});

/**
 * @returns {boolean} True if the column with the given field name is editable 
 */
function isEditable(fieldName, model)  {
    if (fieldName === "SomeForeignKeyID") {
        // condition for the field "SomeForeignKeyID" 
        // (default to true if defining property doesn't exist)
        return model.hasOwnProperty("IsFkEnabled") && model.IsFkEnabled;
    }
    // additional checks, e.g. to only allow editing unsaved rows:
    // if (!model.isNew()) { return false; }       

    return true; // default to editable
}

デモはこちら （ 2014年第1四半期に更新 ）

MVCの流れるような構文でこれを使用するには、名前の上に匿名のedit関数を指定するだけです（例：onEdit）：

function onEdit(e) {
    var fieldName = e.container.find("input").attr("name");
    // alternative (if you don't have the name attribute in your editable):
    // var columnIndex = this.cellIndex(e.container);
    // var fieldName = this.thead.find("th").eq(columnIndex).data("field");

    if (!isEditable(fieldName, e.model)) {
        this.closeCell(); // prevent editing
    }
}

次のように参照します。

@(Html.Kendo().Grid()
    .Name("Grid")
    .Events(events => events.Edit("onEdit"))
)

これの欠点は、編集イベントがトリガーされる前にエディターが最初に作成されることです。これにより、望ましくない視覚効果が生じることがあります。

アプローチ＃2

editCellメソッドをbeforeEditイベントをトリガーするバリエーションでオーバーライドして、グリッドを拡張します。グリッドオプションを使用するには、initメソッドもオーバーライドする必要があります。

var oEditCell = kendo.ui.Grid.fn.editCell;
var oInit = kendo.ui.Grid.fn.init;
kendo.ui.Grid = kendo.ui.Grid.extend({
    init: function () {
        oInit.apply(this, arguments);
        if (typeof this.options.beforeEdit === "function") {
            this.bind("beforeEdit", this.options.beforeEdit.bind(this));
        }
    },
    editCell: function (cell) {
        var that = this,
            cell = $(cell),
            column = that.columns[that.cellIndex(cell)],
            model = that._modelForContainer(cell),
            event = {
                container: cell,
                model: model,
                field: column.field
            };

        if (model && this.trigger("beforeEdit", event)) {
            // don't edit if prevented in beforeEdit
            if (event.isDefaultPrevented()) return;
        }

        oEditCell.call(this, cell);
    }
});
kendo.ui.plugin(kendo.ui.Grid);

＃1と同様に使用します。

$("#grid").kendoGrid({
    dataSource: dataSource,
    height: "300px",
    columns: columns,
    editable: true,
    beforeEdit: function(e) {
        var columnIndex = this.cellIndex(e.container);
        var fieldName = this.thead.find("th").eq(columnIndex).data("field");

        if (!isEditable(fieldName, e.model)) {
            e.preventDefault();
        }
    }
});

このアプローチの違いは、エディターが最初に作成（およびフォーカス）されないことです。 beforeEditメソッドは、＃1と同じisEditableメソッドを使用しています。 このアプローチのデモはこちら を参照してください。

MVCラッパーでこのアプローチを使用したいが、GridEventBuilderを拡張したくない、または拡張できない場合、JavaScriptでイベントハンドラーをバインドできます（グリッドMVCイニシャライザーの下に配置）。

$(function() {
    var grid = $("#grid").data("kendoGrid");
    grid.bind("beforeEdit", onEdit.bind(grid));
});
43
Lars Höppner

これらのアプローチはどれも役に立たなかった。非常に単純な実装は次のようになります

edit: function (e) {
        e.container.find("input[name='Name']").each(function () { $(this).attr("disabled", "disabled") });       
    }

編集は剣道グリッド宣言の一部であり、名前はフィールドの実際の名前です。

5
pat capozzi

以下のコードスニペットで試してください。

[〜＃〜] view [〜＃〜]

<script type="text/javascript">  

function errorHandler(e) {  
    if (e.errors) {  
        var message = "Errors:\n";  
        $.each(e.errors, function (key, value) {  
            if ('errors' in value) {  
                $.each(value.errors, function () {  
                    message += this + "\n";  
                });  
            }  
        });  
        alert(message);  
    }  
}  

function onGridEdit(arg) {  
    if (arg.container.find("input[name=IsFkEnabled]").length > 0) {
        arg.container.find("input[name=IsFkEnabled]").click(function () {
            if ($(this).is(":checked") == false) {  

            }  
            else {  
                arg.model.IsFkEnabled = true;
                $("#Grid").data("kendoGrid").closeCell(arg.container);  
                $("#Grid").data("kendoGrid").editCell(arg.container.next());  
            }  
        });  
    }  
    if (arg.container.find("input[name=FID]").length > 0) {  
        if (arg.model.IsFkEnabled == false) {
            $("#Grid").data("kendoGrid").closeCell(arg.container)  
        }  
    }  
}  
</script>  

<div>
@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.IsFkEnabled);
        columns.ForeignKey(p => p.FID,   (System.Collections.IEnumerable)ViewData["TestList"], "Value", "Text");

    })
    .ToolBar(toolBar => toolBar.Save())
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Events(e => e.Edit("onGridEdit"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Model(model =>
        {
            model.Id(p => p.ID);
            model.Field(p => p.ID).Editable(false);
        })
    .Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
    .Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
    )
)
</div>

[〜＃〜] model [〜＃〜]

namespace MvcApplication1.Models
{
    public class TestModels
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsFkEnabled { get; set; }
        public int FID { get; set; }
    }
}

[〜＃〜] controller [〜＃〜]

public class HomeController : Controller
{
    public ActionResult Index()
    {

        List<SelectListItem> items = new List<SelectListItem>();

        for (int i = 1; i < 6; i++)
        {
            SelectListItem item = new SelectListItem();
            item.Text = "text" + i.ToString();
            item.Value = i.ToString();
            items.Add(item);
        }

        ViewData["TestList"] = items;

        return View();
    }

    public ActionResult ForeignKeyColumn_Read([DataSourceRequest] DataSourceRequest request)
    {
        List<TestModels> models = new List<TestModels>();

        for (int i = 1; i < 6; i++)
        {
            TestModels model = new TestModels();
            model.ID = i;
            model.Name = "Name" + i;

            if (i % 2 == 0)
            {
                model.IsFkEnabled = true;

            }

            model.FID = i;


            models.Add(model);
        }

        return Json(models.ToDataSourceResult(request));
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ForeignKeyColumn_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<TestModels> tests)
    {
        if (tests != null && ModelState.IsValid)
        {
            // Save/Update logic comes here  
        }

        return Json(ModelState.ToDataSourceResult());
    }
}

デモをダウンロードする場合は、 here をクリックします。

2
Jayesh Goyani

別のアプローチは、条件に応じて入力要素またはプレーンdivを提供する列定義に独自の「エディター」関数を使用することです。

0
Bhaskar

最も簡単な方法は、dataBoundイベントを使用して、グリッドが編集のために無視するセルに特別なCSSクラスの1つを条件付きで適用することです。

  • http://dojo.telerik.com/izOka

       dataBound: function(e) {
      var colIndex = 1;

      var rows = this.table.find("tr:not(.k-grouping-row)");
      for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var model = this.dataItem(row);

        if (!model.Discontinued) {
          var cell = $($(row).find("td")[colIndex]);
          cell.addClass("k-group-cell");
        }
      }

    },
0
Vladimir Iliev