Question

我的第一个问题是：我使用单选模式的kendo网格，我第一次加载视图时需要，第一行被选中，换句话说，我想以编程方式选择第一个kendo网格行。另外一个问题是我在该网格中插入radiobutton列，我想要同步 radiobutton选择行选择，换句话说，我希望当用户选择行时，它会导致它的radiobutton被选中请帮我 TNX 这是代码：

   @(Html.Kendo().Grid<CommonData.Domain.LegalEntityPhone>()
.Name("SMSGrid")
.HtmlAttributes(new { style = "width:800px;" })
.Selectable(selectable =>
             selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

.Columns(columns =>
    {
       columns.Bound(c => c.Id)
    .Title(" ")
    .ClientTemplate(" <input type='radio' id='Approve' name='chkApprove' />");

       columns.Bound(c => c.Number)
    .Title("Destination")
    .HeaderHtmlAttributes(new { style = "text-align: center;" })
    .HtmlAttributes(new { style = "text-align: center; });

       columns.Bound(c => c.CityCode)
    .Title("City Code")
    .Width(30)
    .HeaderHtmlAttributes(new { style = "text-align: center" })
    .HtmlAttributes(new { style = "text-align:center;width:30px" });


        columns.Command(command => { command.Edit(); }).Width(150);
        })

.Editable(editable => editable.Mode(GridEditMode.InLine))
    .Events(events => events.Change("OnChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
                       model.Id(p => p.Id);
                       model.Field(p => p.Id).Editable(false);
        })
    .Read(read => read.Action("LegalEntityPhoneInfo_Read", "Message"))
    .Update(update => update.Action("LegalEntityPhoneInfo_Update", "Message"))
                    )
                )

Answer 1

没有在控制器中选择行的原因，因为Grid是在客户端上创建的。您可以使用 dataBound 事件来选择第一行。

e.g。

$(function(){
     $('#GridName').data().kendoGrid.bind('dataBound',function(e){
          this.select(this.tbody.find('>tr:first'));
     }) 
})

或者使用一个而不是绑定来仅在页面加载时选择行，而不是每次网格反弹时选择 - 排序，过滤等。查看documentation了解详情。

Answer 2

如果您不熟悉jQuery，我强烈建议您从http://jqueryair.com/获取在线免费教程。假设您的项目在_Layout页面中引用了jQuery脚本，您应该做的就是将Databound的事件处理程序添加到网格中：

.Events(events => events.DataBound("Grid_Databound"))

然后将此脚本粘贴到页面上：

<script> 

function Grid_Databound() {

var grid = $("#MyGridName").data("kendoGrid");
row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(0);
grid.select(row);
        }
</script>

我确信zeinad添加的相同脚本也能正常工作，总是不止一种方法来给猫皮肤涂抹。至于如果选择行选中单选按钮显示，我想如果你看了我提到的教程，你应该能够搞清楚。如果您需要更多帮助，请回复。

从控制器中选择Kendo ui网格行

2 个答案: