Kendo Grid Template- Using Javascript Variable in template

Question

I am creating two variables based off an ajax call. The function runs on the page load and the variables do not change once the page is loaded.

var approvalLevel;
var fullName;

$(function() {
    $.ajax({
        type: "GET",
        async: "false",
        url: approvalLevelURL,
        contentType: "application/json",
        context: this,
        dataType: "jsonp",
        crossDomain: true,
        success: function (data) {
            getUser(data);
        }
    });
});

function getUser(data) {
    approvalLevel = data.ApprovalLevel;
    console.log(approvalLevel);
    fullName = data.FullName;
    console.log(fullName);
};

Then I would like to use these variables in my kendo window popup template. The popup is opened by the command "View Details" on my kendo grid, and the function showDetails starts on the View Details click.

var wnd, detailsTemplate;
 wnd = $("#details")
                    .kendoWindow({
                        title: "Customer Details",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 300
                    }).data("kendoWindow");

                detailsTemplate = kendo.template($("#template").html());
            });

            function showDetails(e) {
                e.preventDefault();

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                wnd.content(detailsTemplate(dataItem));
                wnd.center().open();
            }

Unfortunately when the debugger hits the "wnd.content(detailsTemplate(dataItem))", an error is thrown saying that approvalLevel is undefined.

I am not sure what I need to do to make this work. I've tried making the window content the url from the ajax call and used "data.ApprovalLevel." The error wasn't thrown but the value was still undefined.

I've also tried 'wnd.content(detailsTemplate(dataItem, approvalLevel, fullName))', which doesn't work either.

The template won't read functions either but it is correctly recognizing the other fields which are from the kendo datasource.

This is the template code:

<script type="text/x-kendo-template" id="detailTemplate">
<div id="tabs2">               
    <div id="cpTab2">
    # if (ChangeControlTypeApprovalLevel == 1) {#
         <ul>
             <li><label>Request Review:&nbsp; </label>
                 <p>No initial review required for a level one change</p>
            </li>
            <li class="comments"><label>Comments:&nbsp; </label>
                <p>No initial review required for a level one change</p>
            </li>
        </ul>
    #} else if (Status.toLowerCase().contains("approval")) {#
            # if (ChangeControlTypeApprovalLevel == 2 && approvalLevel >= 2) {#
                    <ul>
                     <li><label>Request Review:&nbsp; </label>
                        <table id="horizontal-list" class="reviewStatus">
                            <tr>
                                <td><label> Reviewed By: </label><br/> #= fullName #</td>
                                <td><label> Reviewed Date: </label><br/>#= getToday() #</td>
                                <td><label> Reviewed Status: </label><br/><input name="approved" data-bind="value:approved" class="dropDownApproval" /></td>
                            </tr>
                        </table>
                    </li>
                    <li><label>Comments:&nbsp; </label>             
                        <li><textarea type="text" class="k-input k-textbox" name="Comments" data-bind="value:Comments"></textarea></li>
                        <li><button class="k-button" onclick="initialReviewTab">Submit</button></li>                    
                    </li>
                </ul>
            #} #
    </div>
</div>
</script>

Any help would be greatly appreciated. I've been stuck on this for a while now.

Answer 1

If anyone runs into this problem, I have found the solution. Since my template wasn't accepting the global variables or the functions, I ended up having to create dataItems for each of the variables and the function in the showDetails function.

function showDetails(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            dataItem.approvalLevel = approvalLevel;
            dataItem.fullName = fullName;
            dataItem.date = getToday();
            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }

Now everything works beautifully.