unable to add record in a kendoGrid

Question

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

Answer 1

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.

Answer 2

The problem is that when you create a new record category is not defined and is not defined because you don't have a schema.model in your DataSource. Before invoking the categoryDropDownEditor function, it actually instantiates the template and it produces the error.

Fixing the error in the template is pretty easy, you just need to do something like:

template: '#= data.category ? data.category.desc_category : 1 #'

Which checks that the data of current row actuall has category defined.

BUT this will bring you into the next problem that is that you cannot close the popup because there is no schema.model definition.

You might try defining the DataSource as:

var datasource = new kendo.data.DataSource({
    data  : [
        {
            "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
        }
    ],
    schema: {
        model: {
            id    : "id_category",
            fields: {
                desc_product: { type: "string" },
                price       : { type: "number" }
            }
        }
    }
});