KendoGrid не отображается в KendoWindow

Question

Я пытаюсь показать сетку в окне kendoWindow, но она не отображается. Это мой HTML

<div id="ShowPrompts">
    <div id="PromptsGrid">

    </div>
</div>

У меня все это происходит, когда строка щелкается в detailGrid, он передает GroupID и OptionID, это функция

function GetThePromptsData(gid, oid) {
    $.ajax({
        type: "GET",
        url: URLParams.PromptsData + "?globalgroupID=" + gid + "&optionid=" + oid,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            CreatePromptsGrid(data);
            ShowPromptsPopUp();
        }
    });
}

и это функция ShowPromptsPopUp()

function ShowPromptsPopUp() {
    $("#ShowPrompts").kendoWindow({
        width: "300px",
        height: "300px",
        title: "Option Prompts",
        visible: false,
        modal: true,
        actions: [
            "Close"
        ]
    }).data("kendoWindow").center().open();
}

Я проверил, и есть данные в JsonResult, но не хочет отображаться в окне.

РЕДАКТИРОВАТЬ

Я запустил это снова, и окно не будет отображаться при вызове, как я его показываю, поэтому я удалил ShowPromptsPopUp() из GetThePromptsData() и поместил его в событие изменения detailGrid, окно появляется, но по-прежнему нет сетки в окно.

В событии изменения detailGrid порядок таков:

GetThePromptsData(globalID, optionID);
ShowPromptsPopUp();

РЕДАКТИРОВАТЬ 2

var promptGrid,
CreatePromptsGrid = function (promptsData) {
    promptGrid = $("#PromptsGrid").kendoGrid({
        dataSource: {
            promptsData
        },
        schema: {
            model: {
                id: "PromptID",
            }
        },
        columns: [
            { field: "Question", title: "Question" },
            { field: "DefaultAnswer", title: "Answer" }
        ],
        change: function (e) {

        },
        scrollable: true,
        pageable: false,
        selectable: "row"
    }).data("KendoGrid");
}

Answer 1

I have modified the code little and its working. please check:
function GetThePromptsData() {
   /* $.ajax({
        type: "GET",
        url: "http://jsonplaceholder.typicode.com/posts",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {

        }
    });*/
    data =[ {
    PromptID:1,
    Question:"test 1",
    DefaultAnswer:"test answer 1" 

    },
    {
    PromptID:2,
    Question:"test 2",
    DefaultAnswer:"test answer 2"    

    },
    ]
     CreatePromptsGrid(data);
      ShowPromptsPopUp();
}

function ShowPromptsPopUp() {
    $("#ShowPrompts").kendoWindow({
        width: "300px",
        height: "300px",
        title: "Option Prompts",
        visible: false,
        modal: true,
        actions: [
            "Close"
        ]
    }).data("kendoWindow").center().open();
}

var promptGrid,
CreatePromptsGrid = function (promptsData) {
    promptGrid = $("#PromptsGrid").kendoGrid({
        dataSource: {
            data:promptsData
        },
        schema: {
            model: {
                id: "PromptID",
            }
        },
        columns: [
            { field: "Question", title: "Question" },
            { field: "DefaultAnswer", title: "Answer" }
        ],
        change: function (e) {

        },
        scrollable: true,
        pageable: false,
        selectable: "row"
    }).data("KendoGrid");
}

GetThePromptsData();