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: " ", 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
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: " ", 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