Search results

Add custom indication to unsaved value

You can add custom indication to unsaved input value by using the actionSuccess event, when data not submitted to the server.

In this sample, the actionSuccess event configured and the URL property not included. Then submit button clicked, the current editor value saved into input and data sending to server action prevented due to the URL property not configured.

But actionSuccess event will trigger the handler function with null argument values. In handler function data property primaryKey value checked, whether it empty or not. If it is empty custom class, added in the e-value-wrapper element to customize its styles.

To send input value to local, set the URL property as empty.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
index.css
import { Component } from '@angular/core';
import { InPlaceEditorComponent, ActionEventArgs } from '@syncfusion/ej2-angular-inplace-editor';
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    template: `
    <div id='container'>
        <span class="content-title"> Enter your name: </span>
        <ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" [model]="model" (actionSuccess)="actionSuccess($event)"></ejs-inplaceeditor>
    </div>
    `
})

export class AppComponent {
    public model: object = { placeholder: 'Enter some text' };
    public actionSuccess(e: ActionEventArgs): void {
        let pk: string = e.data['PrimaryKey'];
        if (isNOU(pk) || pk === '') {
            document.querySelector('.e-editable-value').classList.add('e-send-error');
        }
    }
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!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.6.25/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>
#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: 150px;
}

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

.e-inplaceeditor .e-editable-value-wrapper .e-editable-value.e-send-error { /* csslint allow: adjoining-classes */
    color: red;
}