Virtual scroll loading all content for pagination

[Dan]

I am using the `scrollable.Virtual` option on my grid. What i'm trying to do is paginate 4000 rows into 50 per page and have the next set load on scroll.  The problem is that when I first load the grid it loads all 4000 records, then when i scroll to the 51st record it pulls all 4000 records again.

 

This is my code

@(Html.Kendo().Grid<EmployeeMasterView>()
              .Name("grid")
              .ToolBar(tools => tools.Excel())
              .Excel(e => e.AllPages(true))
              .Excel(excel => excel
                  .FileName("List.xlsx")
              )
              .Columns(columns =>
              {
                  columns.Bound(e => e.EmployeePicture).ClientTemplate("<img src='" + Url.Content("~/#: EmployeePicture#") + "' height='50px' width='50px' />").HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Picture", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Picture", GlobalVariables.LanguageID)).Width(100);
                  columns.Bound(e => e.FirstName).Width(120).ClientTemplate("<a href='" + Url.Action("Index", "Employees", new { E = "#: EmployeeID#", M = "Info" }) + "' >#: FirstName#</a>").HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("FirstName", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("FirstName", GlobalVariables.LanguageID));
                  columns.Bound(e => e.LastName).Width(120).ClientTemplate("<a href='" + Url.Action("Index", "Employees", new { E = "#: EmployeeID#", M = "Info" }) + "' >#: LastName#</a>").HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("LastName", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("LastName", GlobalVariables.LanguageID));
                  columns.Bound(e => e.dispEmployeeID).Width(120).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("EmployeeID", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("EmployeeID", GlobalVariables.LanguageID));
                  columns.Bound(e => e.Email).ClientTemplate("<a href='mailto:" + "#: Email#" + "' title='" + "#: Email#" + "'>" + "<i class='list-icon-mail fa fa-envelope-o fa-lg fa-fw'></i></a>").Width(100).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Email", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Email", GlobalVariables.LanguageID));
                  columns.Bound(e => e.dispDept).Width(155).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Department", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Department", GlobalVariables.LanguageID));
                  columns.Bound(e => e.StrGender).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Gender", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Gender", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.DateEmpInactivated).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Date Employee Inactivated", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Date Employee Inactivated", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.InactivatedReason).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Inactivated Reason", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Inactivated Reason", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.JobCategory).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Job Category", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Job Category", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.WorkSiteID).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("WorkSiteID", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("WorkSiteID", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.WorkSiteLocation).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Work Site Location", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Work Site Location", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.EmployeeWorkAddress).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Employee Work Address", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Employee Work Address", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.TerminationDate).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Termination Date", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Termination Date", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.disbStartDate).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Start Date", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Start Date", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.dispPos).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Position", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Position", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.SSN).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("SSN", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("SSN", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.State).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("State", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("State", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.EmployeementStatus).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Work Status", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Work Status", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.dispBirthDate).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Birthdate", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Birthdate", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.dispDOH).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Original Hire Date", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Original Hire Date", GlobalVariables.LanguageID)).Hidden(true);
                  columns.Bound(e => e.BlnInactive).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Inactive", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Inactive", GlobalVariables.LanguageID)).Hidden(true).ClientTemplate("<input type='checkbox' #= BlnInactive ? checked='checked' : '' # disabled='disabled'></input>");
                  //columns.Bound(e => e.dispDept).HeaderHtmlAttributes(new { @title = FieldTranslation.GetLabel("Dept Desc", GlobalVariables.LanguageID) }).Title(FieldTranslation.GetLabel("Dept Desc", GlobalVariables.LanguageID)).Hidden(true);

              })
              .Sortable()
        // .Scrollable(scrollable => scrollable.Virtual(true))
              .Scrollable(scrollable => scrollable.Virtual(true))
              .Groupable()
              .ColumnMenu()
        //.Pageable()
              .Filterable()
              .ClientDetailTemplateId("template")
              .HtmlAttributes(new { style = "height:600px;" })
              .Reorderable(reorder => reorder.Columns(true))
              .Resizable(resize => resize.Columns(true))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(50)
                  .Read(read => read.Action("DetailTemplate_Employees", "Employees"))

              )
              .Events(events => events.DataBound("dataBound"))
        )

 

What I am trying to achieve is on first load it has the first 50 rows, then on scroll loads the next 50...and doesn't pull all 4000 records each time I scroll to the next 50.

[Eduardo Serra]

Hello Dan,

Would you mind sharing with us the DetailTemplate_Employees action method from the Employees controller?

Thank you. 

Regards,
Eduardo Serra
Telerik by Progress

[Dan]

No problem, here it is.

public ActionResult DetailTemplate_Employees([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetEmployees()
                .ToDataSourceResult(request));
        }

 

and

public static IEnumerable<EmployeeMasterView> GetEmployees()
        {
            // List<EmployeeMasterView> theEmployees = new List<EmployeeMasterView>();
            var model = CompanyContextFactory.GetContextPerRequest();
            var ees = model.Employees.Where(e => e.CompanyID == GlobalVariables.CompanyID && e.ClientID == GlobalVariables.Client).ToList();
            var securityEEs = GlobalVariables.SecurityEmployees;
            ees = ees.Where(e => securityEEs.Any(sec => sec == e.EmployeeID)).ToList();
            return ees.OrderBy(emp => emp.LastName).Select(employee => new EmployeeMasterView
            {
                FirstName = employee.FirstName ?? string.Empty,
                LastName = employee.LastName ?? string.Empty,
                MiddleName = employee.MiddleName ?? string.Empty,
                EmployeeID = employee.EmployeeID,
                Email = EmployeeEmail(employee.EmployeeID, employee.CompanyID),
                Department = employee.Department,
                StartDate = employee.StartDate,
                EmergencyPhone = employee.EmergencyPhone,
                DnetUserID = employee.DnetUserID,
                EmployeePicture = GetEmployeePhoto(employee.EmployeeID),
                CompanyID = employee.CompanyID,
                Gender = employee.Gender,
                Position = employee.Position,
                EthnicOrigin = employee.EthnicOrigin,
                dispEthnicity = FieldTranslation.GetEnumDescription(typeof(enEthnicOrigin), employee.EthnicOrigin ?? 0),
                OriginalHireDate = employee.OriginalHireDate,
                BirthDate = employee.BirthDate,
                I9Versified = employee.I9Verified,
                SSN = FieldTranslation.GetMaskSSN(employee.SSN),
                StrGender = GetGender(employee.Gender),
                BlnInactive = employee.Inactive,
                dispDept = FieldTranslation.GetDepartmentDesciption(employee.Department),
                dispPos = FieldTranslation.GetJobTitleDesciption(employee.Position),
                Address1 =(employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.Address1).FirstOrDefault() ??string.Empty),
                Address2 =(employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.Address2).FirstOrDefault() ??string.Empty),
                City =employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.City).FirstOrDefault(),
                State =employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.State).FirstOrDefault(),
                Zip =employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.Zip).FirstOrDefault(),
                EmployeementStatus =FieldTranslation.GetEnumDescription(typeof(enEmploymentType), (employee.PartTime ?? 0)),
                phone1 =FieldTranslation.FormatPhone(employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.Phone1).FirstOrDefault() ??string.Empty),
                phone2 =FieldTranslation.FormatPhone(employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.Phone2).FirstOrDefault() ??string.Empty),
                phone3 =FieldTranslation.FormatPhone(employee.EmployeeAddresses.Where(ea =>ea.CompanyID == employee.CompanyID && ea.EmployeeID == employee.EmployeeID &&ea.AddressCode == employee.AddressCode).Select(ea => ea.Phone3).FirstOrDefault() ??string.Empty),
                disbStartDate = FieldTranslation.ToShortDate(Convert.ToDateTime(employee.StartDate)),
                dispBirthDate = FieldTranslation.ToShortDate(Convert.ToDateTime(employee.BirthDate)),
                dispDOH = FieldTranslation.ToShortDate(Convert.ToDateTime(employee.OriginalHireDate)),
                DateEmpInactivated = FieldTranslation.ToShortDate(Convert.ToDateTime(employee.DateEmployeeInactivated)),
                InactivatedReason = employee.ReasonEmployeeInactivated,
                JobCategory =(employee.JobCategory != null)? FieldTranslation.GetEnumDescription(typeof(enJobCategories), (int)employee.JobCategory): FieldTranslation.GetEnumDescription(typeof(enJobCategories), 0),
                WorkSiteID = employee.WorksiteID,
                WorkSiteLocation = employee.WorksiteLocation.ToString(),
                EmployeeWorkAddress = employee.EmployeeWorkAddress,
                TerminationDate = FieldTranslation.ToShortDate(Convert.ToDateTime(employee.TerminationDate)),
                dispEmployeeID = FieldTranslation.EmployeeIDFormatted(employee.EmployeeID)
            });
        }

[Eduardo Serra]

Hello Dan,

Your controller seems to be set up correctly for the Kendo UI Grid to work with Virtual Scrolling. 

In the documentation related to Virtual Scrolling Known Limitations we can see that this feature is not compatible with Hierarchy, and using a detail template is considered to be a part of the hierarchical functionality.

Although the expected behavior that comes from using a client template in a grid with virtual scrolling does not fit your description of the problem, I would like you to try and leave that bit bit out in order to see how that affects the functionality of your grid.

Thank you.

Regards,
Eduardo Serra
Telerik by Progress

[Dan]

I've commented out the detail template and still experience the same behavior with the virtual scrolling.  One thing I did notice is that it takes 10+ seconds for the Read action to trigger when the grid loads. Is this normal?  Is there something in my code above that might be causing the read not to take place right away?

[Pavlina]

Hi,

Please excuse us for the long delay.

I went through the provided code and noticed that grid grouping is also enabled. As pointed in Limitations of Virtual Scrolling section referenced in the previous post virtual scrolling is not compatible with grid grouping as well. Remove the Groupable option and see if it makes any difference:

I also recommend you can compare your Grid configuration with the one in our demo.
http://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data

In case the problem still exists send a complete runnable demo via support ticket, so we can provide further assistance.

Regards,
Pavlina
Telerik by Progress