GO TO SPECIFIC PAGE USING VIRTUALSCROLLING WITH URL ADAPTOR AND DATAMANAGER

[César Ventura]

Hola! 

Tengo un Grid con un URL Adaptor y datamanager para mostrar los datos, estoy usando virtualscrolling de esta manera:

@(Html.EJ().Grid<PRODUCTS>("FlatGrid")

.ScrollSettings(scroll => { scroll.Height("auto").Width("auto").FrozenRows(0).AllowVirtualScrolling(true).VirtualScrollMode(VirtualScrollMode.Continuous); })

....

)

y quiero poder navegar entre las páginas aunque estén de manera virtualizada, es decir, que pueda colocar a que página quiero acceder e inmediatamente me dirija ahí,

ya que solamente bajando con el scroll se puede acceder solo a la siguiente página.

de antemano muchas gracias.

saludos!!!

[Mani Sankar Durai]

Hi Cesar, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/127908/ze/Sample118577548002377 

In this sample we have navigated to the corresponding page which is given in the textbox using gotoPage grid method on button click event. 

Please refer the below code example. 

[Index.cshtml] 

<input id="textbox" type="text" name="value" /> 

<button id="next">Click to navigate </button> 

 

@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("FlatGrid") 

.Datasource(ds => ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 

             .AllowScrolling() 

             .ScrollSettings(scroll => { scroll.AllowVirtualScrolling().Height(300).Width(400).FrozenRows(0).VirtualScrollMode(VirtualScrollMode.Continuous); }) 

 

             .Columns(col => 

            { 

                ... 

              } 

            

) 

 

<script type="text/javascript"> 

    $("#next").ejButton({ 

        click: function (args) { 

            obj = $("#FlatGrid").ejGrid("instance"); 

            var value = parseInt($("#textbox").val()); 

            obj.gotoPage(value);                      //using gotoPage method we can navigate to any page in grid 

            index = (obj.model.pageSettings.pageSize * obj.model.pageSettings.currentPage + 1); 

            scrollobject = obj.getScrollObject(); 

            if (value == 1) 

                scrollobject.scrollY(0) 

            else 

                scrollobject.scrollY(index,true) 

            

        } 

    }); 

</script> 

Using gotoPage method we have navigate from one page to any other page in grid which is given in button click event of ejButton. 

Also please refer the documentation link. 

Link:  https://help.syncfusion.com/api/js/ejpager#methods:gotopage 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[César Ventura]

Gracias por tu respuesta Mani Sankar Durai!!! 

saludos.

[Mani Sankar Durai]

Hi Cesar, 

Thanks for the update. 

Please get back to us if you need further assistance. 

Regards, 

Manisankar Durai.