Virtual Scroll mode and server side paging

[Xander van der Merwe]

I'm evaluating the new LightSwitch HTML control support and I'm trying to enable virtual scrolling in the included example Exporting.lsml/Exporting.lsml.js screen.

I've set the Order query page size to 12 items in the screen designer to ensure that not all records are fetched on the first page load and then changed the grid render code to the following. This works except it does not load any further records after loading the initial 12 records. How can I get the grid to automatically load additional pages from the server as I scroll down?:

        ...

        //Rendering the Grid Control

        itemTemplate.ejGrid(

           {

               dataSource: contentItem.value.data,

               // allowPaging: true,

               // pageSettings: { pageCount: 3 },

               allowScrolling: true,

               scrollSettings: { width: 0, height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous },

               isResponsive: true,

               enableResponsiveRow: true,

               allowSelection: true,

               enableRowHover: false,

               columns: [

                             { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80, priority: 1 },

                             { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 80, priority: 1 },

                             { field: "OrderDate", headerText: "Order Date", width: 100, type: "date", textAlign: ej.TextAlign.Right, priority: 1 },

                             { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}", priority: 2 },

                             { field: "ShipName", headerText: "Ship Name", width: 110, priority: 3 },

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

               ],

               toolbarClick: function (e) {

                   var gridObj = $("#Order").ejGrid('instance')

                   gridObj.exportGrid = gridObj["export"];

                   if (e.itemName == "Excel Export") {

                       gridObj.exportGrid('../api/GridExporting/ExcelExport')

                       e.cancel = true;

                   }

                   else if (e.itemName == "Word Export") {

                       gridObj.exportGrid('../api/GridExporting/WordExport')

                       e.cancel = true;

                   }

                   else if (e.itemName == "PDF Export") {

                       gridObj.exportGrid('../api/GridExporting/PdfExport')

                       e.cancel = true;

                   }

               },

               toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] }

           });

           ...

Thanks in advance

[Xander van der Merwe]

Just to be clear, I don't want to load all the records on the initial load as that will be too slow for large data sets. 

Thanks in advance 

[Alan Sangeeth S]

Hi Xander,

 

Thanks for using Syncfusion Products.

 

We have anylyzed your code snippets and found that you have used local data for Grid datasource which loads all data to Grid at intial time. So we suggest you to use DataManager to bind remote data to Grid which loads only required data(based on current page) to grid. Please refer the following code snippets.

 

itemTemplate.ejGrid(

            {

                dataSource: ej.DataManager({

                    url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"

                }),

...

});

 

For your convenience we have created a sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/131811/LightSwitchEJVirtual_(2)1236052780.zip

 

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Xander van der Merwe]

Hi Alan,

Thanks for the response, but in that sample quoted (which is your own sample supplied with the new LightSwitch HTML controls) the grid is bound to the Orders visual collection that is defined on that screen and the visual collection is indeed loaded from the Server.

1) Are you saying that virtual scrolling on a LightSwitch visual collection is not possible?

2) In fact, looking at your original example for Exporting.lsml I can now see that server side paging with a visual collection does not work at all, irrespective whether you are using virtual scrolling or not. Is this correct?

Not supporting server side paging with LightSwitch visual collections is unfortunately a major missing feature that makes the SyncFusion controls less compelling with LightSwitch. Please consider adding this feature.

Thanks

[Alan Sangeeth S]

Hi Xander,

 

 

Query 1: “virtual scrolling on a LightSwitch visual collection is not possible?”

We are analyzing the issue “visual collection does not work” with high priority and we will update you further details on November 13, 2014.

 

 

Query 2: “Virtual scrolling with on-demand paging”

For now we have created Odata service in LightSwitch DataSource and given odata service link to DataManager which processes on-demang paging. Using DataManager we can bind data from services to Grid by giving the service link in “url” property of DataManager. Please refer the following code snippets.

 

itemTemplate.ejGrid(
            {

dataSource: ej.DataManager({

 

                   url: "/NORTHWNDEntitiesData.svc/Orders"

 

}),

...

}

 

For your convenience we have modified the sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/130962/LightSwitchEJVirtual699278601.zip

 

 

Please let us know if you have any queries.

 

Regards,
Alan Sangeeth S

 

[Alan Sangeeth S]

Hi Xander,

 

Query: “virtual scrolling on a LightSwitch visual collection is not possible?”

 

In the DataManager “url” property, we can give the visual collection service link to load grid using visual collection data. Please refer the following code snippets.

var database = contentItem.valueModel.source.target.source.member.id.split("/")[0]

        var table = contentItem.valueModel.name

        var vCollection = myapp.rootUri +"/" +database + ".svc/" + contentItem.valueModel.name ;

 

itemTemplate.ejGrid(

            {

 

                dataSource: ej.DataManager({ url: vCollection }),

...

})

 

 

For your convenience we have created a sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/130064/LightSwitchEJVirtual-628984651.zip

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Xander van der Merwe]

Alan, these questions have unfortunately not been answered.

I know you can connect directly to the LightSwitch backend OData service, but that is not my question. I am talking about connecting to the "visual collection" defined on the LightSwitch screen during design time and having server side paging working with that defined visual collection.

In your examples you always connect to the OData backend service directly and that is not what I 'm looking for.

Thanks

[Alan Sangeeth S]

Hi Xander,

 

Thanks for the update.

 

We have created a new incident (132378) on behalf of you related to the query “server side paging working with visual collection” in this forum. We suggest you to follow up the incident for further reference using your direct trac account.

 

Please let us know if you have any concerns.

Regards,
Alan Sangeeth S

[Alan Sangeeth S]

Hi Xander,

 

We are sorry to let you know that “Server-side paging with visual collection” is not currently supported and we had logged this requirement as a feature request in our database. So for your better follow-up with this feature requirement we have created the incident (#132378) by which you can track the feature status.

 

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Jens Bo Frederiksen]

Hi,

Seems I am not able to follow any updates on incident (#132378) (I'm not Xander), but I would like to know if the feature is implemented or on its way to being so.

The feature would be very nice when a large number of screens currently using the built-in components of Lightswitch HTML are to be converted to using ejGrid.

/Jens Bo

[Alan Sangeeth S]

Hi Jens,

Thanks for using Syncfusion products.

For your information, currently we have not planned for the feature “Server-side paging with visual collection”.

A support incident has been created under your account to track the status of this requirement “Server-side paging with visual collection”. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

But we suggest you to use the workaround using DataManager for which we have provided solution in this same forum on November 14, 2014.

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Jens Bo Frederiksen]

Hi Alan,

Yes I can use the DataManager to connect to the base entities via OData. But that will not take benefit of the Queries we have on top of the entities on the Lightswitch server side.

What I am after is a way to use the Server Sides Queries (with parameters and preprocessquery code) and display the resulting data using ejGrid in server side page mode.

One way would be if ejGrid and/or DataManager could connect to Lightswitch Visual Collections (because these can in fact connect to queries and do server side paging).

If you can see another way I would welcome that very much.

I have tried to connect the DataManager via the Url to the queries, but as these then require parameters (like www.myapp.com/databse.svc/CustomersSearch?searchstring='x' ) things go very wrong and the DataManager stops working.

Any ideas on how to do this?

Best regards JensBo

[Alan Sangeeth S]

Hi Jens,

Thanks for using Syncfusion Products.

We suggest you to use “UrlAdaptor” of DataManager to process server-side queries. We can also send additional Parameters to server-side using “query” Grid Property. Please refer the following code snippets.

itemTemplate.ejGrid(

            {

                dataSource: ej.DataManager({url: "/Grid/DataSource", adaptor:"UrlAdaptor"}),

              

               query:ej.Query().addParams("customer","THOMSP"), 

                           });

public ActionResult DataSource(DataManager dm, string customer)

        {

            IEnumerable DataSource = OrderRepository.GetAllRecords().Where(ds=> ds.CustomerID == customer);

         

            …

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

            return Json(new { result = DataSource, count = count}, JsonRequestBehavior.AllowGet);

        }

For your convenience we have created a sample and the same can be downloaded from below location.

Sample: http://www.syncfusion.com/downloads/support/forum/117561/ze/LightSwitchEJVirtual699278601-2046726456

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S