Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
142843 | Feb 21,2019 04:15 PM UTC | Feb 25,2019 12:21 PM UTC | ASP.NET MVC - EJ 2 | 1 |
![]() |
Tags: Tab |
Tab items can be disabled dynamically by passing the index and boolean value to the enableTab method.. You can design wizard like sample with Tab using the in-built API and customizing the content with proper validations.
ej2.syncfusion.com |
@Html.EJS().Tab("MainTab").Created("tabCreated").Selected("tabSelected").Render()
<script>
var loaded = false;
function tabCreated(e) { // created event to create the Tab items and data for first tab
var tabObj = document.getElementById("MainTab").ej2_instances[0];
var ajax = new ej.base.Ajax('@Url.Action("PartialView1", "Home")', 'GET', true);
ajax.send().then();
ajax.onSuccess = function (data) {
tabObj.addTab([{ header: { 'text': 'Grid1' }, "content": "<div id='GridOrder1'></div>" }],0);
tabObj.addTab([{ header: { 'text': 'Grid2' }, "content": "<div id='GridOrder2'></div>" }],1);
$("#GridOrder1").html(data);
}
}
function tabSelected(e) { // selected event to load data dynamically based on the selection of the tab item
if(e.selectedIndex != 0 && !loaded){
var tabObj = document.getElementById("MainTab").ej2_instances[0];
var ajax = new ej.base.Ajax('@Url.Action("PartialView2", "Home")', 'GET', true);
ajax.send().then();
ajax.onSuccess = function (data) {
$("#GridOrder2").html(data);
loaded = true;
}
}
}
</script> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.