Search results

Getting Started

This section briefly explains about how to include a simple In-place Editor in your ASP.NET MVC application. You can refer ASP.NET MVC Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Add the In-place Editor with Textbox

By default, the Essential JS 2 TextBox control is rendered in In-place Editor with the type property sets as Text.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.InPlaceEditor;

@section ControlsSection{
    <div class="control-section">
         @Html.EJS().InPlaceEditor("element").Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).Value("Andrew").Model(ViewBag.modalData).Render()
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class InPlaceEditorController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            ViewBag.modalData = new { placeholder = "Enter employee name" };
            ViewBag.value = "Andrew";
            return View();
        }
    }
}

Configuring DropDownList

You can render the Essential JS 2 DropDownList by changing the type property as DropDownList and configure its properties and methods using the model property.

In the following sample, type and model values are configured to render the DropDownList control.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.InPlaceEditor;

@section ControlsSection{
    <div class="control-section">
         @Html.EJS().InPlaceEditor("element").Type(Syncfusion.EJ2.InPlaceEditor.InputType.DropDownList).Mode(RenderMode.Inline).Model(ViewBag.modalData).Render()
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class InPlaceEditorController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            string[] genderData = new string[] { "Male", "Female" };
            ViewBag.modalData = new { placeholder= "Select gender", dataSource= genderData };
            return View();
        }
    }
}

Integrate DatePicker

You can render the Essential JS2 DatePicker by changing the type property as Date and also configure its properties and methods using the model property.

In the following sample, type and model values are configured to render the DatePicker control.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.InPlaceEditor;

@section ControlsSection{
    <div class="control-section">
         @Html.EJS().InPlaceEditor("element").Type(Syncfusion.EJ2.InPlaceEditor.InputType.Date).Value(ViewBag.dateValue).Model(ViewBag.modalData).Render()
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class InPlaceEditorController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            ViewBag.dateValue = new DateTime(2018, 12, 04);
            ViewBag.modalData = new { showTodayButton = true };
            return View();
        }
    }
}

Run the application

  • Now open your view page to render the In-place Editor component.
razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.InPlaceEditor;

@section ControlsSection{
<div class="col-lg-12 control-section inplace-control-section default_layout">
    <div class="control_wrapper">
        <div id='container'>
            <div class="control-group">
                <div class="e-heading">
                    <h3> Modify Basic Details </h3>
                </div>
                <table>
                    <tr>
                        <td>Name</td>
                        <td class='left'>
                            @Html.EJS().InPlaceEditor("element").Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).Value("Andrew").Model(ViewBag.elementModel).Mode(RenderMode.Inline).Render()
                        </td>
                    </tr>
                    <tr>
                        <td>Date of Birth</td>
                        <td class='left'>
                            @Html.EJS().InPlaceEditor("dateofbirth").Type(Syncfusion.EJ2.InPlaceEditor.InputType.Date).Value(ViewBag.dateValue).Model(ViewBag.dateModel).Mode(RenderMode.Inline).Render()
                        </td>
                    </tr>
                    <tr>
                        <td>Gender</td>
                        <td class='left'>
                            @Html.EJS().InPlaceEditor("gender").Type(Syncfusion.EJ2.InPlaceEditor.InputType.DropDownList).Value("Male").Model(ViewBag.genderModel).Mode(RenderMode.Inline).Render()
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    </div>
}
<style>
#container .control-group {
    margin-top: 50px;
}

#container .control-group table {
    margin:auto;
}

#container .control-group table td {
    height: 70px;
    width:  150px;
}

#container .e-heading {
    text-align: center;
}

#container .control-group table td {
    text-align: left;
}  
  
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class InPlaceEditorController : Controller
    {
        // GET: //
        public IActionResult Data()
        {
            ViewBag.elementModel = new { placeholder = "Enter your name" };
            ViewBag.dateValue = new DateTime(2018, 12, 04);
            ViewBag.dateModel = new { showTodayButton= true, placeholder = "Select date of birth" };
            string[] genderData = new string[] { "Male", "Female" };
            ViewBag.genderModel = new { placeholder = "Select gender", dataSource= genderData };
            ViewBag.elementValue = "Andrew";
            ViewBag.dropValue = "Male";
            return View();
        }
    }
}

The output will be as follows.

Getting started form

Submitting data to the server (save)

You can submit editor value to the server by configuring the url, adaptor and primaryKey property.

Property Usage
url Gets the URL for server submit action.
adaptor Specifies the adaptor type that is used by DataManager to communicate with DataSource.
primaryKey Defines the unique primary key of editable field which can be used for saving data in the data-base.

The primaryKey property is mandatory. If it’s not set, edited data are not sent to the server.

Refresh with modified value

The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.InPlaceEditor;

@section ControlsSection{
    <div class="col-lg-12 control-section inplace-control-section default_layout">
     <div class="control_wrapper">
            <div id='container'>
                <div className='control-group' style="text-align: center; width: 50%; margin: 100px auto;">
                 Best Employee of the year:
                    @Html.EJS().InPlaceEditor("element").Type(Syncfusion.EJ2.InPlaceEditor.InputType.DropDownList).Value("Andrew Fuller").Model(ViewBag.elementModel).Mode(RenderMode.Inline).Name("Employee").Url(ViewBag.url).PrimaryKey("Employee").Adaptor(AdaptorType.UrlAdaptor).ActionSuccess("actionSuccess").Render()
                </div>
                <table style='margin:auto;width:50%'>
                    <tr>
                        <td style="text-align: left">
                            Old Value :
                        </td>
                        <td id="oldValue" style="text-align: left"></td>
                    </tr>
                    <tr>
                        <td style="text-align: left">
                            New Value :
                        </td>
                        <td id="newValue" style="text-align: left">
                            Andrew Fuller
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        </div>
}
<style>
.e-inplaceeditor {
    min-width: 200px;
    text-align: left
}
#container .control-group {
    text-align: center;
    margin: 100px auto;
}
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>

@section PreScripts {
    <script>
        function actionSuccess(e) {
            var newEle = document.getElementById('newValue');
            var oldEle = document.getElementById('oldValue');
            oldEle.textContent = newEle.textContent;
            newEle.textContent = e.value;
        }
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class InPlaceEditorController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            string[] frameWorkList = new string[] { "Andrew Fuller", "Janet Leverling", "Laura Callahan", "Margaret Hamilt", "Michael Suyama", "Nancy Davloio", "Robert King" };
            ViewBag.elementModel = new { dataSource = frameWorkList, placeholder = "Select employee", popupHeight= "200px" };
            ViewBag.url = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";
            ViewBag.textValue = "Andrew Fuller";
            return View();
        }
    }
}

The output will be as follows.

Getting started