Having trouble to render multiple partial views on one page

[cryptos&Dapps Blockchain]

Hi, I am having trouble to render multiple partial views in syncfusion.
Here is my Main View:-

<div class="menu" id="menu">

    <ejs-grid id="Grid" dataSource="@ViewBag.Assets" rowSelected="rowClicked" width="200" height="500">

        <e-grid-columns>

            <e-grid-column field="LocalSymbol" headerText="Asset"> </e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

<div class="row" id="PartialView">

</div>

<script>

    function rowClicked(args) {

        var localSymbol = args.data.LocalSymbol;

        var model = { localSymbol: localSymbol.trim() };

     let ajax = new ej.base.Ajax({

            url: '@Url.Action("Action", "Controller")',

            type: 'POST',

            data: JSON.stringify( model ),

            contentType: "application/json",

        });

            ajax.send().then();

            ajax.onSuccess = function (data) {

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

                fragment.innerHTML = data;

                ej.base.append([fragment], document.getElementById('PartialView'),true);

            }

    }

</script>

Here is the partial view:-

<div class="main">

    <ejs-grid id="Grid" dataSource="@ViewBag.LatestPatternResult" allowGrouping="true" width="600" height="500">

        <e-grid-columns>

            <e-grid-column field="PatternName"> </e-grid-column>

            <e-grid-column field="TimeFrame"> </e-grid-column>

            <e-grid-column field="PC1" format="N2"> </e-grid-column>

            <e-grid-column field="Calc1" format="N2"> </e-grid-column>

            <e-grid-column field="Calc2" format="N2"> </e-grid-column>

            <e-grid-column field="PatternTypeName" headerText="Folder Name"> </e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

<ejs-scripts></ejs-scripts>

Here is my controller method:-

public IActionResult Index()

        {

            var assets = _assetRepository.GetSubScribedAssets().OrderBy(a => a.LocalSymbol).ToList();

            ViewBag.Assets = assets;

              return View();

        }

        public IActionResult GridPattern([FromBody] PatternResultAjaxModel model)

        {

            var latestPatternResult = _coRelationRepository.GetLatestPatternResult(model.localSymbol);

            latestPatternResult = latestPatternResult.OrderByDescending(x => x.PC1).ToList();

            ViewBag.LatestPatternResult = latestPatternResult;

            return PartialView();

        }

 

[Thiyagu Subramani]

Hi Cryptos, 

Thanks for contacting Syncfusion support. 

Based on your shared information we have created a sample using partial view and have not faced any issue from our end. Please refer to the below code and sample link for more reference.  Here we have created partial view control using main Grid’s rowSelected event. 

Note: Main and partial page Grid have must have different id or class selector. 

<div class="row" style="margin-top:100px;"> 

       <ejs-grid id="Grid" allowPaging="true" rowSelected="rowClicked" allowSorting="true"  dataSource="ViewBag.DataSource" allowFiltering="true"  toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

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

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

                <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

                <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

                <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

<div class="row"> 

    <div id="PartialView"></div> 

</div> 

<script> 

    function rowClicked(args) { 

        debugger; 

        var ajax = new ej.base.Ajax('/PartialPage/index', 'GET', true); 

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

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

            fragment.innerHTML = result; 

            ej.base.append([fragment], document.getElementById('PartialView'),true); 

            

        }); 

    } 

</script> 

 

[PartialPage index] 

<ejs-grid id="PartialGrid" allowPaging="true" dataSource="ViewBag.DataSource"> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<ejs-scripts></ejs-scripts> 

Sample link:  https://www.syncfusion.com/downloads/support/forum/166648/ze/ej2-mvc-partialview-master412587614 

Partial view Grid created after rowSelected in main view Grid. 

 

We have already explained in below KB link. Please refer it. 

KB : https://www.syncfusion.com/kb/9630/how-to-render-syncfusion-components-in-partial-view 

Please get back to us with more information, if you need any further assistance. 

Regards, 

Thiyagu S