How to render Grid in partial view in ASP.NET MVC Grid

[Sanabil]

dynamically call partial view but Syncfusion component not shown..

check attach screenshot....

working only _layout and views but not working on partial view

Attachment: Capture_df292b51.zip

[Hariharan J V]

Hi Sanabil, 

Thanks for contacting Syncfusion support. 

Based on your requirement we have prepared a sample, in which we have placed the Syncfusion EJ2 Grid as Partial view and loaded that Grid during an ajax call when a button is clicked. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication71038309458 

 

Please refer the code example below, 

[Index.cshtml] 

 

<div id="main"> 

    @Html.EJS().Button("primarybtn").Content("Show the Grid in Partial View").IsPrimary(true).Render() 

</div> 

<div id="GridJ2" /> 

 

<script type="text/javascript"> 

    document.getElementById("primarybtn").addEventListener("click", function () { 

        var ajax = new ej.base.Ajax("/Home/ProductpartialEJ2/", 'POST', true); 

        ajax.send().then((data) => { 

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

        }); 

    }); 

</script> 

 

[_GridFeaturesJ2.cshtml]        //Grid as partial view  

 

<div> 

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

            .Columns(col => 

            { 

                ... 

            }).AllowPaging().PageSettings(p => p.PageSize(10)).Render() 

 

    @Html.EJS().ScriptManager()  

</div> 

[HomeController.cs] 

        public ActionResult ProductpartialEJ2() 

        { 

            var DataSource = OrderRepository.GetAllRecords().ToList(); 

            ViewData["datasource"] = DataSource; 

            return PartialView("_GridFeaturesJ2", ViewData); 

        } 

Please get back to us if you need further assistance. 

Regards, 

Hariharan