1. Home
  2. Forum
  3. jQuery
  4. Overflow of ejGrid inside ejDialog with footer enabled.

Overflow of ejGrid inside ejDialog with footer enabled.

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.


<script id="sample" type="text/x-jsrender">
        <div class="col-lg-12">
            <input type="button" class="btn btn-darkgray" value="Close" onclick="agencyquestionclose()" />
        </div>
    </script> // footer area which I'm showing in the ejDialog.





Attachment: Captures_12d6d606.rar

12 Replies
AP Arun Palaniyandi Syncfusion Team June 5, 2018 12:50 PM UTC

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. 
 
 
 
Please check the above shared details, sample and let us know if you need any assistance. 
 
  
Regards,  
Arun P.  


SH Shalini June 6, 2018 07:22 AM UTC

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.

SH Shalini June 6, 2018 12:45 PM UTC

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.

AP Arun Palaniyandi Syncfusion Team June 7, 2018 01:26 PM UTC

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.  
 
 
 
We have prepared an online sample which can be referred from the below link.  
 
 
Regards,  
Arun P. 



SH Shalini June 8, 2018 09:47 AM UTC

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.

TS Thavasianand Sankaranarayanan Syncfusion Team June 11, 2018 11:16 AM UTC

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. 


Refer the help documentation. 



Regards, 
Thavasianand S. 


SH Shalini June 18, 2018 11:46 AM UTC

Still not working. The workaround which I'm using is to use like this :
 <div id="AgencyReviewQuestions"></div>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br /> 
in html page. This does creates more space but it works when large number of entries are present.

SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 19, 2018 02:21 PM UTC

Hi Shalini, 

Please confirm the following details before we proceed with your query. 

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

Regards, 
Sathyanarayanamoorthy 


SH Shalini June 22, 2018 11:11 AM UTC

  1. Do you need to show space after the Grid in the Dialog? No
  2. Please provide a screenshot or video demo of your requirement. PFA
  3. 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

TS Thavasianand Sankaranarayanan Syncfusion Team June 26, 2018 11:36 AM UTC

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.  
 

Regards, 
Thavasianand S. 


AM Ankit Mahajan March 25, 2019 04:08 PM UTC

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

Thanks,
Ankit

VN Vignesh Natarajan Syncfusion Team March 26, 2019 06:47 AM UTC

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. 
- 
 
We need some more additional detail to find the cause of the issue. Please share us the following details. 
 
  1. Grid rendering code.
  2. Clearly demonstrate your issue with video demonstration.
  3. If possible replicate the issue in the above sample and revert us back.
  4. Share your essential studio version.
 
The provided information will be helpful to provide you response as early as possible. 
 
Regards, 
Vignesh Natarajan. 
 


Loader.
Up arrow icon