We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Problems with scroll

Problems with scroll

Hello,

I have a problem with the scroll in Grid.
I have a Chart and when I click in a column, I must show the Grid with data I read from a webservice.

I have this code for the Grid:
<div id="Grid1"></div>

$(function () {
$("#Grid1").ejGrid({
locale: "es-ES",
allowPaging: false,
isResponsive: true,
scrollSettings: { width: 1150, height: 380, enableColumnScrolling: true, enableRowScrolling: true },
allowScrolling: true,
enableTouch: false,
allowReordering: true,
allowSorting: true,
allowFiltering: true,
showColumnChooser: true,
filterSettings: {
filterType: "excel"
},
allowGrouping: true,
groupSettings: { groupedColumns: ["empresa"] },
columns: [
{ field: "empresa", headerText: "Empresa", width: 275, textAlign: ej.TextAlign.Left },
{ field: "provincia", headerText: "Provincia", width: 75, textAlign: ej.TextAlign.Left, tooltip: "#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip },
{ field: "municipio", headerText: "Municipio", width: 120, textAlign: ej.TextAlign.Left, tooltip: "#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip },
{ field: "delegacion", headerText: "Delegación", width: 180, textAlign: ej.TextAlign.Left, tooltip: "#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip },
{ field: "zona", headerText: "Zona", width: 70, textAlign: ej.TextAlign.Left }
]
}

});

For the Chart:

function onclick(sender) {

SeriesIndex = sender.data.region.SeriesIndex;
PointIndex = sender.data.region.Region.PointIndex;

leerDatosModal();

$('#myModal').modal('show');

}


function leerDatosModal() {

var data = { numstatus: PointIndex, numestadops: SeriesIndex };

$.ajax({
type: 'POST',
url: 'WebService.asmx/ListadoGridModal',
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {

$("#Grid1").ejGrid({
dataSource: result.d
});

$("#Grid1").ejGrid({
allowPaging: false,
isResponsive: true,
scrollSettings: { width: 1150, height: 380, enableColumnScrolling: true, enableRowScrolling: true },
allowScrolling: true,
allowGrouping: true,
groupSettings: { groupedColumns: ["empresa"] } I had to repeat the grouping so that it shows the second time.
});
}
});

}

The problem is that the second time I show the grid, the scrooll does not appear. I do not know what the error is.

Thanks.














2 Replies
JK Jayaprakash Kamaraj Syncfusion Team January 4, 2017 02:18 PM UTC

Hi Juan, 
 
Thank you for contacting Syncfusion support. 
 
We have created a sample with your code example but we were unable to reproduce the issue at our end. Please refer to the below link. 
 
 
In Grid, we don’t have enableColumnScrolling and enableRowScrolling properties in scrollSettings. So, we suggest you to remove enableColumnScrolling and enableRowScrolling properties in scrollSettings of Grid and also use dataSource method to bind dataSource with grid in Ajax success. This method used to refresh the grid with new data source. Please refer to the below code example and help documentation . 

 
    $.ajax({ 
  
        type: "POST", 
        url: "GridFeatures.aspx/ListadoGridModal", 
        datatype: "json", 
        contentType: "application/json", 
        success: function (result) { 
              $("#Grid1").ejGrid("dataSource", result.d.result); 
        } 
}); 

In Grid, we have default support for responsive behavior. If responsive is enabled, then the grid will be rendered based on parent’s width and height. We need to set IsResponsive and MinWidth Property to enable responsive in Grid. MinWidth is used to maintain minimum width for the Grid and if the grid width is less than minWidth then the scrollbar will be displayed. Height responsive will work when you set height as “100%” in scrollSettings. Please refer to the below API reference documentation.

http://help.syncfusion.com/js/api/ejgrid#members:isresponsive

http://help.syncfusion.com/js/api/ejgrid#members:minwidth 
 
$("#Grid1").ejGrid({ 
                locale: "es-ES", 
                allowPaging: false, 
                isResponsive: true, 
                minWidth : 400, 
                scrollSettings: { width: 1150, height: "100%" }, 
                allowScrolling: true, 
.. 
                allowGrouping: true, 
                groupSettings: { groupedColumns: ["CustomerID"] }, 
                columns: [ 
                { field: "OrderID", headerText: "Empresa", width: 275, textAlign: ej.TextAlign.Left }, 
.. 
                ] 
             
 
            }); 
 
If you still facing the problem. please share the following information to serve you better    
 
1.     Issue replication procedure.   
2.     Share the video to show the issue.   
3.     Please open the console window in browser and check whether any script error throws. 
4.     Is there any script error or exception thrown in your project? If so, attach the screenshot of your stack trace.    
5.     The scenario in which you are facing the issue. Please explain the clear replication procedure or scenario.     
6.     An issue reproducing sample if possible or hosted link or replicate the issue in the attached sample.   
 
Regards, 
 
Jayaprakash K. 


JK Jayaprakash Kamaraj Syncfusion Team January 4, 2017 02:21 PM UTC

Hi Juan, 
 
Thank you for contacting Syncfusion support. 
 
We have created a sample with your code example but we were unable to reproduce the issue at our end. Please refer to the below link. 
 
 
In Grid, we don’t have enableColumnScrolling and enableRowScrolling properties in scrollSettings. So, we suggest you to remove enableColumnScrolling and enableRowScrolling properties in scrollSettings of Grid and also use dataSource method to bind dataSource with grid in Ajax success. This method used to refresh the grid with new data source. Please refer to the below code example and help documentation . 

 
    $.ajax({ 
 
        type: "POST", 
        url: "GridFeatures.aspx/ListadoGridModal", 
        datatype: "json", 
        contentType: "application/json", 
        success: function (result) { 
              $("#Grid1").ejGrid("dataSource", result.d.result); 
        } 
}); 

In Grid, we have default support for responsive behavior. If responsive is enabled, then the grid will be rendered based on parent’s width and height. We need to set IsResponsive and MinWidth Property to enable responsive in Grid. MinWidth is used to maintain minimum width for the Grid and if the grid width is less than minWidth then the scrollbar will be displayed. Height responsive will work when you set height as “100%” in scrollSettings. Please refer to the below API reference documentation.

http://help.syncfusion.com/js/api/ejgrid#members:isresponsive

http://help.syncfusion.com/js/api/ejgrid#members:minwidth 
 
$("#Grid1").ejGrid({ 
                locale: "es-ES", 
                allowPaging: false, 
                isResponsive: true, 
                minWidth : 400, 
                scrollSettings: { width: 1150, height: "100%" }, 
                allowScrolling: true, 
.. 
                allowGrouping: true, 
                groupSettings: { groupedColumns: ["CustomerID"] }, 
                columns: [ 
                { field: "OrderID", headerText: "Empresa", width: 275, textAlign: ej.TextAlign.Left }, 
.. 
                ] 
             
 
            }); 
 
If you still facing the problem. please share the following information to serve you better    
 
1.     Issue replication procedure.   
2.     Share the video to show the issue.   
3.     Essential studio and browser version details. 
4.     Please open the console window in browser and check whether any script error throws. 
5.     Is there any script error or exception thrown in your project? If so, attach the screenshot of your stack trace.    
6.     The scenario in which you are facing the issue. Please explain the clear replication procedure or scenario.     
7.     An issue reproducing sample if possible or hosted link or replicate the issue in the attached sample.   
 
Regards, 
 
Jayaprakash K. 


Loader.
Up arrow icon