This is a migrated thread and some comments may be shown as answers.

Kendo Tab is not visible while loading ajax

3 Answers 159 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

sutanu asked on 03 Dec 2013, 01:21 PM

kendotabissue.png

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SCExcelReportDashboardView.aspx.cs" Inherits="Shell.SharePoint.SSP.SSC.Visualization.SCExcelReportDashboardView" %>

<html>

<head id="head1" runat="server">

<title>Excel Report</title>

<style type="text/css">

ul

{

list-style-type:none;

margin:0;

padding:0;

}

li

{

display:inline !important;

}

</style>

</head>

<body>

<div id="loadingDivExcelReport" style="display: none; z-index: 1000; position: absolute; padding-top: 130px; padding-left: 50%;text-align:center">

<img id="" alt="loading.." src="/_layouts/images/Shell.SharePoint.SP.SSC/KendoUI/loading-image.gif"><br>Loading content, please wait..

</div>

<table>

<tr>

<td >

<div id="excelReportTabstrip">

</div>

</td>

</tr>

</table>

<script type="text/javascript">

var exportToExcelUrl;

function onSelect(e) {

//alert("onSelect");

$('#loadingDivExcelReport').css('display', 'block');

if (e.item.innerText == "Export") {

window.location.href = exportToExcelUrl + "/model?$format=workbook";

}

//kendoConsole.log("Selected: " + $(e.item).find("> .k-link").text());

}

function onActivate(e) {

//alert("onActivate");

$('#loadingDivExcelReport').css('display', 'none');

//kendoConsole.log("Activated: " + $(e.item).find("> .k-link").text());

}

function onContentLoad(e) {

//alert("onContentLoad");

//kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");

}

function onError(e) {

alert("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);

//alert("Error Occured While Loading...!");

//kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);

}

$(function () {

//debugger;

function GetQueryParameters() {

var vars = [], hash;

var hrefValue = window.location.href;

hashes = hrefValue.slice(hrefValue.indexOf('?') + 1).split('&');

for (var i = 0; i < hashes.length; i++) {

hash = hashes[i].split('=');

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

}

var tabStrip = $("#excelReportTabstrip").kendoTabStrip({ animation: false, collapsible: false, select: onSelect, activate: onActivate, contentLoad: onContentLoad, error: onError }).data('kendoTabStrip');

var fileName = GetQueryParameters()["ExcelFileName"];

var excelSheetInfo = GetQueryParameters()["SheetNames"].split('|');

var startDateTime = GetQueryParameters()["StartDate"];

var endDateTime = GetQueryParameters()["EndDate"];

var analysisMode = GetQueryParameters()["AnalisysMode"];

var currentWebUrl = window.location.pathname;

currentWebUrl = currentWebUrl.substring(0, currentWebUrl.lastIndexOf('/') - 7);

exportToExcelUrl = window

.location.protocol+"//" + window.location.host + currentWebUrl + "_vti_bin/ExcelRest.aspx/Lists/SCExcelReports/" + fileName;

for (var i = 0; i < excelSheetInfo.length; i++) {

var excelReportUrl =window

.location.protocol+"//" + window.location.host + currentWebUrl + "_vti_bin/ExcelRest.aspx/Lists/SCExcelReports/" + fileName + "/model/Ranges('" + excelSheetInfo[i] + "')?Ranges('AnalysisPeriod')=" +

"%22" + startDateTime + ";" + endDateTime + ";" + analysisMode + "%22";

tabStrip.append({

text: excelSheetInfo[i],

contentUrl: excelReportUrl

});

}

tabStrip.append({

text: 'Export',

imageUrl: "/_layouts/images/Shell.SharePoint.SP.SSC/KendoUI/ExportToExcel.png",

content: "Export to Microsoft Excel"

});

tabStrip.select(tabStrip.tabGroup.children('li').eq(0));

});

</script>

</body>

</html>

using System;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using System.Web.UI;

using Microsoft.SharePoint.Utilities;

using Shell.SharePoint.SSP.SSC.Common;

using System.Web.UI.HtmlControls;

namespace Shell.SharePoint.SSP.SSC.Visualization

{

public partial class SCExcelReportDashboardView :Page

{

protected void Page_Init(object sender, EventArgs e)

{

string[] jsArray = new string[] { "/SCJquery/jquery.min.js", "/SCJquery/kendo.all.min.js"};

string[] cssArray = new string[] { "/SCCss/kendo.common.min.css", "/SCCss/kendo.default.min.css"};

for (int jsIndex = 0; jsIndex < jsArray.Length; jsIndex++)

{

HtmlGenericControl jScript = new HtmlGenericControl("script");

jScript.Attributes.Add("type", "text/javascript");

jScript.Attributes.Add("src", SPContext.Current.Site.Url + jsArray[jsIndex]);

Page.Header.Controls.Add(jScript);

}

for (int cssIndex = 0; cssIndex < cssArray.Length; cssIndex++)

{

HtmlLink cssLink = new HtmlLink();

cssLink.Href = SPContext.Current.Site.Url + cssArray[cssIndex];

cssLink.Attributes.Add("rel", "stylesheet");

cssLink.Attributes.Add("type", "text/css");

Page.Header.Controls.Add(cssLink);

}

protected void Page_Load(object sender, EventArgs e)

{

}

3 Answers, 1 is accepted

answered on 04 Dec 2013, 09:14 AM

Hi Sutanu,

Please avoid posting duplicate forum threads and support tickets.

The observed problem may be related to custom CSS styles on the page. For example, enforcing an inline display to all <li> elements on the page will almost surely break something.

In addition, quirks mode (no DOCTYPE on the page) triggers legacy browser rendering and various browser bugs. Quirks mode must not be used.

http://docs.kendoui.com/getting-started/technical-requirements#supported-desktop-browsers

http://www.quirksmode.org/css/quirksmode.html

You can refer to the following demo and compare it with your implementation.

http://demos.kendoui.com/web/tabstrip/ajax.html

If the problem persists, please provide a standalone fully runnable example.

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 04 Dec 2013, 09:53 AM

kendo_css_js.zip

I have Tried putting <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

& removed the Style part

<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline !important;
}
</style>

But i am getting same issue in IE 8.. in Chrome its working perfectly. I have attached the CSS & JS file please check whether i am using the correct CSS & JS

Thanks
Sutanu