Create a custom edit popup for a dynamic grid in Kendo UI using kendo.Observable() object?

Question

Can somebody tell me, following scenario can achieve using Kendo UI ??

I am making a dynamic grid. Because my data source is dynamic. Then I need a custom edit popup for update field.

In hear what I done is I make a new kendo.Observable() object and make the input fields and then try to bind the data that received for the template.

But this method is not working. Can someone tell me there is a way to achieve this ??

If you need more info I can update this.. Thank you.

Edit

update code : This is my dynamic grid.

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 });

This is my custom template.

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

Here is my observable object

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

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

If I explain this more I try to bind different view model to update popup via kendo observable object. Can I do something like that ??

Answer 1

The editable.template option of the grid allows you to customize the popup editor. Here is some sample code:

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