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

Enabling details row causes shift in edit fields through button

I created a grid with a details row and add/edit/delete capabilities. When you select a row and click the edit button (it does not happen if you dblclick) the row is not shifted correctly to the right one extra column because of the details dropdown. Below is the code 

<script id="contNotesRow" type="text/x-jsrender">
<button class="btn btn-flat btn-default btn-xs notesEdit right" data-id="{{:contact_id}}">Edit Notes</button>
<div id="contnotes_row">{{:contact_notes}}</div>
var contgrid = $("#gridschcont").ejGrid({
            dataSource: contdata,
            detailsTemplate : "#contNotesRow",
isResponsive: true,
enableResponsiveRow: true,
columns: [
                { field: "contact_id", allowEditing:false, isIdentity:true, isPrimaryKey: true, textAlign: ej.TextAlign.Center, headerText: "ID", width:70 },
                { field: "contact_name", cssClass:'ww', headerText: 'Full Name', validationRules: { required: true, minlength: 5 } },
                { field: "contact_position", cssClass:'ww', headerText: 'Position', validationRules: { required: false, minlength: 5 } },
                { field: "contact_email",cssClass:'ww', headerText: 'Email', validationRules: { required: false, minlength: 5 } },
                { field: "contact_phone", cssClass:'ww', headerText: 'Phone', validationRules: { required: false, minlength: 10 } },
                { field: "contact_ext", headerText: 'Ext', textAlign: ej.TextAlign.Center , width:70},
                { field: "contact_fax", cssClass:'ww', headerText: 'Fax', validationRules: { required: false, minlength: 10 } }
            contextMenuSettings: { enableContextMenu: false},
    editSettings: {allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog : true},
            toolbarSettings: {
            showToolbar: true, 
            toolbarItems: [

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team June 24, 2016 10:45 AM UTC

Hi David,   
Thank you for contacting Syncfusion support.   
We are unable to reproduce the issue and have created a sample with your code example. Please refer to the below link.   

We have faced the issue “ while editing the detailtemplate row white space occurs in Grid” in version . So, if you are using older version, please upgrade to the new version which can be downloaded from the following link, 
If the issue is not resolved even after upgrading, please provide the following details 
1.     Browser and Essential studio version details.  
2.     Is there any script error thrown in your project? If so, attach a screenshot for your stack trace.     
3.     Share the video or screenshot to show the issue.    
4.     Issue reproducible sample or sample hosted link or replicate the issue in the attached sample 


Jayaprakash K. 

DB David Barrett June 24, 2016 03:49 PM UTC

Thanks for looking into it. 

I found what was doing it after your answer. I had one thing that I forgot to put in the code I sent, this line seems to do it

recordClick: function(args){$("#Grid").ejGrid("expandCollapse",$(args.row[0].firstChild));}

with this line I was using it to open and close the details row by click on the parent row. But with this command in there it does something to shift it when you use the button. 
I added this line to your example and it started doing what I was seeing. 

Not sure if im doing something weird with that line, thought I was just expand/collapsing the child row. So I took this out and my grid seems to work fine now

MS Mani Sankar Durai Syncfusion Team June 27, 2016 12:07 PM UTC

Hi David, 
We have logged the requirement as an issue and 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.  
Manisankar Durai. 

Live Chat Icon For mobile
Up arrow icon