<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%= Html.Telerik().Grid<ShowAllPagerOption.Models.Product>()
            .Name("Grid")
            .Columns(columns =>
            {
            columns.Bound(p => p.ID).Width(100);
            columns.Bound(p => p.Name);
            })
            .Sortable()
            .Pageable()
            .ClientEvents(e => e.OnLoad("onLoad"))
            .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Home"))
    %>
    <script>
    function onLoad() {
        var grid = $(this).data("tGrid");
        var pageSize = grid.pageSize;

        $("<a class='t-link' href='#'> Show All </a>")
            .click(function(e){
               e.preventDefault(); 
               e.stopPropagation();

               if (grid.pageSize == grid.total) {
                   $(this).text("Show All");
                   grid.pageSize = pageSize;
               } else {
                   $(this).text("Show Less");

                   grid.pageSize = grid.total;
               }

               grid.ajaxRequest();
            })
            .appendTo($(this).find(".t-pager"));
    } 
    </script>
</asp:Content>
