How can I insert a datagrid in the partial view model inside the Dialog component?

[Roberto]

Hi,

I have a datagrid and I want to click on the command action and call a partial view that has the content of a grid.

This grid is using viewbag as datasource.

I saw this example but it is not working with asp core net.

https://www.syncfusion.com/forums/144279/grid-inside-dialog

 function commandClicklanoAcao(args) {

        if (args.commandColumn.type === "mesimpactado") {

            var ajax = new ej.base.Ajax({

            url: "@Url.Action("MesImpacto","PlanoAcao")" + "?registroid=" + args.rowData.id, //render the Grid partial view

                type: "Get",

            });

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

                var dialog = document.getElementById("dialogMesImpacto").ej2_instances[0]

                dialog.content = data;

                dialog.show();

            }).catch(function (xhr) {

            // console.log(xhr);

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

            });   }    }

my partial view

@using Syncfusion.EJ2

<div class="col-12 col-sm-12 col-md-12 col-xl-12">

    <div id="target2" class="e-card main-grid">

        <ejs-grid id="GridPlanoAcaoMesImpacto"

                  allowTextWrap="true"

                  locale="pt"

                  enablePersistence="false"

                  showColumnChooser="false"

                  allowSorting="true"

                  allowFiltering=true

                  dataSource="ViewBag.listDates"

                  allowResizing=true

                  allowGrouping=false

                  allowReordering="true"

                  height="100%"

                  allowExcelExport="true"

                  allowPaging="true">

            <e-grid-groupsettings captionTemplate="#captiontemplate"></e-grid-groupsettings>

            <e-grid-pagesettings PageSize="100" pageSizes="@(new string[] { "100", "300","1000","2000" , "10000" })">

            </e-grid-pagesettings>

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

            <e-grid-editSettings allowAdding="false"

                                 allowDeleting="false"

                                 allowEditing="false"

                                 showDeleteConfirmDialog="true"

                                 mode="Normal">

            </e-grid-editSettings>

            <e-grid-columns>

                <e-grid-column field="data"

                               headerText="Mês"

                               width="100"

                               visible="true"

                               allowSorting="true"

                               format="MM/yyyy"

                               textAlign="Center">

                </e-grid-column>

                <e-grid-column field="impacto"

                               allowGrouping="false"

                               headerText="Impactou"

                               editType="booleanedit"

                               type="boolean"

                               displayAsCheckBox="true"

                               visible="true"

                               textAlign="Center">

                </e-grid-column>

            </e-grid-columns>

        </ejs-grid>

    </div>

</div>

<ejs-scripts></ejs-scripts>

[Hemanthkumar S]

Hi Roberto,

Greetings from Syncfusion support.

Query: How can I insert a datagrid in the partial view model inside the Dialog component?

Based on the information you provided, it appears that you want to display the Grid component as a partial view inside the Dialog component. After reviewing your code example, we noticed that you have not added the script generated by the partial view of the Grid component to the document head. To resolve this, we recommend adding the Grid component partial view script to the document head before including the partial view of the Grid component in the Dialog content. This will ensure that the necessary scripts are loaded correctly for the partial view Grid component.

For more information, please refer to the below code example, video, and sample.

[Views\Home\Index.cshtml]

 

    function commandClick(args) {

        var ajax = new ej.base.Ajax({

            url: "/Home/gridpartial",

            type: "GET",

        });

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

            if (document.getElementById("dlgContent")) {

                document.getElementById("dlgContent").remove();

            }

            var ele = document.createElement('div');

            ele.setAttribute("id", "dlgContent");

            ele.setAttribute("class", "dialogContent");

            document.body.appendChild(ele);

            appendElement(data, document.getElementById("dlgContent")); // Add the partial script

            dialog.content = document.getElementById("dlgContent");

            dialog.show();

        }).catch(function (xhr) {

            console.log(xhr);

        });

    }

 

    function appendElement(elementString, holder) {

        holder.innerHTML = elementString;

        if (document.head.querySelector('#scriptpartial')) {

            document.head.querySelector('#scriptpartial').remove();

        }

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

        script.id = "scriptpartial"

        script.type = "text/javascript";

        var serverScript = holder.querySelector('script');

        script.textContent = serverScript.innerHTML;

        document.head.appendChild(script);

        serverScript.remove();

    }

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

Attachment: Sample_and_video_366b07ac.zip

[Roberto]

HI,

I tried to test it but I had invalid key when I added this code

  var dialog = new ej.popups.Dialog({

        content: "Dummy Content",

        showCloseIcon: true,

        target: document.getElementById("GridPlanoAcao"),

    });

    dialog.appendTo('#dialog');

    dialog.hide();

I tried to add all platform and get a new key but I had the same error.

[Rajapandi Ravi]

Roberto,

Based on the details you provided, customer is using both Syncfusion Core and JavaScript components in his ASP.NET Core application. If he is using both, he must register the license at the end of the <head> section in _Layout.cshtml (for JavaScript) as shown below:

_Layout.cshtml

<head>

…

<script>

// Registering Syncfusion license key

ej.base.registerLicense('LicenseKey');

</script>

</head>

Please find the following link for reference: https://ej2.syncfusion.com/aspnetcore/documentation/licensing/licensing-troubleshoot#registering-license-key-for-syncfusion-javascript-components-used-in-aspnet-core-app

If the reported issue is still not resolved, please refer to the following knowledge base article for more information on removing the license warning message:

https://www.syncfusion.com/kb/12756/how-to-resolve-syncfusion-license-popup-message-or-trial-message-warning

Note: To avoid registering a license for JavaScript, we suggest using our ASP.NET Core control instead of the JavaScript control, as registering a license for JS exposes it.