5

Kendo MVC コンポーネントと jQuery は初めてです。

私は剣道グリッドを構築しています。ページの読み込み時に、グリッド内の破棄 (削除) コマンドを非表示にしたいと考えています。その後、ページ上のボタンをクリックすると、表示されるはずです。

剣道グリッド:

@(Html.Kendo().Grid<Model>() 
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(product => product.DESCRIPTION).Title("Description");
        columns.Bound(product => product.CODE).Title("Description");
        columns.Command(commands =>
        {
            commands.Destroy().HtmlAttributes(new { id = "buttondelete" }); 
        }).Title("Operations");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create().Text("Add Records"); 
        toolbar.Save(); 
    })
                                 
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .Pageable(pager => pager
        .PageSizes(true)
        .Input(true)
        .Refresh(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Events(events => events.Error("onError"))
        .Model(model =>
        {
            model.Id(product => product.ID); // Specify the property which is the unique identifier of the model
            model.Field(p => p.DESCRIPTION).Editable(false);
            model.Field(product => product.CODE).Editable(false);
        })
        .Create(create => create.Action("a", "www")) 
        .Read(read => read.Action("b", "www"))  
        .Update(update => update.Action("c", "www"))  
        .Destroy(destroy => destroy.Action("d", "www")) 
    )
)

JS:

<script type="text/javascript">

    $(document).ready(function () {
        //$("#grid").find(".k-grid-delete").hide() // hide delete button
        $("#grid").find(".k-toolbar").hide(); // hide toolbar
        $(".k-grid-delete", "#grid").hide();
    });
    
    $('#EnableEdit').click(function () {
        $("#grid").find(".k-toolbar").show();
        
        // $(".k-grid-delete", "#grid").show();
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.at(0).fields["CODE"].editable = true;
        grid.dataSource.at(0).fields["DESCRIPTION"].editable = true;
    });

</script>

編集：最初の回答に従って一部を変更しました。k.grid $(".k-grid-delete", "#grid").hide();-delete クラスを非表示にできなくなりました。剣道グリッドが作成される前にJavaScriptがロードされていると思います。編集ボタンのクリック機能内で使用すると、削除ボタンが非表示になります。

4

2 に答える 2

4

各列に同じものを使用すると、同じものidを持つ多くの要素があり、これは合法idではありません。ボタンを識別する CSS クラス属性を使用してみてください。作成時 (ページの読み込み時) にボタンを非表示にしてから、クリックすると表示されます。delete

それらを隠すためのコード

$(".k-grid-delete", "#grid").hide();

それらを表示するためのコード

$('#EnableEdit').click(function () {
    $(".k-grid-delete", "#grid").show();
});

JSFiddle の例: http://jsfiddle.net/OnaBai/pSgeD/

于 2013-11-11T17:34:51.797 に答える