Add an Update and Cancel button to a popup with a custom command

[Ken]

I am using this page as a starting point:
    http://demos.kendoui.com/web/grid/custom-command.html

Notice on this page that when you click the "View Details" button and the customized popup is displayed, there is no "Update" or "Cancel" button.

I want to keep the functionality of being able to assign properties of the window, such as title, width, etc. as shown by:

wnd = $("#details")
  .kendoWindow({
    title: "Customer Details",
    modal: true,
    visible: false,
    resizable: false,
    width: 960
  }).data("kendoWindow");

and want to add the "Update" and "Cancel" buttons as displayed in:

    http://demos.kendoui.com/web/grid/editing-popup.html

I have been able to display the buttons by adding the anchor tags copied for the buttons from a normal popup window, but it isn't bound to any events although it displays the buttons, it won't fire the save or cancel actions.

Here is my template code:

<script type="text/x-kendo-template" id="editClientTemplate">
    <div id="details-container">
        <h2>#= borrowerFirstName # #= borrowerLastName #</h2>
        <em>Contact ID #= contactId #</em>
    </div>
    <a class="k-button k-button-icontext k-grid-update" href="\\#"><span class="k-icon k-update"></span>Update</a>
    <a class="k-button k-button-icontext k-grid-cancel" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
</script>

I've tried many different things and nothing has worked.

[Dimiter Madjarov]

Hi Ken,


In the current scenario when the custom command is clicked, the Grid is not entering edit mode, it is just opening a custom window. This is why the Update and Cancel buttons are not working. As an alternative you could use a custom popup editor with additional fields or buttons as demonstrated in the attached example and in this Code Library. To specify custom properties for the window, you could bind to the edit event of the Grid and do it in the event handler.
E.g.

function edit(e) {
   var editWindow = $(e.container).data("kendoWindow");
   //assign custom properties
}

 

Greetings,
Dimiter Madjarov
the Telerik team

[Ken]

Thanks, Dimiter, for explaining about modifying the window properties in the edit event, which you can see in the following code:

edit: function(e) {
  $(e.container).kendoWindow({
    title: "Customer Details",
    modal: true,
    visible: true,
    resizable: false
  });
},

Except now the MVVM binding has stopped working. Any fields bound with data-bind don't display in my template:

<script type="text/x-kendo-template" id="editClientTemplate">
  <div id="details-container">
    <h2>#= borrowerFirstName # #= borrowerLastName #</h2>
    <em>Contact ID #= contactId #</em>
    <dl>
      <dt><label>Borrower First Name: <input data-bind="value: borrowerFirstName" class="k-textbox" /></label></dt>
      <dt><label>Borrower Last Name: <input data-bind="value: borrowerLastName" class="k-textbox" /></label></dt>
      <dt>Branch Name: #= branchName #</dt>
      <dt>UID: #= uid #</dt>
    </dl>
  </div>
</script>

While #= borrowerName # display's the borrower name in the h2 tag, the input box bound to borrowerName is blank. 

How do I hook up the MVVM data binding back to the template?

[Dimiter Madjarov]

Hi Ken,


The editor template in the sample code, that you attached seems correct and I am not sure why exactly are you experiencing such a strange behavior. Could you send me a sample project, where the issue is reproducing so I could test it locally and assist you further?

I am looking forward to hearing from you.

 

Greetings,
Dimiter Madjarov
the Telerik team

[Ken]

Hi Dimiter,

Attached is the sample project you've asked for. The project is strait html, using v2013.1.119 of Kendo UI Web, and is using people.js as the data source.

edit: function(e) {
  var title = e.model.FirstName + " " + e.model.LastName ;
  var wnd = $(e.container).kendoWindow({
    modal: true,
    resizable: false,
    draggable: true,
    title: title,
    visible: true
  }).data("kendoWindow");

  // NOW NEED TO BIND DATA TO DATASOURCE
}

[Dimiter Madjarov]

Hello Ken,


The reason for the issue in the current scenario is that the window is initialized a second time when you call the kendoWindow() method and the binding is lost. You should get the data for the window via jQuery data method and use the setOptions method to assign properties.
E.g.

var title = e.model.FirstName + " " + e.model.LastName ;
var wnd = $(e.container).data("kendoWindow");
wnd.setOptions({
   title: title,
});

To set the container properties, you should use the editable.window configuration of the Grid, because in the edit event it is already initialized. Sorry for slightly misleading you on this topic in my previous post.
E.g.

editable: {
    mode: "popup",
    window: {
        resizable: true,
        modal: false,
        draggable: true,
        visible: true
    },
    template: kendo.template($("#editClientTemplate").html())
}

I am attaching the modified example. I hope this information was helpful for you.

 

Greetings,
Dimiter Madjarov
the Telerik team

[Ken]

Excellent! That worked perfect. Thanks Dimiter!

~Ken