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.
<nav>
<ul>
<li><strong>Home</strong></li>
<li><a rel='nofollow' href="about.html">About Us</a></li>
<li><a rel='nofollow' href="clients.html">Our Clients</a></li>
<li><a rel='nofollow' href="products.html">Our Products</a></li>
<li><a rel='nofollow' href="services.html">Our Services</a></li>
<li><a rel='nofollow' href="contact.html">Contact Us</a></li>
</ul>
</nav>|
<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>
var flag;
function onClientActive(e) {
if (e.model.selectedItemIndex == 3 && ej.isNullOrUndefined(flag)) {
$.ajax({
url: '/Tab/_Chart',
type: 'POST'
}).done(function (result) {
$("#tabitem1").html(result);
})
flag = true;
}
}
function oncreate(e) {
$.ajax({
url: '/Tab/_Grid',
type: 'POST'
}).done(function (result) {
$("#Grid").html(result);
})
var url = "/Tab/tabcontent";
$.get(url, null, function (data) {
$("#Dynamic1").html(data);
});
}
</script>
</code> |
None of the exemple tabs solves my problem. This one is closest:
data.Add().ID("ASP").Text("Url Content ").Url("../Content/sample content/gridcontent.html");
Problem is, that instead of simple link to specified page (../Content/sample content/gridcontent.html), it loads content of that page into DIV element of that tab.
If I use this solution, then after clicking on few tabs, their referenced pages (in .Url(xxx)) are loaded in document body all together and it causes javascript conflicts. Did you tried to create complex user interface this way? Try to put 10 tabs with inline editable grids on each tab and various other UI elements (I have diagram on one of the tabs). It is not working well.
|
<code>
<div style="width: 500px">
@{Html.EJ().Tab("Tab1").Width("600px").Items(data =>
{
data.Add().ID("tab1").Text("Url").Url("../Grid/GridFeatures");
}).Render();}</div>
<br />
<div>
@{Html.EJ().Tab("Tab2").Width("600px").Items(data =>
{
data.Add().ID("tab2").Text("Url2").Url("../Home/Index");
}).Render();}
</div>
<div>
@{Html.EJ().Tab("Tab3").Width("600px").Items(data =>
{
data.Add().ID("tab3").Text("Grid2").Url("../Home/Contact");
}).Render();}
</div>
<br />
<div>
@{Html.EJ().Tab("Tab4").Width("600px").Items(data =>
{
data.Add().ID("tab4").Text("Diagram2").Url("../Home/About");
}).Render();}
</div>
</code> |
|
@(Html.EJ().Grid<object>("FlatGrid1")
.AllowScrolling()
.AllowPaging() /*Paging Enabled*/
.SelectionType(SelectionType.Single)
.EditSettings(edit=>{edit.AllowAdding().AllowDeleting().AllowEditing(); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}").Add();
}))
|
|
<code>
@(Html.EJ().Diagram("DiagramContent",ViewData["diagramModel"]asSyncfusion.JavaScript.DataVisualization.Models.DiagramProperties))
</code> |
Hi,
I'm trying to do the "load on demand' solution. But withs some grid in my tab.
here's my code :
Html.EJ().Tab("tabs").Items(data =>
{
DateTime dateJour = ViewBag.premierJour;
data.Add().ID(dateJour.ToString().Substring(0, 10).Replace("/", "")).Text("Lundi " + dateJour.ToString().Substring(0, 10)).ContentTemplate(
@<div></div>
);
}
).ClientSideEvents(e => e.ItemActive("onSubClientActive")).Render();
My Ajax/javascript :
<script type="text/javascript">
var d0;
Date.prototype.addDays = function (days) {
var dat = new Date(this.valueOf());
dat.setDate(dat.getDate() + days);
return dat;
}
function onSubClientActive(e) {
var firstDateVB = '@(ViewBag.premierJour)';
var firstDate = new Date();
firstDate.setDate(firstDateVB.substr(0, 2));
firstDate.setMonth(firstDateVB.substr(3, 2)-1);
firstDate.setFullYear(firstDateVB.substr(6, 4));
var date = new Date();
if (e.model.selectedItemIndex == 0 && ej.isNullOrUndefined(d0)) {
var sendDate = '' + firstDate.getDate() + (firstDate.getMonth() + 1) + firstDate.getFullYear();
$.ajax({
url: '/AnalyseChargeQuotidien/_jours/' + sendDate,
type: 'POST'
}).done(function (result) {
$("#" + sendDate).html(result);
})
d0 = true;
}
}
and _jours' view :
@{
for (int i = 0; i < ViewBag.nombreMP; i++)
{
string name = "DataGrid" + i.ToString();
string datasource = "datasource" + i.ToString();
<div>
@datasource
@(Html.EJ().Grid<object>(name).Datasource((IEnumerable<Object>)ViewData[datasource.ToString()])
.AllowSorting()
.IsResponsive()
.Locale("fr-FR")
.EnableHeaderHover()
.Columns(col =>
{
col.Field("PK_Code_Charge").HeaderText("PK_Code_Charge").IsPrimaryKey(true).TextAlign(TextAlign.Left).Width(40).Visible(false).Add();
})
.ClientSideEvents(eve => { eve.QueryCellInfo("CellJourFormat").RecordDoubleClick("FocusAtelierJour"); });
)
</div>
<br />
}
}
And, i got a problem... I can view my "@datasource" bellow the <div> and it work great in my 'for'... but i can't see my grid...
If you can help =)
Hi Prince,
Thank you for your reply, it work great !
Have a good day. Regards
Clément.
