1

次のシナリオはKendo UIを使用して達成できますか??

動的グリッドを作成しています。データ ソースが動的であるためです。次に、更新フィールドのカスタム編集ポップアップが必要です。

私がやったことを聞いて、新しいkendo.Observable()オブジェクトを作成し、入力フィールドを作成してから、テンプレート用に受け取ったデータをバインドしようとしました。

しかし、この方法はうまくいきません。誰かがこれを達成する方法があると教えてもらえますか??

さらに情報が必要な場合は、これを更新できます..ありがとう。

編集

更新コード: これは私の動的グリッドです。

var grid = $("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({ // this will be dynamic data       source}),
editable: {
                mode: "popup",
                template: kendo.template($("#myCustomPopup").html())
            },



columns: leadFields });

これは私のカスタム テンプレートです。

<script type="text/x-kendo-template" id="myCustomPopup">
    #console.log(data);#
    <div id="mySecondCustomPopup">
        <table data-template="myCustomFieldsTemplate" data-bind="source: dataField"></table>
    </div>
</script>

<script type="text/x-kendo-template" id="myCustomFieldsTemplate">
 // in here I try to make field using kendo.Observable() object
<script>

これが私のobservableオブジェクトです

var viewModel = kendo.observable({dataField: leadArray});

kendo.bind($("#mySecondCustomPopup"), viewModel);

これをさらに説明すると、別のビューモデルをバインドして、kendo observableオブジェクトを介してポップアップを更新しようとします。私はそのようなことをすることができますか??

4

1 に答える 1

1

グリッドのeditable.templateオプションを使用すると、ポップアップ エディターをカスタマイズできます。サンプルコードは次のとおりです。

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input data-bind="value:name" /></label>
  </p>
  <p>
    <label>Age:<input data-role="numerictextbox" data-bind="value:age" /></label>
  </p>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>
于 2015-09-15T07:01:35.090 に答える