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

Grid lookup column with require js

1 Answer 71 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 20 Aug 2013, 12:48 PM
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


 

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 22 Aug 2013, 01:55 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or