Telerik Grid MVC中DetailView内的模板列答案

【问题标题】：Template column inside DetailView in Telerik Grid MVCTelerik Grid MVC中DetailView内的模板列
【发布时间】：2012-10-23 07:03:45
【问题描述】：

当页面加载时，我的嵌套模板列没有出现在我的标记中。我正在尝试在另一个父网格的 DetailView 中加载带有模板列的网格。我可以看到我的数据正在传递，并且 UnitPeriod 的“名称”明显出现，但在我的模板列中没有任何内容，因此看起来数据正在传递到网格中。我用萤火虫检查了源代码，该列总是加载为空。任何人都可以找出原因吗？

<div>
@(Html.Telerik().Grid<RentableUnit>()
    .Name("RentableUnits")
    .Columns(columns =>
    {
        columns.Bound(e => e.UnitID).Hidden();
        columns.Bound(e => e.Name).Width(75);
    })
    .ClientEvents(events => events.OnRowDataBound("employees_onRowDataBound")
                            .OnDetailViewExpand("unit_onDetailViewExpand")
                            .OnDetailViewCollapse("unit_onDetailViewCollapse"))
    .DetailView(details => details.ClientTemplate(
        Html.Telerik().Grid<UnitPeriod>()
            .Name("UnitPeriod_<#= UnitID #>")
            .Columns(columns =>
                {
                    columns.Bound(o => o.Name);
                    columns.Template(@<text>
                     @foreach (Day day in item.Days)
                     {
                         if (!day.IsRentable)
                         {
                             <img src="../../Content/Images/Houses/icon_lokad.png"/>
                         }
                         else
                         {
                             <img src="../../Content/Images/Houses/icon_opid.png"/>
                         }
                     }
             </text>);
            })
            .ClientEvents(events => events.OnRowDataBound("orders_onRowDataBound"))
            .DataBinding(dataBinding => dataBinding.Ajax()
            .Select("SelectedUnitPeriod", "Home", new { unitId = "<#= UnitID #>" }))
            .ToHtmlString()
    ))
    .DataBinding(dataBinding => dataBinding.Ajax().Select("RentableUnits", "Home"))
    .Sortable()
    )
</div>

<script type="text/javascript">
    var derpinski = "";
    function expandFirstRow(grid, row) {
        if (grid.$rows().index(row) == 0) {
            grid.expandRow(row);
        }
    }

function loadTabGridContent(e) {
    var url = '/Home/TabGridContent/';
    $.ajax({
        type: 'GET',
        dataType: 'html',
        url: url,
        success: function (data) {
            alert('success');
            $('#TabGridContent').html(data);
        }
    });
}

function employees_onRowDataBound(e) {
    var grid = $(this).data('tGrid');
    expandFirstRow(grid, e.row);
}

function orders_onRowDataBound(e) {
    var grid = $(this).data('tGrid');
    expandFirstRow(grid, e.row);
}

function unit_onDetailViewExpand(e) {
    var mstRow = e.masterRow;
    var unitNumber = mstRow.cells[1].innerHTML;
    derpinski = derpinski + unitNumber + ",";
}

function unit_onDetailViewCollapse(e) {
    var mstRow = e.masterRow;
    var unitNumber = mstRow.cells[1].innerHTML;
    derpinski = derpinski.replace(unitNumber + ",", "");
}

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 razor telerik telerik-grid

【解决方案1】：

我发现嵌套网格无法做到这一点。

我最终在我的自定义类中创建了一个字符串变量，并在 Telerik 网格中使用了 Bound 机制，并在网格中编码了 html 字符串。这不是最漂亮的解决方案，但它可以满足我的需要。

类似这样的：

[GridAction]
public ActionResult SelectedUnitPeriod(int unitId, string startDate)
{
    // Some stuff (just to abbreviate
    unitPeriodName = "";  // Created the row as string
    daystr = "";          // also with this one
    rentableUnitPeriods.Add(new RentableUnitPeriod(unitPeriod.UnitId, unitPeriodName, dayStr, unitPeriod.PrimaryImg));
    return View(new GridModel(rentableUnitPeriods));
}

这就是我的诀窍:)

【讨论】：