How to set pagination and horizontal scroll on a table and set tooltip to a cell.

[Daniel Pujante]

Hi,

I'm interested on setting the horizontal scroll and pagination.

I have a table with 'allowPaging : true' set and want to set horizontal scroll as well. Unfortunalety, when I do it, I see both scrolls, horizontal and vertical. Pagination doesn't work with vertical scroll, so I would like to Know how to match pagination an horizontal scroll (without vertical scroll).

And taking advantage, could you guide me how to set  a tooltip to a column's cells  showing the content which is always a text?

Thank you very much,

Regards,

Daniel Pujante

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer,  

 

Thanks for contacting Syncfusion Support. 

 

We could see you are using the Command Column and checkbox selection in the Grid and facing some functionality problems in it. We have prepared a sample based on your response that can be downloaded from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/178708/ze/sqlbinding1137702387.zip 

 

This sample enabled with a checkbox selection and Command Column feature. We are unable to reproduce any problem with their functionality. So, we suggest to provide the following details to analyze the problem at our end.  

 

1)      Complete code example of the Grid and code behind 

2)      Web.config and master page your application 

3)      Screenshot with replication procedure or video demo of the issue 

4)      If possible, modify the attached sample and reproduce the problem 

5)      Stack trace of browser console 

 

Regards,  

Seeni Sakthi Kumar S 

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer,  

 

Please ignore our previous response.  

 

Query #1: Pagination doesn't work with vertical scroll  

 

We are unable to reproduce any problem at our end. We have rendered a Grid with the Paging as well as Scrolling and able to scroll the Grid. Please share the following details to analyze the problem at our end.  

 

1)      Code example of the Grid 

2)      Screenshot with the replication procedure for the issue 

3)      Stack trace of browser console (if any error) 

4)      If possible, modify the attached sample and share the link 

5)      Name of the browser  

6)      Version of the Essential Studio 

 

Query #2: tooltip to a column's cells 

 

Grid provides a default option to render the tooltip for Grid cells. It can be rendered using the, tooltip property of the Grid columns. Refer to the following code example and API Reference.  

 

    <div id="Grid"></div> 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                    . . .  

                           . . . 

                columns: [ 

                             { field: "OrderID", headerText: "Order ID", tooltip: "{{:value }}" }, 

                             { field: "CustomerID", headerText: "Customer ID", tooltip: "{{:value }}" }, 

                 .. . .  

                         . .  

                ] 

            }); 

        }); 

    </script> 

 

https://help.syncfusion.com/api/js/ejgrid#members:columns-tooltip 

 

Sample: http://jsplayground.syncfusion.com/sxnydsqt 

 

Regards,  

Seeni Sakthi Kumar S. 

[Daniel Pujante]

Acording to "Query #1: Pagination doesn't work with vertical scroll", could you show me a simple example of  a grid with the property 'allowPaging:True' and using just horizontal scroll?, I would be very grateful.

Thank you very much,

Regards,

Daniel Pujante

[Seeni Sakthi Kumar Seeni Raj]

Hi Daniel,  

 

We have already given sample in our previous update. Pease refer to it.  

 

http://jsplayground.syncfusion.com/sxnydsqt 

 

If you are facing any problem, please share the details requested in our previous update.  

 

Regards,  

Seeni Sakthi Kumar S. 

[Daniel Pujante]

Hi,

Mainly, Thank you very much for your attention.

Yes , the example is just what I want, but I need this without vertical scroll.

Regards,

Daniel Pujante

[Seeni Sakthi Kumar Seeni Raj]

Hi Daniel, 

 

We have modified the sample as per requirement. 

 

http://jsplayground.syncfusion.com/1dh34ztq 

 

To remove the vertical scroller from the Grid, you must remove the height of the Grid scrollSettings. Refer to the following code example. 

 

    <div id="Grid"></div> 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                scrollSettings: { width: 886 }, 

                allowScrolling: true, 

                  . . . 

                        . . 

            }); 

        }); 

    </script> 

 

Regards,  

Seeni Sakthi Kumar S.