KendoUIグリッド編集ポップアップ、フィールドを非表示にする方法
グリッド自体に表示されているはずの編集ポップアップのフィールドを非表示にする方法はありますか？
私はそれをhidden：trueに設定しようとしましたが、剣道はそれを無視しているようです。 editableがfalseに設定されている場合、テキストボックスは非表示になりますが、フィールドラベルは引き続き表示されます。ラベルとテキストボックスの両方を取り除くことは可能ですか？
私のデータソース：
schema: {
total: "Total",
data: "Data",
model:{
id:"Id",
fields:{
Id:{ visible: false, editable:false },
Name:{ editable:true },
NumberOfUsers:{ hidden:true, editable:false }
}
}
}
「hidden：true」などのオプションはなく、これが無視されている理由です。グリッドの edit イベントを使用して、ポップアップウィンドウから一部の要素を非表示にすることができます。
$("#grid").kendoGrid({
edit: function(e) {
e.container.find("input:first").hide();
}
});
同様の解決策が私にとってうまくいきました：
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
},
ASP.NET MVCにHtml.Kendo（）。Grid <>（）を使用している場合は、次のようにする必要があります。
次のように、コントロール属性の.EventsにEditイベントハンドラーを追加します。
.Events(e => e.Edit("hideIdField"))
「hideIdField」はjsイベントハンドラー関数です。
EventHandlers.jsに関数を追加します。
function hideIdField(e) {
$("#ProductID").hide();
$("label[for='ProductID']").hide();
}
ProductIDは、ソースモデルのIdフィールドの名前です。
私は @ jflが与える答え が好きで、そのアイデアを取り入れて、再利用可能な素敵な設定に拡張すると便利です。
どうして？非表示にする必要のある列の序数を追跡するには、脆弱性があります。つまり、@ jflの回答onlyは最初のフィールドセット/列に対して機能し、 私のクイックコメントのバージョン でもそれが必要です列の順序と数は変わりません。
代わりに、列の宣言にプロパティを配置して列を非表示にする方法を標準化し、ポップアップが表示された後に呼び出されるeditイベントハンドラーでそのプロパティを確認できます。 columnsイベントで完全なedit宣言への参照を取得するため、柔軟性が大幅に向上します。
私は このフィドルでの完全な例 を持っていますが、ここでは簡単に説明します。
列宣言にhideMeプロパティを追加しました：
columns: [
{ field: "name" },
{ field: "position" },
{
field: "age",
hideMe: true // <<< This is new.
},
{ command: "edit" }
],
次に、前述の回答とコメントに基づいて、これをeditハンドラーに入れます。
e.sender.columns.forEach(function (element, index /*, array */) {
if (element.hideMe) {
e.container.find(".k-edit-label:eq(" + index + "), "
+ ".k-edit-field:eq( " + index + ")"
).hide();
}
});
これ以上の列序数追跡は必要ありません。列の追加、注文の変更、新しい列の非表示など、hideMeが付いているものを変更するだけで行えます。 （振り返ってみると、おそらくhideMeOnEditと呼ぶべきでしたが、要点はわかります。）
フィールドを非表示にするには、これをビューモデルに追加するだけです。
[ScaffoldColumn(false)]
public int Id { get; set; }
そして、あなたが提出したままにしておきたいだけの場合は、次のようにします：
@(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden()
columns.Bound(m => m.Name)
}))
同様の解決策が私にとってうまくいきました：
edit: function(e) {
e.container.find("label[for=yourFieldName]").parent("div .k-edit-label").hide();
e.container.find("label[for=yourFieldName]").parent().next("div .k-edit-field").hide();
},
たとえば、フィールド_があります。
edit: function(e) {
e.container.find("input[name='PK_']").hide();
e.container.find("label[for='PK_']").hide();
}
ASP.NET MVCのUIを使用している場合、コントロール自体を非表示にするだけでなく、フロントエンドのスペースを占有しているFirstParent divも非表示にすることができる次のアプローチを使用できます。
イベントハンドラーの追加
Html.Kendo().Grid<ProductDTO>()
.Name("GRVProducts")
.Columns(c =>
{
c.Bound(p => p.ProductID);
c.Bound(p => p.Name);
c.Bound(p => p.Price);
}
)
.Events(events=> events.Edit("HideGridFields"))
JavaScriptを追加
<script type="text/javascript">
function HideGridFields(e)
{
HideControl("ProductID", e); //Hide ProductID control with Label and parent tag. No space occupied ;)
}
function HideControl(fieldName, e)
{
var cont = $(e.container);
HideFieldLabel(cont.find("label[for='"+fieldName+"']"));
HideFieldField(cont.find("#" +fieldName));
}
function HideFieldLabel(control)
{
control.parent(".editor-label").hide();
}
function HideFieldField(control) {
control.parent(".editor-field").hide();
}
</script>
LabelおよびParentタグでProductIDコントロールを非表示にします。葉側にスペースがありません;）
Ruffinの回答に表示されているループのインデックスを使用する代わりに、反復列のフィールドに一致するfor属性を検索して、列の対応するラベルインデックスを取得することもできます。剣道のデフォルトテンプレートは、すべてのエディターラベルのfor属性を自動的に生成します。
var labels = e.container.find('.k-edit-label');
e.sender.columns.forEach(function (element) {
if (element.hideMe) {
var index = labels.find('label[for="' + element.field + '"]').parent().index();
if (index !== 0) //Prevent a potential zero division
index = index / 2;
e.container.find(".k-edit-label:eq(" + index + "), " + ".k-edit-field:eq( " + index + ")").hide();
}
});
次のような関数を作成します。
function noEditor(container, options) { container.prevObject.find("div[data-container-for='" + options.field + "']").hide(); container.prevObject.find("label[for='" + options.field + "']").parent().hide(); }
次に、フィールドで、editorプロパティを次のように設定します。
columns: [
{ field: "Field1", title: "Field 1", editor: noEditor },
{ field: "Field2", title: "Field 2" },
{ field: "Field3", title: "Field 3" },
{ field: "Field4", title: "Field 4", editor: noEditor }
]
これにより、ポップアップエディタで複数のフィールドを簡単に非表示にすることができます。この場合、Field1、Field2、Field3、Field4はグリッドに表示されますが、Field1とField4はポップアップエディタに表示されません。
モデルでデータ注釈を使用するオプションを忘れないでください。
[HiddenInput(DisplayValue = false)]
（モデルがASP.NET MVCに基づいている場合）
TypeScript 1.x用にruffinによって与えられた答えを拡張する
グリッド編集イベントで：
, edit: function (e) {
e.sender.columns.forEach((element, index) => {
var ele: any = element;
if (ele.attributes != undefined) {
if (ele.attributes.hideMe) {
e.container.find(".k-edit-label:eq(" + index + "), "
+ ".k-edit-field:eq( " + index + ")"
).hide();
}
}
});
}
列にhideMe要素を属性として追加します。
columns: [
{
field: "Id",
title: "", width: 1,
attributes: { hideMe: true }
},
...
TypeScriptは、宣言されていない1つの列フィールドをエラーとして報告するため、これが必要です。