We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dialog Template Not Work In Net Core 3.0

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();