Kendo Grid with Radio Button Column in a MVC application

[Amyth]

I have a kendo grid bound to a data source. I need to display a radio button column for the Primary key in the datasource. 

My Datasource looks something like this

CountryID ,CountryName

1 , SomeCountryName1
2 , SomeCountryName2

Model

public class Country
    {
        public Country()
        {
        }

        public int CountryID { get; set; }
        public string CountryName { get; set; }
    }

What is the right way of adding a radio button client template to the CountryID column. Also i need to obtain the selected Country ID 
I managed to get the radio buttons but they don't seem to be working the way i want it to.

I need to get it working something like this.

The selection of radio button should highlight a single row and give back the ID 


@(Html.Kendo().Grid<Mvc4SampleApplication.Models.Country>()
    .Name("CountriesGrid2")
    .EnableCustomBinding(true) // Enable custom binding
        .Pageable(pager => pager
        .PageSizes(true))
    .Columns(columns =>
    {
        columns.Bound(o => o.CountryID).Width(200).ClientTemplate("<input type='radio' name='CountryID' value='#= CountryID #'  />").Title("Select Country").HtmlAttributes(new { style = "text-align:center" });  
              columns.Bound(o => o.CountryName);

    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Index2", "Address").Type(HttpVerbs.Get))
                        .Model(model =>
                        {

                            //The unique identifier (primary key) of the model is the ProductID property
                            model.Id(country => country.CountryID);

                            // Declare a model field and optionally specify its default value (used when a new model instance is created)
                            model.Field(country => country.CountryName).DefaultValue("N/A");

                            // Declare a model field and make it readonly

                        })
                    ).Pageable(pager => pager
                        .PageSizes(true)).Sortable().Scrollable()
                            .Selectable(selectable => selectable.Enabled(true)
             .Mode(GridSelectionMode.Single)
                       .Type(GridSelectionType.Row)).Events(events => events.Change(@<text>
                function(e) {
                //event handling code
                   
                    alert("Hello");
                }
                </text>)))

 

[Alexander Popov]

Hello Amyth,

This could be achieved by using the Grid's dataBound event handler to subscribe to the radio button's change event. For example: 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()

    .Name("grid")

    .Events(e=>e.DataBound("onDataBound"))
      .Selectable()

    .Columns(columns =>

    {

        columns.Bound(p => p.ProductName).ClientTemplate("<input type='radio' name='ProductID' value='#= ProductID #'  />").Width(100).Title("TEST");

           ....

)

<script type="text/javascript">

    function onDataBound() {

        var grid = this;

        $("[name='ProductID']").change(function (e) {

            var row = $(e.target).closest("tr");

            var dataItem = grid.dataItem(row);
                 grid.select(row);

            alert(dataItem.ProductID);

        });

    }

</script>

Regards,
Alexander Popov
Telerik

 

 

[Amyth]

Thank you very much Alexander.. It's working fine now.

Just Posting the Complete listing. Someone someday could find this useful

@(Html.Kendo().Grid<Mvc4SampleApplication.Models.Test>()
    .Name("CountriesGrid3")
    .EnableCustomBinding(true) // Enable custom binding
        .Pageable(pager => pager
        .PageSizes(true))
        .Events(e=>e.DataBound("onDataBound"))
    .Columns(columns =>
    {
        columns.Bound(o => o.CountryID).ClientTemplate("<input type='radio' name='CountryID' value='#= CountryID #'  />").Title("Select Country").HtmlAttributes(new { style = "text-align:center" });

        columns.Bound(o => o.CountryName);

    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Index3", "Address").Type(HttpVerbs.Get))
                        .Model(model =>
                        {
                            model.Id(country => country.CountryID);

                            
                            model.Field(country => country.CountryName).DefaultValue("N/A");

                        })
                    ).Pageable(pager => pager
                        .PageSizes(true)).Sortable().Scrollable()
                                .Selectable(selectable => selectable.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                                )

<script type="text/javascript">
    function onDataBound() {
        var grid = this;
        $("[name='CountryID']").change(function (e) {
            var row = $(e.target).closest("tr");
            var dataItem = grid.dataItem(row);
            grid.select(row);
            alert('You Selected '+ dataItem["CountryName"] + ' with ID= ' + dataItem["CountryID"]);
        });
    }
</script>