Dropdown control in grid with kendo.data.datasource

[Mark]

When using local data, my drop down list properly displays the value text in a field that contains the lookup value (integer).  However, when I try using a kendo.data.datasource to get the values from a database, the control no longer works for the basic grid display (the dropdown does populate correctly when in edit mode or adding a new record).

I'm missing something, but not sure what.  Here is the code:

           <div id="grid">

            </div>

 

<script>

             

    //works

    var relationshipDataSourcex = [{ kiRelationship: 2, RelationshipText: 'Item 2' },{ kiRelationship: 3, RelationshipText: 'Item 3'}, { kiRelationship: 4, RelationshipText: 'Item 4'}, { kiRelationship: 5, RelationshipText: 'Item 5'}]

     

    // does not work when getRelationship function called from grid (returns N/A), works when grid is in edit/insert mode

    var relationshipDataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: "data/relationshiplistJson.asp",

                        dataType: "json"

                            }

                            },

                schema: {

                data: "relationshiplist",

                    model: {

                        id: "kiRelationship",

                        fields: {

                            kiRelationship: { type: "number" },

                            RelationshipText: { type: "string" }

                                     

                            }

                    }

                }

                });

     

        // read does not seem to matter      

       // relationshipDataSource.read

       relationshipDataSource.query

 

        function getRelationship(kiRelationship) {

        for (var i = 0; i < relationshipDataSource.length; i++) {

            if (relationshipDataSource[i].kiRelationship == kiRelationship) {

                return relationshipDataSource[i].RelationshipText;

            }

        }

        return "N/A";

        }  

 

    function relationshipDropDownEditor(container, options) {

        $('<input data-text-field="RelationshipText" data-value-field="kiRelationship" data-bind="value:kiRelationship" />')

            .appendTo(container)

            .kendoDropDownList({

                autoBind: false,

                dataSource: relationshipDataSource

            });

    };  

                   

    $(document).ready(function () {

                relationshipDataSource.read();

                dataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: "data/respondentlistJson",

                        dataType: "json"

                        },

                    update: {

                        url: "data/respondentlistUpdate",

                        dataType: "POST"    ,                      

                        },

                     create: {

                        url:  "data/respondentlistUpdate",

                        dataType: "POST"

                    },

                    parameterMap: function(options, operation) {

                        if (operation !== "read" && options.models) {

                            return {models: kendo.stringify(options.models)};

                        }

                    }

                },

                batch: true,

                pageSize: 50,

                autoSync: false,

                             

                schema: {

                data: "respondentlist",

                    model: {

                        id: "kiRespondent",

                        fields: {

                            kiRelationship: { type: "number", editable: true, defaultvalue: 2 },

                            cName: { type: "string" ,validation: { required: true } },

                            cEmail: {type: "string"},

                            }

                    }

                }

            });

 

        $("#grid").kendoGrid({

            dataSource: dataSource,

            selectable: "row",

            pageable: true,

            sortable: true,

            scrollable: true,

            height: 800,

            toolbar: ["create"],

            columns: [

                { field: "cName", title: "Respondent Name", format: "{0:c}", width: "150px"} ,

                { field: "cEmail", title: "Email", format: "{0:c}", width: "150px"} ,

                { field: "kiRelationship", width: "150px",

                            editor: relationshipDropDownEditor,

                            template: '#= getRelationship(kiRelationship) #'

                            },

                                                  

                { command: ["edit", "destroy"], title: " ", width: "210px" }],

                editable: "inline" 

        });

               

    });

                 

</script>

[Alexander Valchev]

Hi Mark,

The variable relationshipDataSource is a dataSource object, not a simple array, and you have to access the data elements in this way - relationshipDataSource.view()[i] or relationshipDataSource.view().length

The rest of your code looks OK. Have in mind that the Ajax requests are asynchronous, so you have to be sure that at the moment when grid templates are applied the relationshipDataSource has been populated (e.g. the view is not empty).

I hope this information helps.

Regards,
Alexander Valchev
the Telerik team

[Robert]

Alexander, if you add a create toolbar button to the grid and click it you will get:

Microsoft JScript runtime error: 'kiRelationship' is undefined.

[Alexander Valchev]

Hi Robert,

I am not sure what is the cause of this issue. Actually initial Grid configuration posted by Mark has a toolbar with create button, but he did not mentioned such problem.

$("#grid").kendoGrid({
    dataSource: dataSource,
    toolbar: ["create"],

Could you please provide a small but runnable example that I can test locally? In this way I will be able to examine your current implementation and assist you further.

Kind regards,
Alexander Valchev
the Telerik team