Grid - Editing custom editor – undefined when using a primary key field

[Jose]

Greetings,

I have been trying for hours to use a custom editor (kendoDropDownList) with a grid in a situation when the only way to uniquely identify a record is by using a primary key. I have created a simplified working example. I know (based on the example in this web page http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html) that it can be done if you want to store the DayOfWeekName value in the field. What I would like to do in this case is to use the kendoDropDownList in the grid to show the DayOfWeekName (when active), to display the selected DayOfWeekName on the grid when inactive (not undefined as it is doing now) and store the DayOfWeekID on the field named DayOfWeekID. Is this possible? Thank you very much.

Example:

<div id="example" class="k-content">
            <div id="grid"></div>

            <script type="text/javascript">
                var exampleData = [
                                     { 'RecordID' : 1, 'DayOfWeekID': 2, 'Description': 'Record 1' },
                                     { 'RecordID' : 2, 'DayOfWeekID': 3, 'Description': 'Record 2' },
                                     { 'RecordID' : 3, 'DayOfWeekID': 6, 'Description': 'Record 3' }
                                 ];

                $(document).ready(function () {
                    var dataSource = new kendo.data.DataSource({
                        pageSize: 20,
                        data: exampleData,
                        autoSync: true,
                        schema: {
                            model: {
                                id: "RecordID",
                                fields: {
                                    RecordID: { editable: false, type: "number" },
                                    DayOfWeekID: { defaultValue: { DayOfWeekID: 1, DayOfWeekName: "Sunday"} },
                                    Description: { type: "string" }
                                }
                            }
                        }
                    });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 430,
                        toolbar: ["create"],
                        columns: [
                            { field: "DayOfWeekID", title: "Day of week", width: "160px", editor: categoryDropDownEditor, template: "#=DayOfWeekID.DayOfWeekName#" },
                            { field: "Description", title: "Description", width: "120px" },
                            { command: "destroy", title: " ", width: "90px"}],
                        editable: true
                    });
                });

                function categoryDropDownEditor(container, options) {
                    $('<input required data-text-field="DayOfWeekName" data-value-field="DayOfWeekID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                                           dataSource: [
                                               { 'DayOfWeekName': 'Sunday', 'DayOfWeekID': 1 },
                                               { 'DayOfWeekName': 'Monday', 'DayOfWeekID': 2 },
                                               { 'DayOfWeekName': 'Tuesday', 'DayOfWeekID': 3 },
                                               { 'DayOfWeekName': 'Wednesday', 'DayOfWeekID': 4 },
                                               { 'DayOfWeekName': 'Thursday', 'DayOfWeekID': 5 },
                                               { 'DayOfWeekName': 'Friday', 'DayOfWeekID': 6 },
                                               { 'DayOfWeekName': 'Saturday', 'DayOfWeekID': 7 }
                                           ],
                                           dataTextField: "DayOfWeekName",
                                           dataValueField: "DayOfWeekID"
                                       });
                }

            </script>
        </div>

[Petur Subev]

Hello Jose,

Basically to achieve what you described you can use the ForeignKey column.

http://demos.telerik.com/kendo-ui/web/grid/foreignkeycolumn.html

If you find it inappropriate, could you please elaborate on the case?

Kind Regards,
Petur Subev
Telerik