I am very new to Kendo-ui. I have been working on creating a page which will have kendo-ui tabs. Each tab has got atleast one iframe which loads the content from the source (which are java controllers). Here is the trimmed version of my jsp
<div class="demo-section k-content">
<div id="tabstrip">
<ul>
<%} if(helpFlag.equals("true") || helpFlag.equals("1")) {%>
<li>Help</li>
<%} if(materialsFlag.equals("true") || materialsFlag.equals("1")) {%>
<li class="k-state-active">Materials</li>
<%}else{%>
<script type="text/javascript">$(document).ready(function(){$("#tabstrip").kendoTabStrip().data("kendoTabStrip").select(0);});</script>
<%} if(jobsFlag.equals("true") || jobsFlag.equals("1")) {%>
<li>Jobs</li>
<%} if(eProfileFlag.equals("true") || eProfileFlag.equals("1")) {%>
<li>eProfile</li>
<%}%>
</ul>
<%} if(helpFlag.equals("true") || helpFlag.equals("1")) {%>
<div>
<span class=""> </span>
<table style="width: 100%;">
<tr>
<td style="">
<div class="panelbar">
<li class="k-state-active" style="font-weight: bold;">Help
<div class="tabBody">
<iframe src="${pageContext.servletContext.contextPath}/help.do"
width="850px" height="650px"></iframe>
</div>
</li>
</div>
</td>
</tr>
</table>
</div>
<%} if(materialsFlag.equals("true") || materialsFlag.equals("1")) {%>
<div>
<span class=""> </span>
<table style="width: 100%;">
<tr>
<td style="">
<div class="panelbar">
<li class="k-state-active" style="font-weight: bold;">Materials
<div class="panelBody">
<img id="matloader" src="../loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="matFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/materials.do"
width="100%" height="500px"></iframe>
</div>
<script>
$(document).ready(function () {
$('#matFrame').on('load', function () {
$('#matFrame').show();
$('#matloader').hide();
});
});
</script>
</li>
</div>
</td>
<td style="">
<div class="panelbar">
<li class="k-state-active" style="font-weight: bold;">PURCHASING
<div class="panelBody">
<img id="purchasingloader" src="../loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="purchasingFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/purch.do"
width="100%" height="500px"></iframe>
</div>
<script>
$(document).ready(function () {
$('#purchasingFrame').on('load', function () {
$('#purchasingFrame').show();
$('#purchasingloader').hide();
});
});
</script>
</li>
</div>
</td>
</tr>
</table>
</div>
<%} if(jobsFlag.equals("true") || jobsFlag.equals("1")) {%>
<div>
<span class=""> </span>
<div class="jobs">
<div class="panelbar">
<li class="k-state-active" style="font-weight: bold;">Jobs
<div class="panelBody">
<img id="loader1" src="../loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="jobsFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/jobs.do"
width="100%" height="500px"></iframe>
</div>
<script>
$(document).ready(function () {
$('#jobsFrame').on('load', function () {
$('#jobsFrame').show();
$('#loader1').hide();
});
});
</script>
</div>
</div>
</div>
<%} if(eProfileFlag.equals("true") || eProfileFlag.equals("1")) {%>
<div>
<span class=""> </span>
<div class="eProfile">
<div class="panelbar">
<li class="k-state-active" style="font-weight: bold;">eProfile <div class="panelBody">
<img id="eProLoader" src="../loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="eProFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/eProfile.do"
width="100%" height="500px"></iframe>
</div>
<script>
$(document).ready(function () {
$('#eProFrame').on('load', function () {
$('#eProFrame').show();
$('#eProLoader').hide();
});
});
</script>
</li>
</div>
</div>
</div>
<%} %>
</div>
</div>
The tabs are configurable, I am reading a properties file to see which tabs needs to be displayed. So the starting part of the jsp check which tabs needs to be displayed and accordingly I am making a list. Rest of the portion does not have much conditions except if the tab needs to be displayed. Now, what is happening is that all the tabs are loading the iFrame content which makes the spinner shown for quite sometime and page takes more time to get fully loaded. I am trying to load the content selectively i.e the default tab should be loaded first and the rest of the tabs should be loaded only when those are clicked. I looked at the kendo-ui API but I did not find any relevant solution.
I am looking for a solution which can be implemented in JSP using javascript or if there is a need I can call controllers as well.
So, after removing the iframes and using jquery to get the data and display in the div, I realized that one of the div content had links.Clicking these links were causing the content to be displayed in the main window rather than the div. So, I reverted the changes done and made the following changes so that not all iframes load at the same time.
I removed the src attribute from the iframes.I used the onSelect function to set the src on click of a tab.
document.getElementById('myIframe').src = 'Controller_path';
Here is a trimmed version of my code-
$(document).ready(
function() {
$("#tabstrip").kendoTabStrip({
animation : {
open : {
effects : "fadeIn"
}
},
select: onSelect
}).data("kendoTabStrip");
$(".panelbar").kendoPanelBar({
});
function onSelect(e) {
loadDetails($(e.item).text());
}
function loadDetails(tab) {
event.preventDefault();
if(tab.length > 0) {
if(tab == 'Tab1') {
if(document.getElementById('Tab1Frame').src == '') {
document.getElementById('Tab1Frame').src = "${pageContext.servletContext.contextPath}/controller1.do";
document.getElementById('Tab12Frame').src = "${pageContext.servletContext.contextPath}/controller12.do";
}
} else if(tab == 'Tab2') {
if(document.getElementById('Tab2Frame').src == '') {
document.getElementById('Tab2Frame').src = "${pageContext.servletContext.contextPath}/controller2.do";
}
}
}
}
});
It has resolved the performance issue.