This is a migrated thread and some comments may be shown as answers.

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

1 Answer 82 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jose
Top achievements
Rank 1
Jose asked on 13 Feb 2014, 03:29 PM
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>

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 17 Feb 2014, 01:42 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Jose
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or