Virtual Scrolling (Paging) with ServerSide loading en using Partial Views

[Sven Ansem]

Hi,

We want the following with the Grid

• Virtual Scrolling
• Server Side loading (because large volume and filtering)
• Use the Grid in a Partial View

We have:

Controller

	public ActionResult SearchResultPaged([Bind(Prefix = "$skip")]int? skip, [Bind(Prefix = "$top")]int? top)
        {
            // Declare variables       
            var headerViewModel = Session.GetItem<HeaderViewModel>(); //Search Criteria
            List<ItemArticle> result = SearchResultSet(headerViewModel, skip, top);
 
            var count = result.Count();
            // Return a view
            return Json(new { d = new { results = result, __count = count } }, JsonRequestBehavior.AllowGet);
            //return View("_ItemArticleGrid", result);
        }

View (Index.cshtml)

@using Models
@model ViewModels.ItemArticleViewModel
@{
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
@section Top
{
    <div id="articleGrid">
	Html.Partial("_ItemArticleGrid");
    </div>
}

PartialView (_ItemArticleGrid.cshtml)

@using System.Data.Entity.Core.Common.CommandTrees.ExpressionBuilder
@using Models
@using StoredProcedures.Models
@model string
 
 
@(Html.EJ().Grid<ItemArticle>
        ("Grid")
        .Datasource(ds => ds.URL("ItemArticle/SearchResultPaged"))
        .AllowScrolling()
        .AllowSorting()
        .AllowPaging()
        .ScrollSettings(scroll => scroll.Height(400).Width(1100).AllowVirtualScrolling(true))

)
 
@Html.EJ().ScriptManager()
 

We cannot get it to work, we tried several option such as RenderAction, parse a type viewmodel instead of string. But we get a dialog to save JSON, an empty grid or no grid at all.

Is it possible to provide a working example?

[Ragavee U S]

Hi Sven Ansem

 

Thanks for your interest in Syncfusion products.

 

We have analyzed the reported query. We have created a sample based on your requirement and the same can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/12.2Sample-1463155610.zip

 

In the above sample, we have rendered a grid in a partialView, enabled VirtualScrolling and server side loading. Please refer the below code snippet.

 

[In Index.cshtml]

<div id="divGrid">

    @Html.Partial("_partialGrid")

</div>

 

[In _partialGrid.cshtml]

@(Html.EJ().Grid<Sample.Models.OrdersView>("Grid")

        .Datasource(d=>d.URL("/Home/partialGrid").Adaptor("UrlAdaptor"))       

        .AllowScrolling()

       .ScrollSettings(scroll=>scroll.AllowVirtualScrolling().Height(300).Width(400))       

            . . .

       )

@Html.EJ().ScriptManager()

 

[In Controller]

public ActionResult partialGrid(DataManager dm)

        {

            var DataSource = OrderRepository.GetAllRecords().ToList();

            DataResult result = new DataResult();

            result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();

            result.count = DataSource.Count();

            return Json(result, JsonRequestBehavior.AllowGet);

        }

        public class DataResult

        {

            public IEnumerable<EditableOrder> result { get; set; }

            public int count { get; set; }

        }

 

Please try the above sample and get back to us if you need any further assistance.

 

Regards

Ragavee U S

[Sven Ansem]

Many Thanks. This was exactly I was looking for.

* Can you explain where I can find more information about the DataManager ?

* I what does .Adaptor("UrlAdaptor") do in the view ?

Regards,

Sven

[Madhu Sudhanan P]

Hi Sven,

 

Please find the response.

 

Query #1: ” Can you explain where I can find more information about the DataManager ?”

 

The documentation is currently in review state. It will be hosted online in third week of November with our Volume 3, 2014 Service Pack 1 release.

We will let you know once it is hosted online.

 

Query #2: “what does .Adaptor("UrlAdaptor") do in the view ?”

 

The UrlAdaptor is used by the DataManger to process the request and response. The Essential DataManager has several types of Adaptors in which commonly used adaptors are as follows,

 

1.       JSON Adaptor – It is used to process the JSON Collection.

2.       URL Adaptor – it is used to process all remote server`s request and response.

3.       OData Adaptor – It is used to process request and response of OData services.

 

The DataManager documentation will also include details about the Adaptors. For now, we have provided you the “Unedited Copy” of the Data Adaptors topic as a separate document and the same can be downloaded from the below location.

 

 Documentation link:  http://www.syncfusion.com/downloads/support/directtrac/general/UG_-_Data_Adaptors_-_UneditedCopy-934982544.zip

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Sven Ansem]

This solution works good. But it is now when I scroll it only retrieves the number of rows it can display. So if I scroll a short time the icon of retrieving is visible, that is a bit annoying. Is it possible to show i.e. 12 rows but it retrieves 120 rows, so the first 10 scrolls dont do a call to the url, only when row 121 must displayed, the next 120 rows will be retrieved. This way the user experience a smoother scrolling.

[Ragavee U S]

Hi Sven

Thanks for your update.

We are glad that we have achieved your requirement using the Load event of the grid.

In the load event of the grid, we have assigned the default pageSize of the grid as “120” in order to retrieve 120 records when a post request is made everytime. Also, since we have set the scroller width and height, based on it only 12 records(based on the height specified) will be displayed though 120 records are retrieved.

Please refer the below code snippet.

[In _partialGrid.cshtml]

@(Html.EJ().Grid<Sample.Models.OrdersView>("Grid")

        . . . . .

        .ScrollSettings(scroll=>scroll.AllowVirtualScrolling().Height(418).Width(400))

            .ClientSideEvents(eve=>eve.ActionBegin("begin").Load("load"))

        )

@Html.EJ().ScriptManager()

<script type="text/javascript">

   

    function load(args) {

        args.model.pageSettings.pageSize = 120;

    }

       

</script>

For your convenience, we have modified our previously updated sample with the above solution and the sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/117533/12.2Sample530116507.zip

Please try the sample and get back to us if you need any further assistance.

Regards

Ragavee U S

[Adam Murray]

We are attempting to do the same as provided here, however we are using the Javascript version of the grid not Razor syntax.

Is this possible with JS Grid as well? 

$('#appointmentsGrid').ejGrid({

        dataSource: e.result,

        isResponsive: true,

        enableResponsiveRow: true,

        allowPaging: false,

        allowScrolling: true,

        allowSelection: false,      // don't allow selection of the row. This prevents the "ugly" blue background appearing when clicking on the row item.

        enableAltRow: true,

        //toolbarSettings: {

        // showToolbar: true,

        // toolbarItems: [ej.Grid.ToolBarItems.Search]

        //},

        gridLines: ej.Grid.GridLines.None,

        cssClass: "cursor",

        recordClick: function (args) {

        //console.log("recordDoubleClick");

        onClickAppointmentHistory(args);

        },

        columns: [{

        headerText: "",

        template: true,

        templateID: "#appointmentRowTemplate"

        }]

        });

[Farveen Sulthana Thameeztheen Basha]

Hi Adam, 

Thanks for your interest in syncfusion support. 

Yes, you can render the Grid in partial view using javascript code.  

 

Please refer to the code example:- 

 

<div id="FlatGrid"></div> 

    <script type="text/javascript"> 

 

        $(function () { 

            $("#FlatGrid").ejGrid({ 

                // the datasource "window.employeeData" is referred from templatelocaldata.js 

                dataSource: ej.DataManager({ 

                    url: "/Home/DataSource", 

                    adaptor: "UrlAdaptor" 

                }), 

                isResponsive: true, 

                allowFiltering: true, 

                filterSettings: { filterType: "menu" }, 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel], customToolbarItems: ["Expand", "Collapse", { templateID: "#batch" }, { templateID: "#dialog" }] }, 

                columns: [ 

                              { field: "EmployeeID", headerText: "Employee ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 100 }, 

                              { field: "FirstName", headerText: "First Name", width: 100 }, 

                              { field: "LastName", headerText: "Last Name", width: 100, priority: 2 }, 

                              { field: "Title", headerText: "Title", width: 90, priority: 3 }, 

                              { field: "BirthDate", headerText: "Birth Date", width: 100, textAlign: ej.TextAlign.Right, priority: 5 }, 

                              { field: "Country", headerText: "Country", width: 100, priority: 4 } 

 

                ], 

                

            }); 

        }); 

            @Html.EJ().ScriptManager() 

      </script> 

 

 

Please refer to the following link  

 

https://forums.asp.net/t/2059513.aspx?how+to+refresh+a+partial+view+using+javascript+ 

 

 

Please let us know if you need any further assistance. 

Regards, 

Farveen sulthana T