I have a simple Kendo grid as shown below:
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 ?
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)