@model IEnumerable<dynamic>

<div id="mainPanel">
    @using (Html.BeginForm())
    {

        
        <input type="button" value="Build" id="buildButton" onclick="ReportRender()" />
        
    
               @(Html.Telerik().Grid(Model)
                .Name("grdHierarchy")
                .Sortable()
                .Pageable()
                .Scrollable(scrolling => scrolling.Enabled(true)))
    
    }
</div>

<script type="text/javascript">

    //global cache false
    $.ajaxSetup({ cache: false });

    //variable that holds grid data
    var records;
    //variable that holds total number of records
    var totalRecords;

    function ReportRender() {
        debugger;

        //grid variable
        var grid = $('#grdHierarchy').data('tGrid');
        //grid page size (default is 10)
        var PageSize = grid.pageSize;

        //get JSON data from the repective controller action
        //input parameter for controller's action is grid current page (always 1) and the page size
        $.getJSON('@Url.Action("SampleData1", "Home")', { pageNum: 1, pageSize: PageSize }, function (result) {
            //total number of records
            totalRecords = result.total;
            //total records
            records = result.data;
            //var data = records.slice();
            //bind method   
            debugger;
            grid.dataBind(records);
        });

    }

   

    

</script>
