Dropdown control in grid with kendo.data.datasource

4 posts, 0 answers
  1. Mark
    Mark avatar
    1 posts
    Member since:
    Nov 2006

    Posted 20 Apr 2012 Link to this post

    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>

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2016 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2012 Link to this post

    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!

  3. Robert
    Robert avatar
    19 posts
    Member since:
    Dec 2012

    Posted 08 Jan 2013 Link to this post

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

    Microsoft JScript runtime error: 'kiRelationship' is undefined.

  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2016 posts
    Member since:
    Sep 2012

    Posted 11 Jan 2013 Link to this post

    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!

Back to Top