Kendo Grid dynamic columns Endless scrolling implementation ASP.NET

1 Answer 50 Views
Data Source Grid
Atif
Top achievements
Rank 1
Atif asked on 08 Sep 2023, 12:38 PM

I am trying to bind it with dynamic columns SQL table paging. The issue is on the second scroll/page it failed the method.

Razor Page

@model System.Data.DataTable
@(Html.Kendo().Grid<dynamic>()
    .Name("Grid")
    .Sortable()
    .Scrollable(sc => sc.Endless(true))
    .Filterable()
    .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                var id = "Id";
                model.Id(id);
            })
            .Read(read => read.Action("Data_Read", "DynamicColumn"))
        )
)

Controller DynamicColumn

 public IActionResult Data_Read([DataSourceRequest] DataSourceRequest request)
 {
     var dt = GetViewsData(request.PageSize, request.Page);
     var data = dt.ToDataSourceResult(request);
     var viewData = new DataSourceResult()
     {
         Data = data.Data, //this return NULL on the second page/scroll request
         Total = 181480 //total rows of table, just make it static
     };
     return Json(viewData);
 }

public DataTable GetViewsData(int pageSize, int page)
    {

        try
        {
            int offSet = (page - 1) * 100;
            string connString = "Server=.; Database=TheVault_VMC; Trusted_Connection=true; MultipleActiveResultSets=True; Encrypt=False;";
            SqlConnection con = new SqlConnection(connString);
            con.Open();
            SqlCommand cmd = new SqlCommand("sp_GetData", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@OFFSetRows", offSet);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
            var dataTable = new DataTable();

            dataAdapter.Fill(dataTable);
            dataAdapter.FillSchema(dataTable, SchemaType.Mapped);
            con.Close();
            return dataTable;

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

}


SQL Server Procedure

CREATE PROCEDURE [dbo].[sp_GetData] 
   @OFFSetRows INT,
   @PageSize INT
As
BEGIN    
SELECT Id, [Column1], [Column2], [Column3],[Column4],[Column5],[Column6]
FROM
[StagingDetail]
ORDER BY Id
OFFSET @OFFSetRows ROWS
FETCH NEXT @PageSize ROWS ONLY
END

 

The issue is the function ToDataSourceResult() returns NULL Data on the second request

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 13 Sep 2023, 08:12 AM

Hi Atif,

Thank you for the code snippets and the details provided.

The Telerik UI Grid Component is responsible for visualizing the provided data.

It seems the data is not loaded correctly in the BackEnd.

In order to start the debugging process from a workable example, I would recommend using the approach from the following demo:

The following article provides further information about the Custom Binding operations:

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Tags
Data Source Grid
Asked by
Atif
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or