Search code examples
kendo-uikendo-gridkendo-combobox

unable to add record in a kendoGrid


I have a problem, working over for three days, but can't find any solution!!! In the document.ready, i create a datasource with subobjects

var datasource = [
  {
   "category": {
      "id_category": 1,
      "desc_category": "Beverages"
  },
   "id_product": 1,
      "desc_product": "Chai",
      "price": "11",
      "id_category": 1
  },
  {
   "category": {
      "id_category": 2,
      "desc_category": "Condiments"
  },
    "id_product": 2,
      "desc_product": "Aniseed Syrup",
      "price": "12",
      "id_category": 2
 }
]

and then i create a kendogrid

var kendoGrid = $("#grid").kendoGrid({

    selectable: true,
    dataSource: datasource,
    resizable: true,
    toolbar: [{
        name: "create",
        text: "Add Something"
    }],
    columns: [
        { field: "desc_product", title: "Description", width: 100 },
        { field: "price", title: "Price", width: 100 },
        { field: "id_product", title: "Category", width: 200, editor: categoryDropDownEditor, template: '#=category.desc_category#' },
        {
            command: [{
                name: "destroy",
                text: "Delete",
                confirmation: "Are you sure?"
            },
            {
                name: "edit",
                text: {
                edit: "Edit",
                update: "Update",
                cancel: "Cancel"
            }
            }
            ]
        }
    ],
    width: 200,
    height: 300,
    editable: editable = {
        mode: "inline",
        confirmation: "Are you sure?"
    }
});

and finally the function to fill the combobox in the grid in edit mode

function categoryDropDownEditor(container, options) {
var ds = [
{         
      "id_category": 1,
      "desc_category": "Beverages"
},
{
   "id_category": 2,
   "desc_category": "Condiments"
},
{
   "id_category": 3,
   "desc_category": "Confections"
},
{
   "id_category": 4,
   "desc_category": "Produce"
},
{
   "id_category": 5,
   "desc_category": "Sea Food"
}
];

$('<input data-text-field="desc_category" data-value-field="id_category" data-bind="value:' + options.field + '"/>"')
  .appendTo(container)
  .kendoComboBox({
      index: 0,
      placeholder: "Select Category",
      dataTextField: "desc_category",
      dataValueField: "id_category",
      dataSource: ds
  })
}   

the problem is that when I try to add a new record, it runs an error (runtime error: category is undefined).

can someone tell me if the datasources are right? is the structure of the code right? Where is the problem?

hope someone can help me!!!


Solution

  • When you add a new record, you should set a default value in the columns.field. The error throws on because the classe_iva variable is not declared. Try to declare it as global. Hope this helps.