select Kendo ui grid row from controller

Question

My first problem is : I use kendo grid with Single Select mode and I need when view loaded for the first time, the first row is selected, in other words, i want to select the first kendo grid row programatically. moreover other problem is i insert radiobutton column in that grid , and i want synchronize radiobutton select with row select , in other words, i want that when user select row,it causes it's radiobutton Selected Please help me tnx this is the code:

   @(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

There is no such thing as making the row selected in the controller because the Grid is all created on the client. You can use the dataBound event to make the first row selected.

e.g.

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

Or use one instead of bind to make the row selected only when the page is loaded, not each time when the Grid is rebound - sort,filter, etc. Check documentation for more info.

Answer 2

If you are unfamiliar with jQuery, I highly recommend you take an online free tutorial from http://jqueryair.com/. Assuming your project is referencing the jQuery script in your _Layout page, all you should have to do is add an Event handler for Databound to the grid:

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

Then just paste this script onto the page:

<script> 

function Grid_Databound() {

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

I'm sure the same script that zeinad added would work as well, always more than one way to skin a cat. As far as making the radio button show selected if the row is selected, I think if you watched the tutorial I mentioned, you should be able to figure it out. Post back if you need more help.