<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication3.Models.Orders>>" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<div id="result">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.ShipCountry);
            columns.Add(o => o.OrderID).Format(Html.ActionLink("Edit", "Edit", new { id = "{0}" }, new {onclick="loadEditForm(this, event)"})).Encoded(false);
        })
        .Ajax(ajax => ajax.Action("_Index", "Home"))
        .Pageable()
        .Sortable()
%>
</div>
<script type="text/javascript">
    function loadEditForm(element, e) {
        // avoid navigating by calling preventDefault - http://api.jquery.com/event.preventDefault/
        new $.Event(e).preventDefault();

        // use the jQuery load method (http://api.jquery.com/load/) to request the partial view
        
        // #result is the DIV where the partial view will be loaded
        $('#result').load(element.href);
    }
</script>
</asp:Content>
