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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Problems with scroll

Thread ID:

Created:

Updated:

Platform:

Replies:

128114 Jan 3,2017 11:32 AM UTC Jan 4,2017 02:21 PM UTC JavaScript 2
loading
Tags: ejGrid
Juan
Asked On January 3, 2017 11:32 AM UTC

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.














Jayaprakash Kamaraj [Syncfusion]
Replied On 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. 


Jayaprakash Kamaraj [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;