We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Loading Tab Content from Partial Views in EJ2

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>

3 Replies

HB Hareesh Balasubramanian Syncfusion Team December 24, 2019 06:28 PM UTC

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, 

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

Regards, 
Hareesh 



AZ Abaid-ur-Rehman Zulfi December 26, 2019 09:12 AM UTC

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


VD Vinitha Devi Murugan Syncfusion Team December 30, 2019 06:38 AM UTC

Hi Abaid-ur-Rehman, 
 
Thanks for your update. 
 
We are happy to hear that our solution has fulfilled your requirement.  
 
Regards, 
M.Vinitha devi 
 
 


Loader.
Live Chat Icon For mobile
Up arrow icon