datamanager insert not working with dialog template

[Amanuel]

I have a grid control which loads data using data manager and works fine. For adding new record I used DialogTemplate that loads a partial view even this loads fine but the save button is not firing the datamanager insertUrl. ​what is my mistake?

Grid Markup

actionComplete="actionComplete"

actionFailure="actionFailure"

query="new ej.data.Query().addParams('Take', 10, 'Skip', 10)"

toolbar="@(new List() {"Add", "Edit", "Delete", "Update", "Cancel"})"

allowPaging="true" allowSorting="true">

adaptor="UrlAdaptor"

insertUrl="/ User/Insert"

updateUrl="/ User update"

removeUrl="/ User/delete">

pageSize="5">

template="#dialogtemplate"

allowAdding="true"

allowEditing="true"

allowDeleting="true">

    <e-grid-columns>

//columns

    <e-grid-columns>

Controller

public IActionResult AddPartial([FromBody] CRUDModel value)

{

return PartialView("_DialogAddPartial");

}

// this is not firing on save button click in the dialog template

public async Task InsertAsync([FromBody] CRUDModel value)

{

}

[Rajapandi Ravi]

Hi Amanuel,

Greetings from Syncfusion support

We have checked your query and we could see that you are using dialogTemplate feature of Grid with Url Adaptor. Based on your query we have prepared a sample and tried to reproduce your reported problem at our end, but it was unsuccessful. The save button triggers the InsertUrl method and it was working fine at our end. Please refer the below code example and sample for more information.

Index.cshtml

 

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

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

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

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

    <e-grid-pagesettings pageSize="20" pageCount="4" pageSizes="true"></e-grid-pagesettings>

    <e-grid-columns>

        .  .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .  .

    </e-grid-columns>

</ejs-grid>

 

 

<script>

    var title;

    var count;

   

    function toolbarClick(args) {

       // you can perform toolbar action here..

    }

 

    function actionComplete(args) {

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

                let spinner = ej.popups.createSpinner({ target: args.dialog.element });

                ej.popups.showSpinner(args.dialog.element);

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

                    var ajax = new ej.base.Ajax({

                        url: "@Url.Action("EditPartial", "Home")", //render the 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('CustomerID').focus();

                        ej.popups.hideSpinner(args.dialog.element);

                    }).catch(function (xhr) {

                        console.log(xhr);

                        ej.popups.hideSpinner(args.dialog.element);

                    });

                }

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

                    var ajax = new ej.base.Ajax({

                        url: "@Url.Action("AddPartial","Home")", //render the 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('OrderID').focus();

                        ej.popups.hideSpinner(args.dialog.element);

                    }).catch(function (xhr) {

                        console.log(xhr);

                        ej.popups.hideSpinner(args.dialog.element);

                    });

                }

            }

        }

 

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

        }

</script>

 

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

    <div id="dialogTemp">

    </div>

</script>

 

HomeController.cs

 

public IActionResult AddPartial([FromBody] CRUDModel<DialogTemplateModel> value)

        {

            ViewBag.DataSource = order;

            return PartialView("addpartial");

        }

 

public IActionResult Insert([FromBody]CRUDModel<Orders> value)

        {

            order.Insert(0, value.Value);

            return Json(value.Value);

        }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-1543392353.zip

Sample Demo: https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/material

If you still face the issue, Please share any simple issue reproducible sample and or try to reproduce the issue with our above attached sample.

Regards,

Rajapandi R