Создайте настраиваемое всплывающее окно для динамической сетки в пользовательском интерфейсе Kendo с использованием объекта kendo.Observable()?

Question

Может ли кто-нибудь сказать мне, что следующий сценарий может достичь использования интерфейса Kendo?

Я делаю динамическую сетку. Потому что мой источник данных динамичен. Тогда мне нужно создать настраиваемое всплывающее окно для обновления.

Вслух, что я сделал, я создаю новый объект 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 объекта. Могу ли я сделать что-то подобное?

Answer 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>