Kendo Grid Popup Edit mode not displaying ComboBox data

Question

I have an issue displaying combobox data on the dropdown when I am in popup edit mode in my kendo grid. When the editable parameter in the grid is changed to 'inline', the combobox behaves like it should. I think that the problem is in the custom popup template, but many changes have still produced no result.

Here's the script in the .cshtml file:

<script id="popup_editor" type="text/x-kendo-template">
    <label for="name">Page Name</label>
    <input name="name"
           data-bind="name"
           data-value-field="id"
           data-text-field="name"
           data-role="combobox" />
</script>

Here's the javascript:

var griddata = new kendo.data.DataSource({
    transport: {
        read: {
            url: serviceRoot + "Approval/Get",
            type: "POST",
            contentType: jsonType,
            cache: false
        },
        destroy: {
            url: serviceRoot + "Approval/Delete",
            type: "PUT",
            complete: function(e) {
                refreshData();
            }
        },
        create: {
            url: serviceRoot + "Approval/Create",
            type: "PUT",
            complete: function(e) {
                refreshData();
            }
        },
        update: {
            url: serviceRoot + "Approval/Inline",
            type: "PUT",
            complete: function(e) {
                refreshData();
            }
        }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    scrollable: true,
    height: 700,
    schema: {
        data: "list",
        total: "total",
        model: {
            id: "id",
            fields: {
                id: { editable: false, nullable: false },
                name: { editable: true, nullable: false, validation: { required: true }, type: "string" },
                keyName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
                countryName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: griddata,
    selectable: "row",
    allowCopy: true,
    scrollable: true,
    resizable: true,
    reorderable: true,
    sortable: {
        mode: "single",
        allowUnsort: true
    },
    toolbar: [{ name: "create", text: "Create New Content" }}],
    edit: function(e) {
        if (e.model.isNew() === false) {
            $('[name="PageName"]').attr("readonly", true);
        }
    },
    columns: [
        { field: "id", hidden: true },
        { field: "name", title: "Page Name", editor: PageNameComboBoxEditor, width: "200px" },
        {
            command: [
                { name: "edit" },
                { name: "destroy" }
            ],
            title: " ",
            width: "250px"
        }
    ],
    editable: {
        mode: "popup",
        template: kendo.template($("#popup_editor").html())
    },
    pageable: {
        refresh: true,
        pageSizes: [5, 10, 15, 20, 25, 1000],
        buttonCount: 5
    },
    cancel: function(e) {
        $("#grid").data("kendoGrid").dataSource.read();
    }
}); 

function PageNameComboBoxEditor(container, options) {
    ComboBoxEditor(container, options, "name", "id", "ApprovalPage/Get", options.model.id, options.model.name);
}
function ComboBoxEditor(container, options, textfield, valuefield, url, defaultid, defaultname) {
    $("<input required data-text-field=\"" + textfield + "\" data-value-field=\"" + valuefield + "\" data-bind=\"value:" + options.field + "\"/>")
        .appendTo(container)
        .kendoComboBox({
            autoBind: false,
            dataTextField: textfield,
            dataValueField: valuefield,
            text: defaultname,
            value: defaultid,
            select: function(e) {
                var dataItem = this.dataItem(e.item);
                var test = dataItem;
            },
            dataSource: {
                transport: {
                    read: {
                        url: serviceRoot + url,
                        type: "GET"
                    }
                }
            }
        });
}

Any direction would be appreciated!

Answer 1

First i noticed that you have typo and some double initialization and it's value specified different which cause problem (not sure if this is your problem so please try remove it),

<input name="name"
data-bind="name" -> typo maybe? no data-binding declaration like these
data-value-field="id" -> double init, you have it on your ComboBoxEditor function dataValueField: valuefield,
data-text-field="name" -> double init, you have it on your ComboBoxEditor function dataTextField: textfield,
data-role="combobox" />

But sure way to make it works i'm usually customize the edit function to declare the kendo widget for mode: popup like this :

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

  <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <div id="grid"></div>
    <script id="popup_editor" type="text/x-kendo-template">
      <div>
        <label for="name">Page Name</label>
        <input id="combo_box" name="name" data-role="combobox" />
      </div>
    </script>
    <script>
      $(document).ready(function() {
        var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
          dataSource = new kendo.data.DataSource({
            transport: {
              read: {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
              },
              update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
              },
              destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
              },
              create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {
                    models: kendo.stringify(options.models)
                  };
                }
              }
            },
            batch: true,
            pageSize: 20,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: {
                    editable: false,
                    nullable: true
                  },
                  ProductName: {
                    validation: {
                      required: true
                    }
                  },
                  UnitPrice: {
                    type: "number",
                    validation: {
                      required: true,
                      min: 1
                    }
                  },
                  Discontinued: {
                    type: "boolean"
                  },
                  UnitsInStock: {
                    type: "number",
                    validation: {
                      min: 0,
                      required: true
                    }
                  }
                }
              }
            }
          });

        dataSource.fetch();

        $("#grid").kendoGrid({
          dataSource: dataSource,
          pageable: true,
          height: 550,
          toolbar: ["create"],
          editable: {
            mode: "popup",
            template: kendo.template($("#popup_editor").html())
          },
          edit: function(e) {
            $("#combo_box").kendoComboBox({
              autoBind: false,
              dataTextField: 'ProductName',
              dataValueField: 'ProductID',
              filter: "contains",
              text: e.model.ProductName,
              value: e.model.ProductID,
              dataSource: ({
                type: "jsonp",
                serverFiltering: true,
                transport: {
                  read: {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                  },
                }
              })

            });
          },
          columns: [{
            field: "ProductName",
            title: "Product Name"
          }, {
            field: "UnitPrice",
            title: "Unit Price",
            format: "{0:c}",
            width: "120px"
          }, {
            field: "UnitsInStock",
            title: "Units In Stock",
            width: "120px"
          }, {
            field: "Discontinued",
            width: "120px"
          }, {
            command: ["edit", "destroy"],
            title: "&nbsp;",
            width: "250px"
          }],

        });
      });
    </script>
  </div>


</body>

</html>