Enabling details row causes shift in edit fields through button

[David Barrett]

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>

</script>

var contgrid = $("#gridschcont").ejGrid({

            dataSource: contdata,

            detailsTemplate : "#contNotesRow",

allowPaging:true,

allowSorting:true,

allowTextWrap:true,

isResponsive: true,

enableResponsiveRow: true,

enableAltRow:true,

enableHeaderHover:true,

enableRowHover: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: [

            ej.Grid.ToolBarItems.Add, 

            ej.Grid.ToolBarItems.Edit, 

            ej.Grid.ToolBarItems.Delete, 

            ej.Grid.ToolBarItems.Update, 

            ej.Grid.ToolBarItems.Cancel

            ] 

            }

        });

[Jayaprakash Kamaraj]

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.   

http://jsplayground.syncfusion.com/j4pwg5zx 

We have faced the issue “ while editing the detailtemplate row white space occurs in Grid” in version 13.4.0.58 . So, if you are using older version, please upgrade to the new version which can be downloaded from the following link, 

 

Link: https://www.syncfusion.com/forums/124709/essential-studio-2016-volume-2-release-v14-2-0-26-is-available-for-download 

 

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 

Regards, 

Jayaprakash K. 

[David Barrett]

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

[Mani Sankar Durai]

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.  

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

 

 

Regards, 

Manisankar Durai.