Kendo grid and kendo window - creating custom kendo observable for the kendo window

2 posts, 0 answers
  1. Colin
    Colin avatar
    5 posts
    Member since:
    Mar 2013

    Posted 07 Jan 2014 Link to this post


    We are currently working on a kendo web project where we need to be able to have a button on a grid that opens a kendo modal window and then creates a custom viewmodel to be consumed by the current kendo window that can be passed into another kendo window.  However, I can't seem to find a way to bind a ViewModel into the kendo window.  Any help would be appreciated.  Here is my code:

    The problems that I know about are:
    • I don't know where to bind the observable to the window.
    • How to pass the same observable from window to window.

    <!DOCTYPE html>
            <link href="bootstrap.min.css" rel="stylesheet"/>
            <link href="kendo.common.min.css" rel="stylesheet" />
            <link href="kendo.bootstrap.min.css" rel="stylesheet" />
            <script type="text/javascript" src="jquery.min.js"></script>
            <script type="text/javascript" src="kendo.all.min.js"></script>
            <script type="text/javascript" src="bootstrap.min.js"></script>
            <div id="gridModal"></div>
            <div id="transaction"></div>
    <script type="text/x-kendo-template" id="template">
                Current Transaction Fee
                    <input id="locationFeeAmount" data-bind="value: locationFee">
                <a id="toModal2" type="button" class="k-button k-button-icontext" onclick="showSecondModal();">To Modal 2</a>
    <script type="text/x-kendo-template" id="modal2">
                Cuurent Transaction Fee:
                    <input value=#=locationFee #>
                <button class="k-button" id"toModal2"></button>
    $(function () {
            var locationFeeAdjustments = [{
            "CustomerName": "Fred Flinstone",
            "CustomerNumber": 123456234,
            "CustomerTransactionNumber": 2323423456789,
            "RepName": "Bugs Bunny",
            "CustomerBill": 34454.55,
            "locationFee": 89.22,
            "testField": "Bugs"},
            {"CustomerName": "Joe Smith",
            "CustomerNumber": 123434456,
            "CustomerTransactionNumber": 23456234556789,
            "RepName": "Jack Smith",
            "CustomerBill": 34454.55,
            "locationFee": 89.22,
            "testField": "Jack"
                data: locationFeeAdjustments,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            CustomerName: { type: "string"},
                            CustomerNumber: { type: "number"},
                            CustomerTransactionNumber: { type: "number"},
                            RepName: { type: "string"},
                            CustomerBill: { type: "string"},
                            locationFee: { type: "string"}
            pageable: true,
            height: 430,
            toolbar: ["create"],
            columns: [
                { field: "CustomerName", title: "Customer Name"},
                { field: "CustomerNumber", title: "Customer Number"},
                { field: "CustomerTransactionNumber", title: "Customer Transaction Number"},
                { field: "RepName", title: "Officer Name"},
                { field: "CustomerBill", title: "Bill Due"},
                { field: "locationFee", title: "Location Fee"},
                { command: {text: "Waive Location Fee", click: showTransactionModal}}],
            editable: "inline",
            save: function () {
        wnd = $("#transaction")
                title: "Transaction Fee",
                modal: true,
                visible: false,
                resizable: false,
                width: 300
        detailsTemplate = kendo.template($("#template").html());
        function showTransactionModal(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            kendoWindowViewModel = setViewModel(dataItem);
    function setViewModel(dataItem){
        var kendoWindowViewModel = kendo.observable({
        CustomerName: dataItem.CustomerName,
        CustomerNumber: dataItem.CustomerNumber,
        CustomerTransactionNumber: dataItem.CustomerTransactionNumber,
        CustomerBill: dataItem.CustomerBill,
        locationFee: dataItem.locationFee,
        Approver: "",
        AdjustmentAmount: ""});
        return kendoWindowViewModel;
    function showSecondModal(){
  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 09 Jan 2014 Link to this post

    Hi Colin,

    I checked your code and noticed the following issues:
    • There is no need to create a ViewModel (Observable object) from the dataItem.
      var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

      The dataItem variable is already an observable object so you can bind the template directly to it.

    • Do you need to update the modal Window content every time when the Command button is clicked? It looks like that the content is static, the only thing that changes is the dataItem to which the #locationFeeAmount input will be bound. Am I right?

      In that case you do need to use a template at all, instead you may simply put the template content inside the #transaction div.
      On click on the command button you should bind the #transaction element to the dataItem.

      function showTransactionModal(e) {
          var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
          kendo.bind($("#transaction"), dataItem);

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top