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

Dropdown control in grid with kendo.data.datasource

3 Answers 334 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 20 Apr 2012, 07:11 PM
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>

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Apr 2012, 03:10 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 09 Jan 2013, 04:29 AM
Alexander, if you add a create toolbar button to the grid and click it you will get:

Microsoft JScript runtime error: 'kiRelationship' is undefined.
0
Alexander Valchev
Telerik team
answered on 11 Jan 2013, 05:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Robert
Top achievements
Rank 1
Share this question
or