1

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

NoughT
  • 675
  • 4
  • 20
  • 39

1 Answers1

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>
Atanas Korchev
  • 30,562
  • 8
  • 59
  • 93
  • In my situation this method is not suit. Because My data source is dynamic . In here we have static fields. My fields are dynamic. What I want to know is Can I trigger a update popup and bind a 'kendo.Observable()' object to that update popup ?? – NoughT Sep 15 '15 at 07:07
  • I added some code to question. It will help to you. – NoughT Sep 15 '15 at 07:25
  • I have a another question. Can you please look at this ... http://stackoverflow.com/questions/32623574/bind-kendovalidator-object-to-custom-grid-update-popup – NoughT Sep 18 '15 at 04:37