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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Enabling details row causes shift in edit fields through button

Thread ID:

Created:

Updated:

Platform:

Replies:

124700 Jun 23,2016 09:41 AM UTC Jun 27,2016 12:07 PM UTC JavaScript 3
loading
Tags: ejGrid
David Barrett
Asked On June 23, 2016 09:41 AM UTC



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 [Syncfusion]
Replied On 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 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, 
 
 
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
Replied On 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

Mani Sankar Durai [Syncfusion]
Replied On 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.  
 
 
Regards, 
Manisankar Durai. 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;