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

There's no way to associate formcontrol with ejs-inplaceeditor

Thread ID:





147374 Sep 8,2019 08:30 AM UTC Sep 24,2019 06:13 PM UTC Angular - EJ 2 7
Tags: InPlaceEditor
Ezz Abuzaid
Asked On September 8, 2019 08:49 AM UTC

I tried a lot all the ways!
from the source code, you can see that the form accessor is connected to the component ejs-inplaceeditor 

Another thing is how I can modify the request body that sends to the server?

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 9, 2019 12:47 PM UTC

Hi Ezz, 
Greetings from Syncfusion support. 
Query 1: from the source code, you can see that the form accessor is connected to the component ejs-inplaceeditor 
The dependent component in Inplace editor will render in dynamic manner, when enable the editmode. otherwise it not render in DOM. Due to this behavior we cannot use as form control and form element which are not accessible. 
Query 2: Another thing is how I can modify the request body that sends to the server? 
you can modify the value that send from inplace editor by following steps 
1.       Bind actionBegin event 
2.       Now change the value in actionBegin event callback 
Sample code: 
<ejs-inplaceeditor [url]='url' adaptor="UrlAdaptor" name='User' primaryKey="1" (actionBegin)="onBegin($event)"></ejs-inplaceeditor> 
    onBegin(args: ActionBeginEventArgs) { 
        args.data.value = 'Andrew - Employee'; 
Narayanasamy P.  

Ezz Abuzaid
Replied On September 17, 2019 08:07 AM UTC

Thank you,

by the request body, I meant to change the overall object,
the default one has params, primaryKey, ...etc, so I want to alter it to my custom object, I guess it possible, can you please help me with that!

Pandiyaraj Muniyandi [Syncfusion]
Replied On September 17, 2019 06:27 PM UTC

Hi Ezz,  
Thanks for your update. 
Yes, you can change the all event args value such as primaryKey, name and value properties. Also can add additional arguments with this actionBegin event callback as follows 
    onBegin(args: ActionBeginEventArgs) { 
      args.data.name = 'Andrew John'; 
      args.data.value = 'Andrew - Employee'; 
      args.data.primaryKey = 5; 
      args.data['custom'] = 'Syncfusion Custom Data'; 
We have prepared sample for your reference, check this below link 
Note: primaryKey mandatory to invoke service call to it removed on actionBegin service never invoked 
Pandiyaraj M 

Ezz Abuzaid
Replied On September 18, 2019 01:18 PM UTC

Okay, I'll try it,

another thing how to add another button to column chooser dialog in the grid column choose, I want to add save button for example, if this not possible, how to listen to column chooser dialog close event? it's not possible!!

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 19, 2019 04:02 PM UTC

Hi Ezz,   
Thanks for your update. 
We have validated your requirement, You can achieve requirement through the dataBound event of Grid. In this we can append custom button into the column chooser footer section.  
Refer the below code example.  
<ejs-grid #grid [dataSource]='data' allowPaging='true' showColumnChooser='true'(dataBound)='ondatabound($event)' [toolbar]="toolbar" [pageSettings]='pageSettings'>  
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>  
        <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>  
        <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd"textAlign='Right'></e-column>  
        <e-column field='Freight' headerText='Freight' width='120' format='C2'textAlign='Right'></e-column>  
        <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd"textAlign='Right'></e-column>  
        <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>  
        <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>  
export class AppComponent {  
    public data: Object[];  
    @ViewChild('grid', { static: true })  
    public grid: GridComponent;  
    @ViewChild('custombutton', { static: true })  
    public custombutton: any;  
    public columns: string[] | Column[] | ColumnModel[] = [];  
    public toolbar: string[];  
    ngOnInit(): void {  
        this.data = data;  
        this.toolbar = ['ColumnChooser'];  
    ondatabound(): void {  
        let button = document.createElement('button');  
        button.innerText = "Save";  
        this.grid.element.querySelector('.e-ccdlg .e-footer-content')['append'](button);  
Refer the below screenshot.  
Refer our help documentation.  
Narayanasamy P.  

Ezz Abuzaid
Replied On September 23, 2019 01:44 PM UTC

Very good, thank you.
1_ regarding the component ejs-inplaceeditor 
there's no way to modify the body (request payload), I've tried what you said before, but it doesn't work, the body consists of {prams: {}, value: {}, ...etc}
from the source code, I can see that the actionBegin event

        _this.dataManager.executeQuery(_this.getQuery(actionBeginArgs.data), _this.successHandler.bind(_this), _this.failureHandler.bind(_this));
the get query function loops over the data and bind it in params object which produce a conflict 2_ how I can remove the default sorting functionality from the ejs-grid component, I want to sort the columns remotely(custom algorithm from the server), so if there any way to prevent the default behavior and implement my own by listening to an event related to the column sorting like if there was an onSort event, things gonna be efficient Thank you

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 24, 2019 06:13 PM UTC

Hi Ezz, 
Thanks for your update. 
Query-1: regarding the component ejs-inplaceeditor 
As we have stated earlier you can only change the existing actionBeginEventArgs’s Data object value. Also, you can add/remove additional arguments inside the Data object in the form of key: value pair.

if you form object outside of the actionBeginEventArgs’s Data object, it will never be invoked automatically. The inplace-editor component will process only Data object which is placed as object of actionBeginEventArgs alone. 
Query-2: how I can remove the default sorting functionality from the ejs-grid component, I want to sort the columns remotely 
Yes, you can cancel the default sorting functionality in grid by using the cancel argument of the actionBegin event if the action being performed is sorting. This is demonstrated in the below sample code,  
 Code example: 
 // Grid’s actionBegin event function  
   public OnActionBegin(args: SortEventArgs) { 
        // Check if the sort operation is being performed  
        if (args.requestType === "sorting") { 
            // Cancel the operation  
            args.cancel = true; 
We have prepared a simple sample for your reference. Please find it from the below link,  
Narayanasamy P. 


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

This page will automatically be redirected to the 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

Live Chat Icon For mobile
Live Chat Icon