Loading Tab Content from Partial Views in EJ2

[Abaid-ur-Rehman Zulfi]

Hi,

I am trying to upload content in tabs from partial views in EJ2. I did found an example here but it works for EJ1 & gives error "Operator '.' cannot be applied to operand of type 'void'" in EJ2. Can you please rectify following syntax for EJ2.

@*//===================EJ2 Code giving error=============================================*@

 @{Html.EJS().Tab("Tab5").Items(data =>

                        {

                            data.Add().ID("Profile").Text("Profile").ContentTemplate(@

);

                data.Add().ID("Fee").Text("Fee").ContentTemplate(@

);

                data.Add().ID("Sibling").Text("Sibling").ContentTemplate(@

);

                data.Add().ID("History").Text("History").ContentTemplate(@

);

                data.Add().ID("Transport").Text("Transport").ContentTemplate(@

);

                data.Add().ID("Grid").Text("Grid Content").ContentTemplate(@

);

                }).ClientSideEvents(e => e.Create("create")).ClientSideEvents(e => e.ItemActive("onClientActive")).Render();}

@*//===================EJ1 Code=============================================*@

@{Html.EJ().Tab("Tab1").Items(data =>

{

data.Add().ID("rome").Text("Static Content").ContentTemplate(@<div>Rome is one of the world's most fascinating cities. The old adage that Rome was not built in a day — and that you won't see it in one or even in three — is true. For the intrepid traveler who can keep pace, here is a list of must-sees. But remember what the Romans say: "Even a lifetime isn't enough to see Rome."div>);

data.Add().ID("Dynamic1").Text("Dynamic Content");

data.Add().ID("ASP").Text("Url Content ").Url("../Content/sample content/gridcontent.html");

data.Add().ID("tabitem1").Text("Load on demand").ContentTemplate(@<div>div>);

data.Add().ID("Grid").Text("Content from Partial View").ContentTemplate(@<div>

div>);

}).ClientSideEvents(e => e.Create("oncreate")).ClientSideEvents(e => e.ItemActive("onClientActive")).Render();}

<br/>

<script>

varflag;

functiononClientActive(e) {

if(e.model.selectedItemIndex == 3 && ej.isNullOrUndefined(flag)) {

$.ajax({

url:'/Tab/_Chart',

type:'POST'

}).done(function(result) {

$("#tabitem1").html(result);

})

flag =true;

}

}

functiononcreate(e) {

$.ajax({

url:'/Tab/_Grid',

type:'POST'

}).done(function(result) {

$("#Grid").html(result);

})

varurl ="/Tab/tabcontent";

$.get(url,null,function(data) {

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

});

}

script>

[Hareesh Balasubramanian]

Hi Abaid-ur-Rehman Zulfi, 

Greetings from Syncfusio Support. 

Based on your requirement, we have prepared a sample and it can be downloaded from the following link, 

https://www.syncfusion.com/downloads/support/forum/150157/ze/sample1793268362 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Hareesh 

[Abaid-ur-Rehman Zulfi]

Thank you for the sample code, it is pretty neat & meets what I needed.

[Vinitha Devi Murugan]

Hi Abaid-ur-Rehman, 

 

Thanks for your update. 

 

We are happy to hear that our solution has fulfilled your requirement.  

 

Regards, 

M.Vinitha devi