1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to load PartialView in Accordion

How to load PartialView in Accordion

Hi!
I would like to load a PartialView inside the accordion when clicking the heading of the item. And loading only once, that is, when you click the same header again, the PartialView will already appear loaded.
Is it possible to accomplish this?

Regards!
Junior

3 Replies
BM Balaji M Syncfusion Team August 16, 2018 01:23 PM UTC

Hi Carlos 
 
Thanks for contacting Syncfusion support. 
 
We can load the partial page as the content of the Accordion items by using the Expanding event of the Accordion. In his event we can use the ajax to load the partial page in to current item. Please find the below code snippets. 
 
 
@Html.EJS().Accordion("accordion").ExpandMode(ExpandMode.Single).Items(new List<AccordionAccordionItem>{ 
new AccordionAccordionItem { Header = "Partialview", Expanded = true, Content = "<div id='partialdata1'> </div>"}, 
new AccordionAccordionItem { Header = "Syncfusion Grid in partialview", Expanded = false, Content = "<div id='Grid'> </div>"} 
}).Expanding("onexpanding").Render() 
 
<script> 
 
    function onexpanding(e) { 
 
//give condition to load the partial view only once 
        if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0 && e.element.querySelector('#partialdata1').childElementCount === 0) { 
            obj = document.getElementById('accordion').ej2_instances[0]; 
 
            $.get('@Url.Action("DisplayOpenResults1", "Home" )', function (data) { 
 
                  $("#partialdata1").html(data) 
 
       }); 
 
        } 
        if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1 && e.element.querySelector('#Grid').childElementCount === 0) { 
 
            $.get('@Url.Action("DisplayOpenResults2", "Home" )', function (data) { 
 
                setTimeout(function () { 
 
                eval(data.split("<script>")[1].split("<" + "/script>")[0]) 
 
                }, 1000); 
 
 
       }); 
        } 
    } 
 
</script> 



 

 
Let us know if you have any queries. 
 
Regards, 
M. Balaji 


CJ Carlos Junior August 16, 2018 02:30 PM UTC

Hi Balaji M!

I use Syncfusion Essential Studio 15.4.0.17 libraries in my project.

Regards,
Junior

BM Balaji M Syncfusion Team August 17, 2018 11:32 AM UTC

Hi Carlos 
 
I hope your using Essential JS1 for ASP.NET MVC platform (jQuery based).  So we have modified the sample as per request in 15.4.0.17 version. 
 
We have used the client side BeforeActivate event in to load the partial view on clicking accordion’s header. In the event handler, before making any request we have checked whether the content is empty or not.  

        @{Html.EJ().Accordion("basicAccordion").EnableMultipleOpen(false).ClientSideEvents(e => e.BeforeActivate("onActive")).Items(data => 
               { 
                   data.Add().Text("Essential Chart").ContentTemplate(@<div> 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  
               </div>); 
                   data.Add().Text("Essential Schedule").ContentTemplate(@<div> 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  
                   </div>); 
                   data.Add().Text("Essential Grid").ContentTemplate(@<div id="sample"></div>); 
               }).Render();}        
 </div> 
</div> 
<script type="text/javascript" class="jsScript"> 
    var acrdnObj; 
    function onActive(e) { 
        var proxy = this; 
        if (e.activeIndex == 2 && proxy._contentPanels[e.activeIndex].firstElementChild.textContent == "") { 
            $.ajax({ 
                url: "_PartialContent", 
                type: "POST", 
                success: function (data) { 
                    $(proxy._contentPanels[e.activeIndex].firstElementChild).html(data); 
                } 
            }); 
        } 
    } 
</script> 
 
 
Let us know if you have any queries. 
 
Regards, 
M. Balaji 


Loader.
Up arrow icon