combining dropdownlist into edit template

[Lienys]

I need to create a dropdownlist in my custom edit view. This is what I've done so far, and shows all the inputs except the dropdownlist

<!--Edit template-->
<script type="text/x-kendo-template" id="editNominationsTmpl">
    <div id="editContainer">
        <table>
            <thead>
                <tr>
                    <td></td>
                    <th>Nominee</th>
                    <th>Nominator</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Name:</th>
                    <td><input type="text" class="k-input k-textbox" name="NominatedName" value=" #= NominatedName # " /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorName" value=" #= NominatorName # " /> </td>
                </tr>
                <tr>
                    <th>Job Title:</th>
                    <td><input type="text" class="k-input k-textbox" name="NominatedTitle" value=" #= NominatedTitle # " /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorTitle" value=" #= NominatorTitle # " /> </td>
                </tr>
                <tr>
                    <th>Department:</th>
                    <td>
                        <input id="dropdownlistNominee" name="DeptId" />
                    </td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorDept" value=" #= NominatorDept # " /></td>
                </tr>
                <tr>
                    <th>Email:</th>
                    <td>
                        <input type="hidden" name="Index" value=" #= NominatedIndex # " />
                        <input type="hidden" name="RequestInfoID" value="#= NominatorIndex # " />
                    </td>
                    <td><input type="email" class="k-input k-textbox" name="NominatorEmail" value=" #= NominatorEmail # " /></td>
                </tr>
            </tbody>
        </table>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
        </div>
    </div>
</script>

//Creates a global object called templateLoader with a single method "loadExtTemplate"
var templateLoader = (function ($, host)
{
    //Loads external templates from path and injects in to page DOM
    return {
        //Method: loadExtTemplate
        //Params: (string) path: the relative path to a file that contains template definition(s)
        //Params: (int) index: user index
        loadExtTemplate: function (path, fileName, index)
        {
            //Use jQuery Ajax to fetch the template file
            $.get(path, { name: fileName },
                function (result) {
                    console.log(result);
                    $(host.body).append(result);
                    console.log($(host.body).html());
                })
                .done(function (data)
                {
                    $(host).trigger("TEMPLATE_LOADED", [path , index]);
                    console.log("Published an event that indicates when a template is done loading");
                });
        }
    };
})(jQuery, document);

// waits until the template is fully loaded
        $(document).bind("TEMPLATE_LOADED", function (e, path, index)
        {
            // send to create the dropdownlist
            createDropdownList(index);

            var wnd = $("#nominationsEdit").data("kendoWindow");
            console.log(wnd);

            var templateContent = $("#editNominationsTmpl").html();
            console.log(templateContent);

            var editTemplate = kendo.template(templateContent);
            console.log(editTemplate);

            $.get("/Admin/GetEditNominations",
                {
                    index: index
                },
                function (data) {
                    console.log(data);
                    //dataTemplate = data;
                    //dataDropwDown = loadDropdownListInfo();
                },
                "json")
                .done(function (data)
                {
                    console.log("success getting the information... now create the dropdaownlist");

                    // populate the template with the information
                    var result = kendo.render(editTemplate, data);

                    // set the default value the dropdownlist will show
                    // $("#dropdownlistNominee").kendoDropDownList().index(data.DeptID);

                    // append the information to the new window
                    wnd.content(result);

                    // show the window
                    wnd.center().open();
                });
        });

function createDropdownList(index)
{
    //create the dropdownlist
    $("#dropdownlistNominee").kendoDropDownList(
        {
            dataTextField: "DeptName",
            dataValueField: "DeptID",
            dataValueField: index,
            dataSource:
                {
                    transport:
                        {
                            read:
                                {
                                    url: "/Admin/GetDeptInfo"
                                }
                        }
                }
        });
}

with this code the custom edit window shows all the inputs information, except the dropdownlist this input, that it shows empty.

What I'm missing?

thanks in advance.

[Lienys]

Is working now, I think the problem was the async calls. this is how is working now

<!--Edit template-->
<script type="text/x-kendo-template" id="editNominationsTmpl">
    <div id="editContainer">
        <table>
            <thead>
                <tr>
                    <td></td>
                    <th>Nominee</th>
                    <th>Nominator</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Name:</th>
                    <td><input type="text" class="k-input k-textbox" name="NominatedName" value=" #= NominatedName # " /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorName" value=" #= NominatorName # " /> </td>
                </tr>
                <tr>
                    <th>Job Title:</th>
                    <td><input type="text" class="k-input k-textbox" name="NominatedTitle" value=" #= NominatedTitle # " /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorTitle" value=" #= NominatorTitle # " /> </td>
                </tr>
                <tr>
                    <th>Department:</th>
                    <td><input id="dropdownlistNominee" name="DeptId" /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorDept" value=" #= NominatorDept # " /></td>
                </tr>
                <tr>
                    <th>Email:</th>
                    <td>
                        <input type="hidden" name="Index" value=" #= NominatedIndex # " />
                        <input type="hidden" name="RequestInfoID" value="#= NominatorIndex # " />
                    </td>
                    <td><input type="email" class="k-input k-textbox" name="NominatorEmail" value=" #= NominatorEmail # " /></td>
                </tr>
            </tbody>
        </table>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
        </div>
    </div>
</script>

//Creates a global object called templateLoader with a single method "loadExtTemplate"
var templateLoader = (function ($, host)
{
    //Loads external templates from path and injects in to page DOM
    return {
        //Method: loadExtTemplate
        //Params: (string) path: the relative path to a file that contains template definition(s)
        //Params: (int) index: user index
        loadExtTemplate: function (path, fileName, index, deptId)
        {
            //Use jQuery Ajax to fetch the template file
            //var tmplLoader = $.get(path, { name: fileName }, function (result) {
            $.get(path, { name: fileName },
                function (result) {
                    console.log(result);
                    $(host.body).append(result);
                    console.log($(host.body).html());
                })
                .done(function (data)
                {
                    $(host).trigger("TEMPLATE_LOADED", [path , index, deptId]);
                    console.log("Published an event that indicates when a template is done loading");
                });
        }
    };
})(jQuery, document);

// load nominee edit dropdownlist info
function loadDropdownListInfo(index)
{
    //var result;
    $.get("/Admin/GetDeptInfo", {}, function (data)
    {
        console.log("Dropdownlist datasource: ");
        console.log(data);
        //result = data;
        $("#dropdownlistNominee").kendoDropDownList(
            {
                autobind: false,
                index: index,
                dataTextField: "DeptName",
                dataValueField: "DeptID",
                dataSource: data
            });
        console.log("success getting dropdownlist info");
    },
    "json")
    .done(function (data)
    {
        console.log("adding a dropdownlst finished");
        //result = data;
    });
}

// waits until the template is fully loaded
        $(document).bind("TEMPLATE_LOADED", function (e, path, index, deptId)
        {
            // send to create the dropdownlist
            //createDropdownList(index);

            console.log("template is fully loadded");

            var wnd = $("#nominationsEdit").data("kendoWindow");
            console.log(wnd);

            var templateContent = $("#editNominationsTmpl").html();
            console.log(templateContent);

            var editTemplate = kendo.template(templateContent);
            console.log(editTemplate);

            $.get("/Admin/GetEditNominations",
                {
                    index: index
                },
                function (data) {
                    console.log(data);
                    //dataTemplate = data;
                    loadDropdownListInfo(deptId);
                    //console.log(dataDropwDown);
                },
                "json")
                .done(function (data)
                {
                    console.log("success getting the information... now create the dropdaownlist");

                    // populate the template with the information
                    //var container = [data , dataDropwDown];
                    var result = kendo.render(editTemplate, data );

                    // set the default value the dropdownlist will show
                    //$("#dropdownlistNominee").kendoDropDownList().index(data.DeptID);

                    // append the information to the new window
                    wnd.content(result);

                    // show the window
                    wnd.center().open();
                });
        });

Right now I'm working trying to show the dropdownlist with an initial value.