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

[Ezz Abuzaid]

Hello,
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]

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: 

Html 

<ejs-inplaceeditor [url]='url' adaptor="UrlAdaptor" name='User' primaryKey="1" (actionBegin)="onBegin($event)"></ejs-inplaceeditor> 

 

TS: 

    onBegin(args: ActionBeginEventArgs) { 

        args.data.value = 'Andrew - Employee'; 

    }   

 

Demo sample https://stackblitz.com/edit/angular-mzuzzo-rpa22h?file=app.component.ts 

 

 

Regards,  

Narayanasamy P.  

[Ezz Abuzaid]

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]

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 

https://stackblitz.com/edit/angular-mzuzzo-pcr2m8?file=app.component.ts 

 

Note: primaryKey mandatory to invoke service call to it removed on actionBegin service never invoked 

 

Regards, 

Pandiyaraj M 

[Ezz Abuzaid]

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]

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.  

[app.component.html]  

 

<ejs-grid #grid [dataSource]='data' allowPaging='true' showColumnChooser='true'(dataBound)='ondatabound($event)' [toolbar]="toolbar" [pageSettings]='pageSettings'>  

    <e-columns>  

        <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>  

    </e-columns>  

</ejs-grid>  

 

----------------------------------------------------------------------------------------------------  

[app.component.ts]  

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.  

 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound  

 

Regards,  

Narayanasamy P.  

[Ezz Abuzaid]

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]

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,  

Demo sample: https://stackblitz.com/edit/angular-kypaki-4sc4qh  

 

Regards, 

Narayanasamy P.