Get all data from gridmvc including all paging in javascript?

Question

I am trying to fetch data from gridmvc and show graphs using chart.js its working fine but issue is that its showing just with pages. Because i have enabled paging in grid and when i click on next page then next grid data page graphs show, but i want to show graph of complete grid data includes all pages.

     <div class="panel-body">

            @await Html.Grid(Model).Columns(columns =>

       {

           columns.Add(c => c.ID).Titled("StudentID").Filterable(true);

           columns.Add(c => c.Name).Titled("Name").Filterable(true);

           columns.Add(c => c.Major).Titled("Major").Filterable(true);

           columns.Add(c => c.Minor).Titled("Minor").Filterable(true);
           columns.Add(c => c.Email).Titled("Email").Filterable(true);

           columns.Add(c => c.Address).Titled("Address").Filterable(true);
           columns.Add(c => c.GPA).Titled("GPA").Filterable(true);


       }).Searchable(true, false, true).WithPaging(10).ChangePageSize(true).Sortable(true).EmptyText("No data found").Named("GridSearch").RenderAsync()

        </div>

Javascript

               function LoadChart() {
              debugger;
              var chartType = parseInt($("#rblChartType input:checked").val());
              var items = $(".grid-mvc").find(".grid-table > tbody").children();
              var json = [];
              $.each(items, function (i, row) {

                  $col1=$(row).children()[0].innerText;
                  $col2 = $(row).children()[1].innerText;

                  $col3 =$(row).children()[2].innerText;

                  $col4 =$(row).children()[3].innerText;
                  $col5 =$(row).children()[4].innerText;

                  $col6 =$(row).children()[5].innerText;
                  $col7 =$(row).children()[6].innerText;

                  json.push({ 'StudentID': $col1, 'Name': $col2, 'Major': $col3, 'Minor': $col4, 'Email': $col5, 'Address': $col6, 'GPA': $col7      
              })     
     // Map JSON values back to label array
              var labels = json.map(function (e) {
                  return e.Name;
              });
              console.log(labels); // ["2016", "2017", "2018", "2019"]

              // Map JSON values back to values array
              var values = json.map(function (e) {
                  return e.GPA;
              });
              var chart=BuildChart(labels, values, "Students Name by GPA");

I want to show graphs which include complete data in gridmvc not just on current page.

Answer 1

but issue is that its showing just with pages. Because i have enabled paging in grid and when i click on next page then next grid data page graphs show, but i want to show graph of complete grid data includes all pages.

   var items = $(".grid-mvc").find(".grid-table > tbody").children();
              var json = [];
              $.each(items, function (i, row) {

                  $col1=$(row).children()[0].innerText;
                  $col2 = $(row).children()[1].innerText;

                  $col3 =$(row).children()[2].innerText;

                  $col4 =$(row).children()[3].innerText;
                  $col5 =$(row).children()[4].innerText;

                  $col6 =$(row).children()[5].innerText;
                  $col7 =$(row).children()[6].innerText;

                  json.push({ 'StudentID': $col1, 'Name': $col2, 'Major': $col3, 'Minor': $col4, 'Email': $col5, 'Address': $col6, 'GPA': $col7      
              })     

The issue relates the above scripts, since you implement paging, when using the above code to get the table resource, it only gets the current page records, then display the page grahps.

To solve this issue, you could get the records from the page model (Model) or create an action method to get all records, then, use JQuery Ajax method to call this method and get the grid data.

To get records from the page model, in your Asp.net Core MVC application, you could use the Json.Serialize() method to convent the Model to JSON string first, then use JSON.parse() method convent the JSON string to JavaScript Object, then loop through the Object and get all data.

Code like this (Index.cshtml)

@model List<StudentViewModel>
@section Scripts{
    <script>
        $(function () {
            LoadChart();
        });

        function LoadChart() {
            debugger;
            //var chartType = parseInt($("#rblChartType input:checked").val());
            //var items = $(".grid-mvc").find(".grid-table > tbody").children();
            var json = [];
            var items = JSON.parse('@Json.Serialize(Model)');
            $.each(items, function (index, item) {
                json.push({ 'StudentID': item.id, 'Name': item.name, 'Major': item.major, 'Major': item.major, 'Email': item.email, 'Address': item.address, 'GPA': item.gpa });
            });

            //show graphs based on the json array.

The screenshot like this: