在kendo Grid中添加单选按钮列

时间:2013-06-15 11:05:55

标签: asp.net-mvc

我想在kendo Grid列中显示单选按钮。我尝试了很多方法。它只显示行中的标题而不显示单选按钮。我在MVC4工作

我的代码:

@(Html.Kendo().Grid<razor.Core.BOL.TRD_OrderItem>()
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        columns.Bound(item => item.OrderId).Hidden(true);
                        columns.Template(item => @Html.RadioButton("Approve", true, false, new { @id = "Approve" })).Title("Approve");
                        columns.Bound(m => m.MatchType).Title("Match Type");
                        columns.Bound(item => item.OrderDate).Format("{0:MM/dd/yyyy}").Title("Date");
                        columns.Bound(item => item.OrderType).Title("Sell");
                        columns.Bound(item => item.Description).Title("Ask");
                        columns.Bound(item => item.OrderAmount).Title("Total");
                        columns.Bound(item => item.OrderStatus).Title("Status");
                    })
                                     .Pageable()
                                     .Sortable()
                                     .DataSource(dataSource => dataSource
                                     .Ajax()
                                     .PageSize(10)
                                      .Model(model =>
                                      {
                                          model.Id(m => m.OrderId);
                                      })
                                      .Read(read => read.Action("GetOrderOption", "Order", new { OrderId = ViewBag.OrderId}))
                        ))

谢谢,

S Somu

1 个答案:

答案 0 :(得分:0)

在我的情况下,单选按钮被绑定到模型,所以你应该添加一个字段来保存radiobutton值(Approved),所以按照你的例子我添加了我的单选按钮列:

columns.Bound(item => item.Approved).Template(@<text></text>).ClientTemplate("<input type='radio' name='ItemList[#= index(data)#].Approved' value='true' />").Title("Approve");

其中 ItemList 是模型中TRD_OrderItem列表的名称。

此外,您还需要添加此javascript函数,该函数用于获取radiobutton名称字段的索引:

function index(dataItem) {
    var data = $("#Grid").data("kendoGrid").dataSource.data();

    return data.indexOf(dataItem);
}