Search results

Server Actions in Angular In-place Editor component

15 Oct 2021 / 3 minutes to read

By passing In-place Editor component value to the server, the primaryKey property value must require, otherwise action not performed for remote data.

If the URL property value is empty, data passing will handled at local and also the actionSuccess event will trigger with null as argument value.

The following arguments are passed to the server when submit actions perform.

Arguments Explanations
value For processing edited value, like DB value updating.
primaryKey For value mapping to the server, like selecting DB.
name For field mapping to the server, like DB column field mapping.

Find the following sample server codes for defining models and controller functions to configure processing data.

Copied to clipboard
    public class SubmitModel
        {
            public string Name { get; set; }
            public string PrimaryKey { get; set; }
            public string Value { get; set; }
        }
Copied to clipboard
public IEnumerable<SubmitModel> UpdateData([FromBody]SubmitModel value)
        {
         // User can process data
          return value;
        }
  • Server actions successfully done, the actionSuccess event will be fired with returned server data.
  • If the server is not responding, the actionFailure event will be fired with data, but value not updated in the Editor.

In the following sample, the actionSuccess event will trigger once the value submitted successfully into the server. In this sample, both actionSuccess and actionFailure were configured and resulted value will be converted to chips.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
index.css
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent, ActionEventArgs } from '@syncfusion/ej2-angular-inplace-editor';

@Component({
selector: 'app-root',
template: `
<div id='container'>
    <span class="content-title"> Select frameworks: </span>
    <ejs-inplaceeditor #element id="element" data-underline="false" type="MultiSelect" mode="Inline" [value]="value" [model]="model" name="skill" [url]="url" primaryKey="FrameWork" adaptor="UrlAdaptor" (created)="created()" (actionSuccess)="actionSuccess($event)" (actionFailure)="actionFailure($event)"></ejs-inplaceeditor>
</div>
`
})

export class AppComponent {
@ViewChild('element') editObj: InPlaceEditorComponent;
public value: string[] =  ['JavaScript', 'jQuery'];
public url = 'https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData';
public frameWorkList: string[] = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
public model: object = { mode: 'Box', dataSource: this.frameWorkList, placeholder: 'Select skill' };
chipOnCreate() {
    this.editObj.element.querySelector('.e-editable-value').innerHTML = this.chipCreation(this.editObj.value, true);
}
public actionSuccess(e: ActionEventArgs): void {
    e.value = this.chipCreation(e.value.split(','), true);
}
public actionFailure(e: ActionEventArgs): void {
    e.value = this.chipCreation(e.value.split(','), false);
}
public created(): void {
    this.chipOnCreate();
}
chipCreation(data, isSuccess): string {
    let value = '<div class="e-chip-list">';
    [].slice.call(data).forEach((val: string) => {
        value += '<div class="e-chip"> <span class="e-chip-text' + (!isSuccess ? 'e-highlight' : '') + '"> ' + val + '</span></div>';
    });
    value += '</div>';
    return value;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, InPlaceEditorAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 InPlace Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript InPlace Editor Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-root>
        <div id='loader'>LOADING....</div>
    </app-root>
</body>
</html>
Copied to clipboard
#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#element {
    width: 300px;
}

.content-title {
    font-weight: 500;
    margin-right: 20px;
    display: flex;
    align-items: center;
    width: 130px;
}

.e-highlight {
    color: red;
}