Virtual scroll loading all content for pagination

6 posts, 0 answers
  1. Dan
    Dan avatar
    5 posts
    Member since:
    Jun 2015

    Posted 02 Nov Link to this post

    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.

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    51 posts

    Posted 02 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dan
    Dan avatar
    5 posts
    Member since:
    Jun 2015

    Posted 02 Nov in reply to Eduardo Serra Link to this post

    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)
                });
            }
  5. Eduardo Serra
    Admin
    Eduardo Serra avatar
    51 posts

    Posted 03 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  6. Dan
    Dan avatar
    5 posts
    Member since:
    Jun 2015

    Posted 03 Nov in reply to Eduardo Serra Link to this post

    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?
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 09 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready