Saving column with custom editor gives nested column array

Question

I am trying to use a dropdown select as an editor for one of my columns, defined as:

function phoneTypeEditor(container, options) {
    $('<input required name="' + options.field + '" data-text-field="typeName" data-value-field="typeId" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: [
                    {
                        "typeName": "Work",
                        "typeId": 1
                    },
                    {
                        "typeName": "Branch",
                        "typeId": 2
                    },
                    {
                        "typeName": "Home",
                        "typeId": 3
                    },
                    {
                        "typeName": "Mobile",
                        "typeId": 4
                    }
                ],
                close: function()
                {

                }
            });
}

In my model I have:

model: {
                    id: 'phoneId',
                    fields: {
                        phoneId: {
                            type: 'number'
                        },
                        type: {
                            type: 'string',
                            editable: true,
                            defaultValue: {
                                typeId: 1,
                                typeName: "Work"
                            },
                        },
                        tel: {
                            type: 'string',
                            editable: true
                        }
                    }
                }

And finally my column:

{
            field: 'typeId',
            headerTemplate: '<b>Type</b>',
            filterable: false,
            editor: phoneTypeEditor,
            width: '80px',
            template: '#=typeName#'
        },

But when I try to create a row in my grid my post data looks like this:

phoneId:0
type[typeId]:1
type[typeName]:Work
tel:
typeName:
contactId:97558

When it should be:

phoneId:0
typeId:1
typeName:Work
tel:
typeName:
contactId:97558

And I get a new row in my grid that is thin and empty.

How can I get this to work properly?

PS If I don't have:

typeName: {
                        type: 'string'
                    }

In my model I get an error saying typeName is not defined.

I now have:

model: {
                    id: 'phoneId',
                    fields: {
                        phoneId: {
                            type: 'number'
                        },
                        typeId: {
                            type: 'number',
                            defaultValue: 1
                        },
                        tel: {
                            type: 'string',
                            editable: true
                        },
                        typeName: {
                            type: 'string',
                            defaultValue: 'Work',
                        }
                    }
                }

And...

columns: [
        {
            field: 'phoneId',
            headerTemplate: '<b>Phone Id</b>',
            filterable: false,
            width: '50px',
            hidden: true
        },
        {
            field: 'typeId',
            headerTemplate: '<b>Type</b>',
            filterable: false,
            editor: phoneTypeEditor,
            width: '80px',
            template: '#=typeName#'
        },
        {
            field: 'tel',
            headerTemplate: '<b>Number</b>',
            filterable: false,
        }
    ],

But now when I change the option in the dropdown, it appears that you haven't changed it but the actualy number id of the item has changed, just not the text. How do I make it so both the typeId and typeName change?

Your `type` definition in the model is inherently wrong. You are saying it is a string type but instead, you assign a multi-property object to its default value. I don't think you can do this. Since typeName is for displaying purposes only, I would try something like binding only the typeId to the grid, but using the template and editor to visually change the value to appear as the typeName. This can be done by hardcoding the `type` data as a JS array somewhere or you can bring that data in as another API call. — gitsitgo, Jun 09 '14 at 17:00
@gitsitgo I was trying to copy part of what is found here: http://demos.telerik.com/kendo-ui/grid/editing-custom, but it doesn't seem to work, please see my edit. — imperium2335, Jun 10 '14 at 07:49
Ok, sorry, I stand corrected about the multi prop default value then. However your newer model will not give you what you want because `typeId` and `typeName` are completely separate fields in the model. The grid does not know that there is a relation so when you update typeId, it doesn't know to update typeName, unless if you manually edit the datasource. I would go back to your original model, but maybe change your column definition to `field: 'type', template: '#=type.typeName#'` ? — gitsitgo, Jun 10 '14 at 13:55
@gitsitgo Gone back to my original model but now when I try to add a new row or load the grid I get "Cannot read property 'typeName' of undefined" using template #=type.typeName# — imperium2335, Jun 11 '14 at 08:05

Saving column with custom editor gives nested column array

0 Answers0