Grid lookup column with require js

[Brian]

Hi – I have a grid where one of the columns is a lookup (dropdown list) – I set the editor and template properties as shown here and everything was working.

However now I am attempting to use requirejs and I receive the following error on the template property when the grid is loading - Uncaught ReferenceError:
getFullName is not defined.

Here is the relevant code:
 
Invitations.htm
<script data-main="/js/invitations" src="/js/lib/require.js" type="text/javascript">
</script>
...
<div id="gridInvitations">
</div>

Invitations.js
require(['/js/common.js'], function (common) {   
    require(['app/mainInvitations'], function(main) {
        /* Must read the query string '?eventId=x' */
        var qryString = location.search;
        var eventId = qryString.substr(qryString.indexOf("=") + 1);       
       main.initGrid(eventId);
    });
});

Common.js
require.config({
    baseUrl: "/js/lib",
    paths: {
        app: '../app',      
        jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        js: '..',       
       kendo: '../kendo/kendo.web.min'
    },
  shim: {
       kendo: {
      deps: ["jquery"]
        }
   },
    deps: ['js/utils', 'js/json2'],
    callback: function () {
    }
});

MainInvitations.js
define(['app/mainInvitations', "js/utils", "jquery", "kendo"], function (main, utils, $, k) {

    $(document).ready(function () {
    });

    var contactList = [];
    var gridDataSource;

    function initGrid(eventId) {

        $("#gridInvitations").kendoGrid({
            autoBind: false,
            editable: { mode: 'inline' },
            toolbar: [{ name: "create"}],
            columns:
                [
                    { field: 'invitationId', title: 'invitationId', width: "100px", hidden: true },
                    { field: 'eventId', title: 'eventId', hidden: true },
                    { field: "contactId", title: "Contact", width: "225px",
                        editor: contactDropDownEditor,
                        template: "#=getFullName(contactId)#",
                        footerTemplate: "Total:  #=count #"
                    },
                    { field: 'inviteType', title: 'Invite Type' },
                    { field: 'inviteSentDate', title: 'Invitation Sent', format: "{0: yyyy-MM-dd HH:mm:ss}" },
                    { field: 'rsvpStatus', title: 'RSVP', hidden: false },
                    { field: 'rsvpDate', title: 'RSVP Date', format: "{0: yyyy-MM-dd}" },
                    { field: 'rsvpComments', title: 'RSVP Comments' },

                    { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }
                ],

            dataSource: createGridDataSource(eventId),
            selectable: 'row',
            sortable: true,
            filterable: true
        });


        /* Get list of contacts and assign them to grid column */
        $.ajax({
            url: utils.getBaseServicesUrl() + "/wcfDataServices/contacts.svc/contacts_getList",
            dataType: "json",
            success: function (result) {

                contactList = result.d;
                gridDataSource.fetch();
                console.log(contactList);
            },
            error: function () {
                alert('Error fetching contactList');
            }
        });

    }

    function createGridDataSource(eventId) {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {

                    $.ajax({
                        url: utils.getBaseServicesUrl() + "/wcfDataServices/invitations.svc/tblEvents(" + eventId + ")/tblInvitations",
                        dataType: "json",
                        success: function (result) {
                            options.success(result);
                        }
                    });
                } 

            },
            /*
            parameterMap: function (data, type) {
            return JSON.stringify(data);
            },
            */
            schema: {
                data: "d",
                model: {
                    id: "invitationId",
                    fields: {
                        invitationId: { type: "number", editable: false },
                        eventId: { type: "number", editable: false },
                        contactId: { type: "number" },
                        inviteType: { type: "string" },
                        inviteSentDate: { type: "date" },
                        rsvpStatus: { type: "string" },
                        rsvpDate: { type: "date" },
                        rsvpComments: { type: "string", validation: { required: true} },
                        lastUpdated: { type: "date" },
                        lastUpdatedBy: { type: "string" }
                    }
                }
            },

            aggregate: { field: "contactId", aggregate: "count" }

        });

        gridDataSource = dataSource;
        return gridDataSource;

    }




    function contactDropDownEditor(container, options) {

        $('<input data-bind="value:' + options.field + '"/>')

        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "FullName",
            dataValueField: "contactId",
            dataSource: contactList,
            optionLabel: ""
        });


    }

    
    function getFullName(contactId) {
        for (var idx = 0, length = contactList.length; idx < length; idx++) {
            if (contactList[idx].contactId === contactId) {
                return contactList[idx].FullName;
            }
        }
    }
    
    
    return {

        initGrid: initGrid, 
        getFullName: getFullName
    }

});


It took me a while to finally get the lookup column working in the grid and I'm now stuck on this problem - any suggestions would be greatly appreciated.  As I mentioned, this line is causing the problem: template: "#=getFullName(contactId)#",

Thanks a lot

Brian


 

[Alexander Popov]

Hi Brian,

I reviewed the code below and it seems that there is an issue with the order in which scripts are loaded or functions are declared. Could you please provide runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Also you might find this article describing how to use Kendo UI with RequireJS helpful.

Regards,
Alexander Popov
Telerik