How can i use a grid loaded in a partial view correctly

[Rodrigo Uzcanga]

How can i use a grid loaded in a partial view correctly, if also i am using a grid in a index page? I am using ej2

[Balaji Sekar]

Hi Rodrigo, 

 

Greetings from Syncfusion Support. 

 

We have validated your query and achieved your requirement of “How can i use a grid loaded in a partial view correctly”. We have prepared a sample of your requirement. In the sample, we have rendered a button and on the button click we have loaded the Grid. Initially hidden attribute is added to Grid1 div and removed on the button click. Please refer to the code sample and sample link for more information. 

 

<ejs-button id="element" content="Button"></ejs-button> 

<div id="Grid1" hidden> 

<ejs-grid  dataSource="@ViewBag.DataSource" 

                             <e-grid-columns> 

            <e-grid-column field="OrderID" isPrimaryKey="true" width="100"> </e-grid-column> 

              ……………………                    

                             </e-grid-columns> 

    </ejs-grid> 

</div> 

<script> 

    document.getElementById('element').onclick = function () { 

        document.getElementById('Grid1').removeAttribute("hidden"); 

        var ajax = new ej.base.Ajax({ 

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

                        type: "POST", 

                        contentType: "application/json", 

                    }); 

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

                        console.log('hello') 

                    }).catch(function (xhr) { 

                        console.log(xhr); 

                    }); 

    }; 

</script> 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151771/ze/Grid_partial-2066834290.zip 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[Rodrigo Uzcanga]

What about if i need to use an other grid in the addpartial view? 

[Balaji Sekar]

Hi Rodrigo, 

 

Thanks for your update. 

 

We have validated your query and prepared a sample. In the sample we have displayed a Grid in the addpartial view. Please refer to the sample code and sample link for more information. 

 

[addpartial.cshtml] 

<div > 

    <ejs-grid id="Grid2" gridLines="Both"> 

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

        <e-grid-columns> 

            <e-grid-column field="OrderID" isPrimaryKey="true" width="100"> </e-grid-column> 

            <e-grid-column field="ShipCountry" width="100"> </e-grid-column> 

            <e-grid-column field="ShipCity" width="200"></e-grid-column> 

            <e-grid-column field="Name" width="200"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

[Homecontroller.cs] 

public IActionResult AddPartial() 

        {  

            return PartialView("addpartial"); 

        } 

[index.cshtml] 

if (args.requestType === 'add' && !title) { 

                    var ajax = new ej.base.Ajax({ 

                        url: "@Url.Action("AddPartial","Home")", //render the Grid partial view 

                        type: "POST", 

                        contentType: "application/json", 

                        data: JSON.stringify({ value: args.rowData }) 

                    }); 

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

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

                        appendElement(data, args.form);  

                    }).catch(function (xhr) { 

                        console.log(xhr); 

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

                    }); 

                } 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151771/ze/Addpartial1255331583.zip 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar.