Overflow of ejGrid inside ejDialog with footer enabled.

Question

I want to show some data in ejGrid. That grid must be inside a ejDialog box. the problem is when the grid gets populated with data there are some entries which are overlapped by the footer as in pictures attached. Please help.

$("#agencyquestionlist").ejDialog({

width: 1130,

maxHeight:550,

minWidth: 312,

minHeight: 150,

allowScrolling: true,

close: $scope.agencyquestionclose,

actionButtons: ["close"],

enableModal: true,

showOnInit: false,

enableResize: true,

showFooter: true,

footerTemplateId: "sample",

enableAnimation: true

}); // the dialog box inside which i want to show the Grid data.

$("#AgencyReviewQuestions").ejGrid({

dataSource: agencyquestionsdata,

allowSorting: false,

allowTextWrap: true,

columns: [

{ template: "#jobquestionTemplate",width:150 },

{ template: "#editingTemplate", textAlign: "center",width:30 }

],

}); //grid which i want to show inside the agencyquestionlist dialog box.

</div>

</script> // footer area which I'm showing in the ejDialog.

Attachment: Captures_12d6d606.rar

Arun Palaniyandi · Answer

Hi Shalini Raj, 
 
Thanks for contacting Syncfusion Products. 
 
We have checked your shared code snippets and tried to replicate your mentioned issue. After checking, found that the Grid is overlapped by the Dialog footer by the scroller in the Dialog. If this is your mentioned issue means we can simply resolve this issue by setting any fixed height to your Grid. After the new data gets loaded to the Grid the scroller will be rendered automatically for the Grid instead of the Dialog. Hence, in this case, the Grid is not overlapped by the Dialog footer and we also suggest you use this solution. 
 
 




 
  $("#AgencyReviewQuestions").ejGrid({ 
                 dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(6)), 
                 height: 400, // set a fixed height 
                 allowSorting: false,            
                 allowTextWrap: true,        
                 columns: [ 
                { template: "#jobquestionTemplate",width:150 }, 
                { template: "#editingTemplate", textAlign: "center",width:30 }       
                                               
 
                ] 
            }); 
 
 
 
We have also prepared a sample below for your reference. 
 
Demo sample : http://jsplayground.syncfusion.com/ovkglgv0 
 
 
Please check the above shared details, sample and let us know if you need any assistance. 
 
  
Regards,  
Arun P.

Shalini · Answer

I tried doing the same btu it doesnt works. The grid freezes up with the first 7 data and doesn't scrolls at all.
I'm using as below:

$("#AgencyReviewQuestions").ejGrid({

dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(6)),

height: 400, // set a fixed height

allowSorting: false,

allowTextWrap: true,

columns: [

{ template: "#jobquestionTemplate",width:150 },

{ template: "#editingTemplate", textAlign: "center",width:30 }

]

});

setTimeout(function(){

var obj = $("#AgencyReviewQuestions").ejGrid("instance");

obj.setModel({ dataSource: ej.DataManager(agencyquestionsdata).executeLocal(ej.Query().take(35)),}).setModel({ dataSource: ej.DataManager(agencyquestionsdata).executeLocal(ej.Query().take(35)),})

}, 3000);

agencyquestionsdata is coming from angularjs controller.

Shalini · Answer

I tried to do the same in angularjs.The Grid does allow scroll but only once. then it freezes us again.doesnt scroll (although the data is there) : code is as shown below :

$scope.reviewQspartial = function () {

jobquestionsdata = jobquestions.data;

$("#agencyquestionlist").ejDialog({

width: 1130,

maxHeight:600,

minWidth: 312,

close: $scope.agencyquestionclose,

enableModal: true,

showOnInit: false,

enableResize: true,

showFooter: true,

footerTemplateId: "sample",

enableAnimation: true

});

$("#AgencyReviewQuestions").ejGrid({

dataSource: ej.DataManager(jobquestionsdata).executeLocal(ej.Query().take(6)),

height: 400, // set a fixed height

allowSorting: false,

allowTextWrap: true,

allowScrolling: true,

scrollSettings: { enableColumnScrolling: true },

columns: [

{ template: "#jobquestionTemplate", width: 150 },

{ template: "#editingTemplate", textAlign: "center", width: 30 }

],

});

setTimeout(function () {

var obj = $("#AgencyReviewQuestions").ejGrid("instance");

obj.setModel({ dataSource: ej.DataManager(agencyquestionsdata).executeLocal(ej.Query().take(35)), }).setModel({ dataSource: ej.DataManager(agencyquestionsdata).executeLocal(ej.Query().take(35)), })

}, 1000);

$("#ReviewQuestions").ejGrid("dataSource", jobquestionsdata);

}).catch(function (data) {

console.log("get all job review questions error");

});

}

Please help.

Arun Palaniyandi · Answer

Hi Shalini,  
 
Sorry for the inconvenience caused.  
 
To avoid the mentioned issue we suggest you to set the scrollSettings height as 100% for Grid. Please refer the below code example.  





  
$(function () {  
           $("#AgencyReviewQuestions").ejGrid({  
                 dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(6)),  
                 allowSorting: false,             
                 allowTextWrap: true,   
                 allowScrolling:true,  
                 scrollSettings:{height:"100%"},  
                 columns: [  
                { template: "#jobquestionTemplate",width:150 },  
                { template: "#editingTemplate", textAlign: "center",width:30 }        
                                                
  
                ]  
            });  
  
            });  

Please refer the below documentation for details of scrolling properties of Grid.  
 
https://help.syncfusion.com/api/js/ejgrid#members:allowscrolling  
 
https://help.syncfusion.com/api/js/ejgrid#members:scrollsettings  
 
We have prepared an online sample which can be referred from the below link.  
 
Sample: http://jsplayground.syncfusion.com/1ij2jlxy  
 
Regards,  
Arun P.

Shalini · Answer

Nope. I had already tried the same but in vain. The grid Still shows 2-3 less entries and those entries get overlapped by footer. I'm using syncfusion version : 15.3.0.33.

Thavasianand Sankaranarayanan · Answer

Hi Shalini, 

As per your previous updated we found that you want to render the Grid inside the ejDialog without any over lapping on the Grid data. So, we suggest you to enable the isResponsive and set minWidth property to ejGrid control to avoid the reported issue from your end. 

The MinWidth property is used to set the minimum width of the responsive grid. If the grid is less than the minWidth then the scrollbar will be displayed to maintain the minimum width.  

Refer the below code example. 






$("#AgencyReviewQuestions").ejGrid({ 
                 dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(6)), 
                 allowSorting: false,            
                 allowTextWrap: true,  
                 isResponsive: true, 
                 minWidth: 900, 
                 allowScrolling:true, 
                 scrollSettings:{height:"100%"}, 
                 columns: [ 
                { template: "#jobquestionTemplate",width:150 }, 
                { template: "#editingTemplate", textAlign: "center",width:30 }       
                                               
 
                ] 
            }); 


We have prepared a simple JsPlayground sample in the following link. 

JsPlayground link:  http://jsplayground.syncfusion.com/2ux2bugt 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:isresponsive 

Link: https://help.syncfusion.com/api/js/ejgrid#members:minwidth 

Regards, 
Thavasianand S.

Shalini · Answer

Still not working. The workaround which I'm using is to use like this :

in html page. This does creates more space but it works when large number of entries are present.

Sathyanarayanamoorthy Eswararao · Answer

Hi Shalini, 

Please confirm the following details before we proceed with your query. 


Do you need to show space after the Grid in the Dialog?
Please provide a screenshot or video demo of your requirement.
Please provide more details about your requirement.

Regards, 
Sathyanarayanamoorthy

Shalini · Answer

Do you need to show space after the Grid in the Dialog? No
Please provide a screenshot or video demo of your requirement. PFA
Please provide more details about your requirement.

My requirement is very simple. Just show the data in the Grid. The grid should be inside a dialogbox. The PROBLEM is that the grid overflows( some of the data of the Grid gets hidden when I use footer of dialog).

Attachment: Captures_61ef77ca.rar

Thavasianand Sankaranarayanan · Answer

Hi Shalini, 

As we unable to reproduce the mentioned issue with the given information. So, we request you to setup a web meeting to look into it and provide the resolution. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
 
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards, 
Thavasianand S.

Ankit Mahajan · Answer

Is there a solution for this one? I am facing a similar issue.Thanks,Ankit

Vignesh Natarajan · Answer

Hi Ankit, 
 
Thanks for using Syncfusion products. 
 
Query: “Is there a solution for this one? I am facing a similar issue.” 
 
From your query, we suspect that you are facing issue when Grid is rendered inside the ejDialog, But we are not able to reproduce the issue at our end. Refer to the sample Link. 
- 
http://jsplayground.syncfusion.com/2ux2bugt 
 
We need some more additional detail to find the cause of the issue. Please share us the following details. 
 

Grid rendering code.
Clearly demonstrate your issue with video demonstration.
If possible replicate the issue in the above sample and revert us back.
Share your essential studio version.
 
The provided information will be helpful to provide you response as early as possible. 
 
Regards, 
Vignesh Natarajan.