EJ2 Grid: Not instantiated if loaded via Ajax

[Support Arcania]

Hi,

We have a dialog box:

@Html.EJS().Dialog("mydialog").Visible(false).Render()

On click of a button, an ajax request fetch the content to be displayed on the dialog box and then it is displayed.

Our content is stored in a partial view _DialogContent.cshtml.

Inside we've created a grid:

@Html.EJS().Grid("OurGrid")

// etc.

.Render()

And at the bottom of the page we've added

@Html.EJS().ScriptManager()

Our problem is that when we load the content, the grid is not instantiated.

We've noticed also after debugging that "@Html.EJS().ScriptManager()" generates an empty script "<script></script>".

Is there something we've missed to do?

Thanks

[Rajapandi Ravi]

Hi Arcania, 

Greetings from syncfusion support 

Based on your requirement we suspect that you want to load the Grid inside the dialog in partial view using ajax. We have prepared a sample based on your requirement and in this we use the ContentTemplate to render the Grid inside the Dialog.  

Please find the below code snippet and sample for your reference. 

@{ 

    ViewBag.Title = "Home Page"; 

} 

 

@using Syncfusion.EJ2; 

@using Syncfusion.Licensing; 

 

 

<h2>Grid in Dialog</h2> 

<button onclick="btnClick()">Render Grid</button> 

<div id="target" style="min-height: 400px;" class="col-lg-12 control-section"> 

    @Html.EJS().Dialog("default_dialog").Header("Grid").Visible(false).Target("#target").ContentTemplate(@<div id="dialogTemp"> 

    </div>).Render() 

</div> 

 

<script> 

   function btnClick() { 

         var ajax = new ej.base.Ajax({ 

                        url: "@Url.Action("_PartialGrid")", //render the partial view 

                        type: "POST", 

                        contentType: "application/json" 

                    }); 

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

                        $("#dialogTemp").html(data); 

                        var dialogObj = document.getElementById("default_dialog").ej2_instances[0]; 

                        dialogObj.show(); 

                    }).catch(function (xhr) { 

                        console.log(xhr); 

                    }); 

 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/152177/ze/1521771532910708.zip 

Regards, 

Rajapandi R

[Support Arcania]

Hi,

Yes it works now.

It was the "ContentTemplate" part that was missing in our code.

Thanks for your help

[Rajapandi Ravi]

Hi Arcania, 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance 

Regards 

Rajapandi R