kendo-uikendo-gridkendo-asp.net-mvc

How to make the radio button of the first row and last column checked when the Kendo UI grid loads


I have a simple Kendo grid as shown below:

enter image description here

When the Grid table load, I want the radio button indicated above to be checked. I am fairly new with Kendo and can't seem to figure out how to accomplish this task.

Below is the code:

 <div>
        @(Html.Kendo().Grid<BHTS.Service.ViewModels.EpisodeSearchViewModel>
   ()
   .Name("EpisodeList")
   //.AutoBind(false)
   .Columns(columns =>
   {
       columns.Bound(p => p.AssignedPhysicianName).Width(80).Title("Assigned Surgeon").HtmlAttributes(new { style = "text-align:center" }).Filterable(false);
       columns.Bound(p => p.StatusDesc).Width(80).Title("Status").HtmlAttributes(new { style = "text-align:center" }).Filterable(false);
       columns.Bound(p => p.EpisodeId).Width(50).Title("Select").HtmlAttributes(new { style = "text-align:center" })
       .Filterable(false)
       .ClientTemplate("<input type='radio' onClick='SelectEpisode()' name='EpisodeId' value='#= EpisodeId #' id='selectId' />");
   })
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Pageable(pager => pager.Refresh(true))
        .Sortable()
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .HtmlAttributes(new { style = "height:400px;font-size:12px" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.EpisodeId))
        .PageSize(100)
        .ServerOperation(false)
        .Read(read => read.Action("GetEpisodeList", "Patient").Data("getCaseId"))
     )
   .Events(ev => ev.DataBound("OnGridBound"))

)
</div>

Below is my javascript OnGridBound:

function OnGridBound(e) {
    var grid = $("#EpisodeList").data("kendoGrid");
    var dataSource = grid.dataSource;
    var totalRecords;
    totalRecords = dataSource.total();
    //alert(totalRecords);
    if (totalRecords == 0) {
        $("#textNoEpisode").show();
        $("#rEpList").hide();
        $("#emptyLine2").hide();
        $("#emptyLine3").hide();
        $("#emptyLine4").hide();
        $("#emptyLine5").hide();
        $("#emptyLine6").hide();
        $("#lineEditEpisode").hide();
        $("#lineSugInfor").hide();
        $("#lineAdmin").hide();
        $("#lineAddRecur").hide();
        $("#lineEpisodeStatus").hide();
        $("#linePatientDeath").hide();
    }
}

How can I make first radio button checked when the table is displayed ?


Solution

  • You can set the checked attribute conditionally in the ClientTemplate:

    .ClientTemplate("<input type='radio' #= EpisodeID == 1 ? checked='checked': '' # onClick='SelectEpisode()' name='EpisodeId' value='#= EpisodeId #' id='selectId' />")
    

    If the conditional approach is not feasible you can use the dataBound event handler, find the first row and the radio button, and set the checked attribute via jQuery:

    $(e.sender.tbody.find("tr input[type='radio']")[0]).prop("checked",true)