使用局部视图将Kendo Grid放置在另一个Grid子元素中

Question

我想将局部视图网格放在由多个子元素组成的另一个网格中，但是当我尝试添加它时，部分视图显示在底部而不是在其中。 用于创建父元素和子节点的代码：

var createGrid = function (){
var grid = $("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: "testData.JSON",
            dataType: "json"
        },
        schema: {
            data: "tcTestData",
            model: {
                fields: {
                    PostName: { type: "string" },
                    BooksPeriode: { type: "number" },
                    BudgetPeriode: { type: "number" },
                    TrendPeriode: { type: "number" },
                    LastYearPeriode: { type: "number" },
                    LastYearTrend: { type: "number" },
                    SoFar: { type: "number" },
                    BudgetSoFar: { type: "number" },
                    TrendSoFar: { type: "number" },
                    LastYearSoFar: { type: "number" },
                    LastYearTrendSoFar: {type: "number"}
                    }
            },                
        }
    },
    sortable: false,
    scrollable: false,
    detailInit: detailInit,
    dataBound: expandRow,
    columns: [
        { field: "PostName", title: " "},
        { field: "BooksPeriode", title: "Regnskap\n periode" },
        { field: "BudgetPeriode", title: "Budsjett \n periode" },
        { field: "TrendPeriode", title: "Trend \n periode" },
        { field: "LastYearPeriode", title: "I fjor <br> periode" },
        { field: "LastYearTrend", title: "I fjor trend <br> periode" },
        { field: "SoFar", title: "Regnskap <br> hittil" },
        { field: "BudgetSoFar", title: "Budsjett <br> hittil" },
        { field: "TrendSoFar", title: "Trend <br> hittil" },
        { field: "LastYearSoFar", title: "I fjor <br> hittil" },
        { field: "LastYearTrendSoFar", title: "I fjor trend <br> hittil" }
    ]
});

return grid;
}

var expandRow = function (e) {
$(".k-grid tbody .k-grid .k-grid-header").hide();
if(e.data.child != null)
    this.expandRow(this.tbody.find("tr.k-master-row").first());
}

function detailInit(e) {
if (e.data.child == "MainLedgerDetail")
    addDetailView(e);
else if (e.data.child != null) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: e.data.child,
        sortable: false,
        scrollable: false,
        detailInit: detailInit,
        dataBound: expandRow,
        columns: [
            { field: "PostName", title: " " },
            { field: "BooksPeriode", title: "Regnskap <br> periode" },
            { field: "BudgetPeriode", title: "Budsjett <br> periode" },
            { field: "TrendPeriode", title: "Trend <br> periode" },
            { field: "LastYearPeriode", title: "I fjor <br> periode" },
            { field: "LastYearTrend", title: "I fjor trend <br> periode" },
            { field: "SoFar", title: "Regnskap <br> hittil" },
            { field: "BudgetSoFar", title: "Budsjett <br> hittil" },
            { field: "TrendSoFar", title: "Trend <br> hittil" },
            { field: "LastYearSoFar", title: "I fjor <br> hittil" },
            { field: "LastYearTrendSoFar", title: "I fjor trend <br> hittil" }
        ]
        });
}
}

这是对部分视图的ajax调用：

function addDetailView(e)
{
$.ajax({
    type: 'GET',
    url: "/Duett/Core/FrontEnd/WebApplications/FlexResBal/Test/DetailView",
    data: e.data.child,
    success: function(result) {
        $("#grid").append(result);
    }
});
}

控制器的代码：

public ActionResult DetailView()
    {
        return PartialView();
    }

最后是部分视图的代码：

function createDetail(e)
{
console.log("CreateDetail function fired");
$("<div/>").appendTo("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: "MainLedgerTestData.json",
            dataType: "json"
        },
        schema: {
            data: "tcMainLedger",
            model: {
                fields: {
                    Periode: { type: "number" },
                    Art: { type: "number" },
                    Date: { type: "string" },
                    Attachment: { type: "number" },
                    Debet: { type: "number" },
                    Credit: { type: "number" },
                    Note: { type: "string" },
                    AK: { type: "number" },
                    Amount1: { type: "number" },
                    Department: { type: "string" },
                    Project: { type: "string" },
                    MotKto: { type: "number" },
                    Termin: { type: "number" },
                    Month: {type:"string"}
                }
            },
        }
    },
    columns: [
        { field: "Periode", title: "Per" },
        { field: "Art", title: "Art" },
        { field: "Date", title: "Dato" },
        { field: "Attachment", title: "Bilag" },
        { field: "Debet", title: "Debet" },
        { field: "Credit", title: "Kreditt" },
        { field: "Note", title: "Merknad" },
        { field: "AK", title: "AK" },
        { field: "Amount1", title: "Mengde1" },
        { field: "Department", title: "Avdeling" },
        { field: "Project", title: "Prosjekt" },
        { field: "MotKto", title: "MotKto" },
        { field: "Termin", title: "Termin" },
        { field: "Month", title: "Mnd" }
    ]
});
}

我想我需要将我所在节点的父元素传递给createDetail函数并将其放在$（“）。appendTo（”＃grid“）。kendoGrid中，用父元素替换#grid ，但我该怎么做呢？非常感谢任何帮助