Dialog Template Not Work In Net Core 3.0

[luis]

I tried the solution from this thread (https://www.syncfusion.com/forums/141281/implement-dialog-template-under-grid-ejs-grid), but it didn't work. When I click on the Add or Edit button in dialog template.

What am I missing? (I'm using ASP.NET Core 3 EJ2, Views and Controllers, Razor pages, Entity Framework and sql server).

Index

<div>

    <h2> CARGOS</h2>

    <h6> DESCRIPCIÓN </h6>

 

    <ejs-grid id="Grid" locale="es" gridLines="Both" actionFailure="actionFailure" dataBound="dataBound" rowSelected="rowSelected" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Search"})" actionComplete="actionComplete">

        <e-data-manager url="/Cargos/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Cargos/Insert" updateUrl="/Cargos/Update" removeUrl="/Cargos/Delete"></e-data-manager>

        <e-grid-searchsettings fields="@(new string[] { "Codigo","Nombre"})"></e-grid-searchsettings>

        <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" showDeleteConfirmDialog="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

        <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="id" isPrimaryKey="true" visible="false"></e-grid-column>

            <e-grid-column field="codigo" headerText="Código" validationRules="@(new { required=true})" width="20"></e-grid-column>

            <e-grid-column field="nombre" headerText="Nombre" validationRules="@(new { required=true})" width="80"></e-grid-column>

            <e-grid-column field="basico" headerText="Básico" validationRules="@(new { required=true})" width="40" textAlign="Right" editType="numericedit" format="N2"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

 

</div>

 

<script id='dialogtemplate' type="text/x-template">

    <div id="dialogTemp">

    </div>

</script>

….

 

function actionComplete(args) {

         if (args.requestType === 'beginEdit' || args.requestType === 'add') {

                if (args.requestType === 'beginEdit') {

                    // Called the partial view elements

                    var ajax = new ej.base.Ajax({

                        url: "@Url.Action("EditPartial", "Cargos")", //render the Edit partial view

                        type: "POST",

                        contentType: "application/json",

                        data: JSON.stringify({ value: args.rowData })

                    });

                    ajax.send().then(function (data) {

                        appendElement(data, args.form); //Render the edit form in newly created template with the selected record

                        args.form.elements.namedItem('Codigo').focus();

                    }).catch(function (xhr) {

                        console.log(xhr);

                    });

                }

                if (args.requestType === 'add') {

                    var ajax = new ej.base.Ajax({

                        url: "@Url.Action("AddPartial","Cargos")", //render the Add partial view

                        type: "POST",

                        contentType: "application/json",

                        data: JSON.stringify({ value: args.rowData })

                    });

                    ajax.send().then(function (data) {

                        appendElement(data, args.form); //Render the edit form with selected record

                        args.form.elements.namedItem('Codigo').focus();

                    }).catch(function (xhr) {

                        console.log(xhr);

                    });

                }

         }

    }

 

 

    function appendElement(elementString, form) {

        form.querySelector("#dialogTemp").innerHTML = elementString;

        var script = document.createElement('script');

        script.type = "text/javascript";

        var serverScript = form.querySelector("#dialogTemp").querySelector('script');

        script.textContent = serverScript.innerHTML;

        document.head.appendChild(script);

        serverScript.remove();

    }

Controller

Controler

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using System.Collections;

using NominaNetCore1.Models;

using Syncfusion.EJ2.Base;

using Microsoft.EntityFrameworkCore;

 

namespace NominaNetCore1.Controllers

{

    public class CargosController : Controller

    {

        private readonly NominaNetCore1Context _context;

        public CargosController(NominaNetCore1Context context)

        {

            _context = context;

        }

        public IActionResult Insert([FromBody]CRUDModel<CargoSet> param)

        {

 

            var obj = _context.CargoSet.Where(o => o.Codigo == param.Value.Codigo).SingleOrDefault();

            if (obj != null) //Check already exisiting

            {

                throw new InvalidOperationException("Código de Cargo ya existe");//Exception thrown if exisiting    

            }

 

            // Usuario Adiciona

            param.Value.Created = DateTime.Now;

 

            _context.Add(param.Value);

            _context.SaveChanges();

 

            return Json(param.Value);

        }

 

        public IActionResult Update([FromBody]CRUDModel<CargoSet> param) // Update record

        {

            CargoSet data = _context.CargoSet.Single(o => o.Id == int.Parse(param.Key.ToString()));

 

            // Usuario Modifica

            param.Value.Modified = DateTime.Now;

 

            _context.Entry(data).CurrentValues.SetValues(param.Value);

            _context.Entry(data).State = EntityState.Modified;

            _context.SaveChanges();

 

            return Json(param.Value);

        }

 

        public IActionResult Delete([FromBody]CRUDModel<CargoSet> param) // Delete record

        {

            CargoSet data = _context.CargoSet.Where(o => o.Id == int.Parse(param.Key.ToString())).FirstOrDefault();

 

            // Usuario Borra

            data.Modified = DateTime.Now;

 

            _context.CargoSet.Remove(data);

            _context.SaveChanges();

            return Json(data);

        }

 

        public IActionResult EditPartial([FromBody] CRUDModel<CargoSet> param)

        {

            return PartialView("_DialogEditPartial", param.Value);

        }

 

        public IActionResult AddPartial([FromBody] CRUDModel<CargoSet> param)

        {

            return PartialView("_DialogAddPartial");

        }

    }

}

What am I missing?

Attachment: Dialog_Template_Not_Work_In_Net_Core_3_d84dfdbb.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis, 

Thanks for contacting us. 

We have checked the code example and screenshots that you have provided. We could see that you have not defined template for primary key column in both edit and add partial views. While editing the it is necessary to include primary key values while editing 

Please find the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#troubleshoot-editing-works-only-for-first-row 

Please share the video demonstration of the issue, and explain the issue you are facing, (like script error or updated data is not reflecting in Grid).  

Please find the below code example and  the below screenshots to ensure the primary key values are passed to server side properly. 

Index 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" visible="false" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

. . . 

</ejs-grid> 

Addpartial 

<div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input asp-for="OrderID" type='text' /> 

                <span class="e-float-line"></span> 

                <label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label> 

            </div> 

        </div> 

         . . . 

   </div> 

</div> 

 

<ejs-scripts></ejs-scripts> 

EditPartial 

<div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input asp-for="OrderID" value=@Model.OrderID.ToString() disabled type='text' /> 

                <span class="e-float-line"></span> 

                <label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label> 

            </div> 

        </div> 

         . . . 

</div> 

 

 

Requests in the network tab While editing: 

 

Adding: 

 

Please ensure the above in your sample, if you still faced the issue, please get back to us for further assistance. 

Regards, 

Seeni Sakthi Kumar S 

[luis]

I tried the solution..

 

@model NominaNetCore1.Models.CargoSet

@using Syncfusion.EJ2

<div>
    <div class="form-row">
        <div class="form-group col-md-12">
            <div class="e-float-input e-control-wrapper">
                <input asp-for="Id" value=@Model.Id.ToString() disabled type='text' />
                <span class="e-float-line"></span>
                <label asp-for="Id" class="e-float-text e-label-top">Id</label>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-12">
            <div class="e-float-input e-control-wrapper">
                <input asp-for="Codigo" value=@Model.Codigo type='text'/>
                <span class="e-float-line"></span>
                <label asp-for="Codigo" class="e-float-text e-label-top">Código</label>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-12">
            <div class="e-float-input e-control-wrapper">
                <input asp-for="Nombre" value=@Model.Nombre type='text'/>
                <span class="e-float-line"></span>
                <label asp-for="Nombre" class="e-float-text e-label-top">Nombre</label>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-12">
            <div class="e-float-input e-control-wrapper">
                <ejs-numerictextbox id="Basico" value=@Model.Basico format="N2" placeholder="Básico" floatLabelType="Always"></ejs-numerictextbox>
            </div>
        </div>
    </div>
</div>

<ejs-scripts></ejs-scripts>

 

 

but it didn't work. When I click on the Add or Edit button in dialog template.

insertUrl="/Cargos/Insert" updateUrl="/Cargos/Update" related to IActionResult Insert and IActionResult Update Can not be executed.

In mode dialog normal It works perfect

What am I missing?, Please help me.

[Pavithra Subramaniyam]

Hi luis, 

 

Thanks for your update. 

 

We have tried to replicate the issue at our end. But it is working fine. We are able to add and update the data. Also we are attaching the sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149632/ze/141281-dialog-template-urladaptor_Sample82178496.zip 

 

It would be helpful to us to validate the issue, if you share the below details, 

 

1. Share the Syncfusion Nuget(Syncfusion.EJ2.AspNet.Core) version and CDN link version

 

2. Share if any console error thrown(Since you are mentioning normal and dialog mode it is working fine and cannot access the Insert,

Update methods in dialog template, you might have some script errors in console) 

 

3. Bind the actionFailure event to Grid and share the stack trace (if any)

 

4. If you have not any errors in console and actionFailure events , try to reproduce the issue in given sample, are share the issue reproducible sample

 

Regards, 

Pavithra S. 

[luis]

 

1.      Share the Syncfusion Nuget(Syncfusion.EJ2.AspNet.Core) version and CDN link version

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>@ViewData["Title"] - NominaNetCore1</title>

    <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="~/css/site.css" />

 

    <!-- Syncfusion Essential JS 2 Styles -->

    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />

 

    <!-- Syncfusion Essential JS 2 Scripts -->

    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

 

</head>

<body>

 

 

 

2. Cannot access the Insert, Update methods controller in mode dialog template. not show any errors in console or actionFailure events.

 

3. Trace with http debugger.. When I click on the Add or Edit button in mode dialog template. No fire the Insert, Update methods of controller.