1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How can i use a grid loaded in a partial view correctly

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

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

3 Replies
BS Balaji Sekar Syncfusion Team February 21, 2020 12:48 PM UTC

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> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


RU Rodrigo Uzcanga February 22, 2020 03:11 AM UTC

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

BS Balaji Sekar Syncfusion Team February 24, 2020 04:44 PM UTC

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); 
                    }); 
                } 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon