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.
|
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> |
