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

Ezz Abuzaid

Asked On September 8, 2019 08:49 AM UTC

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?

Reply | Reply with quote

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: 

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.

Reply | Reply with quote

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!

Reply | Reply with quote

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

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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

Reply | Reply with quote

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,

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

Regards,

Narayanasamy P.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147374	Sep 8,2019 08:30 AM UTC	Sep 24,2019 06:13 PM UTC	Angular - EJ 2	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US