In-Place update column value

[Suchita salunkhe]

Hi, 

I have below Grid.

EditMode is Batch. But, I have to save information on textbox change event (in-place, once key comes out of textbox).

Please, let me know how to achieve this.

<ejs-grid id="GradesGrid" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" allowTextWrap="true" gridLines="Horizontal" childGrid="SubjectsGrid" allowPaging="true" load="LoadGrades" rowDataBound="RowGradeDataBound" enableHover="true" rowHeight="23" allowFiltering="true" allowSorting="true" queryCellInfo="GetToolTip">

            <e-data-manager url="/Courses/GetGrades" adaptor="UrlAdaptor" batchUrl="@Url.Action("BulkGradesUpdate", "Courses")"></e-data-manager>

            <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" showConfirmDialog="true" showDeleteConfirmDialog="true" mode="@EditMode.Batch"></e-grid-editSettings>

            <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

            <e-grid-pagesettings pageCount="10" pageSize="20"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="CourseID" type="string" visible="false"></e-grid-column>

                <e-grid-column field="GradeID" isIdentity="true" type="string" isPrimaryKey="true" visible="false"></e-grid-column>

                <e-grid-column field="GradeName" headertext="Grade Name" type="string" validationRules="new { required=true }" textAlign="Left" allowEditing="true" width="140"></e-grid-column>

                <e-grid-column field="SectionName" headertext="Section Name" type="string" validationRules="new { required=true }" textAlign="Left" allowEditing="true" width="120"></e-grid-column>

                <e-grid-column field="NoOfWorkingDays" headertext="No. of Working Days" type="string" validationRules="new { required=true }" textAlign="Left" allowEditing="true" allowFiltering="false" width="140"></e-grid-column>

                <e-grid-column field="NoOfAvailablePeriods" headertext="No. of Available Periods" type="string" validationRules="new { required=true }" textAlign="Left" allowEditing="true" allowFiltering="false" width="150"></e-grid-column>

                <e-grid-column field="LessonPlanCount" headertext="No. of Lesson Plan" type="string" validationRules="new { required=true }" textAlign="Left" allowEditing="false" allowFiltering="false" width="125"></e-grid-column>

                <e-grid-column field="NoOfUtilizedPeriods" headertext="No. of Utilized Periods" type="string" validationRules="new { required=true }" textAlign="Left" allowEditing="false" allowFiltering="false" width="250"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

public async Task<IActionResult> BulkGradesUpdate([Microsoft.AspNetCore.Mvc.FromBody] CRUDModel<GradeModel> model) 

        {

            var courseId = "0";

            if (model.Added != null && model.Added.Count > 0)

            {

                await _gradeRepository.BulkInsert(model.Added, SchoolBranchId);

                courseId = model.Added.FirstOrDefault().CourseID;

            }

            if (model.Changed != null && model.Changed.Count > 0)

            {

                await _gradeRepository.BulkUpdate(model.Changed);

                courseId = model.Changed.FirstOrDefault().CourseID;

            }

            if (model.Deleted != null && model.Deleted.Count > 0)

            {

                await _gradeRepository.BulkDelete(model.Deleted);

                courseId = model.Deleted.FirstOrDefault().CourseID;

            }

            IEnumerable DataSource = await _gradeRepository.GetGradesBySchoolBranchId(SchoolBranchId);

            return Json(DataSource);

        }

        

[Rajapandiyan Settu]

Hi Suchita , 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement and the provided code and suggested to you use the cell-edit-Template feature. The cell-edit-Template feature is used to render the custom component while editing. Please find the code example and sample for your reference. 

 

 

   <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="OrderID" isPrimaryKey="true" width="110"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="CustomerID" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" textAlign="Right" width="120"></e-grid-column> 

. . . 

        </e-grid-columns> 

 

    </ejs-grid> 

 

 

<script> 

    var elem; 

    var dObj; 

 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

 

    function write(args) { 

        dObj = new ej.inputs.TextBox({ 

           

          change: function (args) { 

              debugger; 

          } 

 

        }); 

        dObj.appendTo(elem); 

    } 

 

    function destroy() { 

        dObj.destroy(); 

    } 

 

    function read(args) { 

        return dObj.value; 

    } 

</script> 

 

 

In the above code example, we have created a textbox component for ‘CustomerID’ column and bind the change event for this.  

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/filter_core-290228388.zip  

 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S