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


 

I'm I have created an example that illustrates my problem: http://jsfiddle.net/tcTRy/11/

I believe that this is the expected behavior, but is there a workaround to don't loose selection?

In my case I have a listview that when is selected show some details, and some of the details causes the list view datasource data to change. For instace if I edit the Title this will update the Title in the listview, although it would be nice to don't loose the selection, or else the details will be hidden.

Any ideas?

Thanks,
Ricardo

Hello,

when using on mobile, when tap on the arrow it feels slow because of the lag to wait the double tap.

Some touch library have a fast tap feature, have you a solution to have it working with a better user experience?

I have a Hierarchical grid that is bound to the server and is in MVC  (.DataSource(d => d.Server()))  

When the grid first loads I'd like the grid to expand the first row by default so the detail view is showing.

Can this be done without Javascript (preferred) or in Javascript if needed.

Hi,

I've been fighting this issue for a while, and I can't seem to find what causes it (or if it's by design). When I center my window the window opens farther from the top than it does from the bottom, instead if it being exact. So if the screen is say 1000px tall, and the window is 800px. When I center it, instead of appearing 100px from the top and 100px from the bottom as you would expect, it appears to be about 150px from the top and 50px from the bottom. It's like its stealing some of the bottom. Can you give me any pointers as to how this can be overcome so I can get to center exactly in the middle?

Thanks
Jason

Hello,
Since the drawer does not support in-place navigation, I want to tweak the splitview to show/hide the sidepanel in manner similar to the drawer.
Can someone point me in the right direction? So far i have managed to get a quick,snap-in/out, action but I want something more soft, an animation of the side panel's width.

This is what I am using right now:
$("#main-pane").css("-webkit-box-flex","1000");
$("#main-pane").css("-webkit-flex","1000");
$("#side-pane").animate({ width: "-=350" }, 750);

Thanks

I have a client who wants to specify a handful of stops on a slider, but they are not exactly the same distance apart. Say I want to stop on values of 24, 49, 73, and 97. How could I manage to do this with the Kendo slider?

 What is the best way to handle the IE 10 "X" being displayed in a text box when the loading spinner is being displayed?

See attached file for a screen shot of it in action.

I am trying to use the Scheduler with PHP wrappers, the data returns in a way that LOOKS like it should work...but doesn't for some reason.  Here is how it works:
The initial page loads:
After, as you can see, the first call to the listener is made.  I am not posting the code to the listener, as it just redirects to the calendar handler: The class is:
And i am really confused because it seems to return correct data:

I guess I am missing something....?    Any help would be greatly appreciated.

I am not sure if this is expected behavior, but I have set a min-height property for paragraphs in a custom style sheet. However when this is applied to the editor, every time a paragraph is clicked the "move" cursor appears and the whole paragraph is then selected making it difficult to enter text. This seems to only be happening in IE and not Firefox.

One of the reasons I am doing this as I don't want paragraphs creating margins, however I do want spaces between paragraphs if required.


Please see attached screenshot when applied to your demo.