Grid using Virtual Scrooling

[Peter]

Hi , can you give me example how to load grid from SQL Server and using virtual scrolling? many thanks

[Manivel Sellamuthu]

Hi Peter, 

Greetings from Syncfusion support. 

You can use UrlAdaptor for your requirement, which works on On-Demand, that helps us to improve the performance for large data application. Using this you can supply the records for current view only. While scrolling grid will request an AJAX POST for data to the server with the parameters of Skip and Take. You can use Dataoperations and DataManagerRequest to process grid actions such as Paging, Sorting, Searching, and Filtering for the server-side actions. Please find the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#handling-on-demand-grid-actions 

Based on your requirement, we have prepared a sample. 

[index] 

@{ 

 

    List<string> toolbarItems = new List<string>(); 

    toolbarItems.Add("Search"); 

} 

 

 

<div> 

    @(@Html.EJS().Grid("Grid").Height(450).EnableVirtualization(true).Toolbar(toolbarItems) 

        .AllowSorting().AllowFiltering().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }) 

        .DataSource(dataManager => {dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor");}).Columns(col => 

{ 

    col.Field("CustomerID").HeaderText("EmployeeID").Add(); 

    col.Field("ContactName").HeaderText("OrderID").Add(); 

    col.Field("CompanyName").HeaderText("FirstName").Add(); 

    col.Field("City").Add(); 

}).Render()) 

</div> 

[Controller] 

using EssentialJS2MvcApplication1.Models; 

using Syncfusion.EJ2.Base; 

using System; 

using System.Collections; 

using System.Collections.Generic; 

using System.Linq; 

using System.Web; 

using System.Web.Mvc; 

 

namespace EssentialJS2MvcApplication1.Controllers 

{ 

    public class HomeController : Controller 

    { 

 

        NORTHWNDEntities1 db = new NORTHWNDEntities1(); 

        public ActionResult Index() 

        { 

            return View(); 

        } 

        public ActionResult UrlDatasource(DataManagerRequest dm) 

        { 

// here you can apply the data to the Grid 

            IEnumerable DataSource = db.C30000Records.ToList(); 

            DataOperations operation = new DataOperations(); 

            if (dm.Search != null && dm.Search.Count > 0) 

            { 

                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 

            } 

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

            { 

                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 

            } 

            if (dm.Where != null && dm.Where.Count > 0) //Filtering 

            { 

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 

            } 

            int count = DataSource.Cast<C30000Records>().Count(); 

            if (dm.Skip != 0) 

            { 

                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 

            } 

            if (dm.Take != 0) 

            { 

                DataSource = operation.PerformTake(DataSource, dm.Take); 

            } 

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/152438/ze/152438-sql-virtual_scroll-549706459.zip 

Please get back to us, if you need further assistance. 

Regards, 

Manivel