Kendo Grid and Modal MVC 5

Question

I'm trying to display a selected row of my kendo grid :

@(Html.Kendo().Grid<Solution.ViewModels.ItemViewModel>()
    .Name("myGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.item1);
        columns.Bound(c => c.item2);
        columns.Bound(c => c.item3);
    }).HtmlAttributes(new { style = "text-align: center;" })
            .Sortable()
            .Pageable(pageable => pageable
            .ButtonCount(5))
            .Selectable(selectable => selectable
                          .Mode(GridSelectionMode.Single)
                          .Type(GridSelectionType.Row))
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetItem", "ItemTest"))
                    .ServerOperation(true)
                    .PageSize(20))                      
                    .Events( events=> events.Change("onItemChange").DataBound("onGridDataBound"))

with this js :

@section ScriptsBottom
{
    <script type="text/javascript">

        // On grid row selection/click
        function onItemChange(e) {

            var grid = e.sender;
            var selectedItem = grid.dataItem(this.select());
            $('#modal').data(selectedItem);

        }
        function displaySelectedItem() {
            $('#modal');
        }

    </script>
}

I don't know how to bind and display data of the selected row to my popup, can you help me ?

Answer 1

The following example shows a pretty similar scenario:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/grid-external-form-editing

The idea is to use kendo.bind() with the modal container and pass the selected data item object.