Virtual Transport

[William]

I;m using the below code and was wondering to I need to rework my data call to include transport in order to get  virtual scrolling to work or am I missing something else?

Thanks


function LoadSubGrid_DX09(a, c) {

                       var Data = jQuery.ajax(

                           {
                               async: true,
                               type: "POST",
                               traditional: true,
                               url: "JSONService.asmx/Storefront_SubGrid_1",
                               data: "{'Sample_Type':'" + c + "', 'Disease_Site':'" + a + "'}",
                               contentType: "application/json; charset=utf-8",
                               dataType: "json",
                               serverPaging: true,
                               serverSorting: true,
                               pageSize: 100,
                               beforeSend: function () {
                                document.getElementById('subgrid1').innerHTML = "";
                                $(".fountainTextG").show();
                               },

                               success: function (responsedata) {
                                   $(".fountainTextG").hide();
                                   document.getElementById('subgrid1').innerHTML = "";
                                   $("#subgrid1").kendoGrid({
                                       dataSource: jQuery.parseJSON(responsedata.d),// new kendo.data.DataSource({data:jsonData}),
                                       toolbar: kendo.template($("#template").html()),
                                       height: 430,
                                       scrollable: {
                                           virtual: true
                                       },
                                       change: onChangeSubGrid,
                                       selectable: "multiple",
                                       sortable: true,
                                       resizable: true,
                                       groupable: true,
                                       reorderable: true,
                                       dataBinding: function () {
                                         record = 0;
                                       },
                                       columns:
                                           [
                                           {
                                               title: " ",
                                               template: "#= ++record #",
                                               width: 75
                                           },

                                                { hidden: true, field: "DONOR_ID" },
                                                { hidden: true, field: "EVENT_ID" },
                                                { hidden: true, field: "FORM_CODE" },
                                                { hidden: true, field: "EXTERNAL_NUMBER" },
                                                { field: "DISEASE_SITE", title: "Disease Site", width: 100 },
                                                { field: "SAMPLE_TYPE", title: "Sample Type", width: 100 },
                                                { field: "SAMPLE_NUMBER", title: "Sample Number", width: 125 },
                                                { field: "COLLECTION_DATE", title: "Collection Date", width: 100, format: "{0:MM/dd/yyyy}" },
                                                { field: "SAMPLE_CATEGORY", title: "Category", width: 100 },
                                                { hidden: true, field: "PATHOLOGY_NO" },
                                                { hidden: true, field: "PROCEDURE_DATE" },
                                                { hidden: true, field: "DIAGNOSIS_DATE" },
                                                { field: "PROCEDURE_TYPE", title: "Procedure Type", width: 115 },
                                                { field: "PRIMARY_SITE", title: "Primary Site", width: 100 },
                                                { field: "HISTOLOGY", title: "Histology", width: 150 },
                                                  { field: "FORM_DETAILS", title: "Details", width: 150 },
                                                    { field: "EXTERNAL_DATA", title: "External Data", width: 150 },
                                                { field: "COMMENTS", title: "Comments", width: 100 }
                                           ]

                                   });
                               
                               },
                               error: function (xhr, ajaxOptions, thrownError) {
                                   alert(xhr.statusText);
                                   alert(thrownError);
                               }
                           });
                }

[Petur Subev]

Hello William,

Basically in your current configuration you are fetching the data with your own $.ajax call and inside of the success callback you are creating the Grid with virtualization of local data. Like shown in this demo:
http://demos.kendoui.com/web/grid/virtualization-local-data.html

Basically to configure your Grid and DataSource to work with Remote virtualization you can follow the Remote Virtualization Demo:

http://demos.kendoui.com/web/grid/virtualization-remote-data.html

Please notice that the read transport can also be declared as a function and you can again perform your own $.ajax request.

Check the third example from this part of the documentation:

http://docs.kendoui.com/api/framework/datasource#configuration-transport.read

Kind Regards,
Petur Subev
Telerik